CSS3

วันนี้ ผมคิดอะไรออกบางอย่าง เป็นกรณีเส้นขนบังภูเขาไฟ ชนิดที่เรียกได้ว่า ผมน่าจะคิดพบตั้งนานแล้ว ได้แต่นั่ง งงๆ ในความโง่ของตัวเอง เลยเอามาเขียนไว้ตรงนี้อีกที

เหตุการณ์ที่ว่านี้คือ การสั่ง element ใดใด ที่เป็น child element ยกเว้น child ตัวที่ 1

เช่นว่า เราแบ่งเนื้อหาออกเป็น คอลัมน์ แล้วเราต้องการขีดเส้นกั้นเอาไว้ แต่ ถ้าเราสั่ง border เช่น border-left เข้าไปตรงๆ นั้น มันจะทำให้ เกิด เส้นขอบขึ้นที่ ด้านซ้ายสุดของกล่องข้อมูลด้วย เราจำเป็นต้องหาทางลบเส้นขอบมันออกไป โดยที่ยังคงความเป็น semantic ของ html เอาไว้ให้ได้มากที่สุด

เมื่อครั้งเก่าก่อน เราอาจจะเขียน class ขึ้นมา 1 class ซื่อว่า .none-border {border: none;} แล้วเอาไปใส่ ใน element ตัวแรกที่เกิดเส้นขอบขึ้น เพื่อลบเส้นขอบออกไปแทน แต่เกิดคำถามขึ้นว่า ทำไม เราต้องไปเพิ่ม ค่าให้กับ Attribute class นั้น โดยที่ชื่อ class ไม่ได้แสดงออกถึงการสื่อสารด้าน เนื้อหา ข่าวสารในความเป็น Semantic web ของภาษาเลย

ซึ่งหน้าที่เหล่านี้ โดยความรับผิดชอบแล้ว มันอยู่ที่ภาษา CSS ไม่ใช่ HTML

มาดูกันว่า เราจะลบเส้นขอบด้านซ้ายของ คอลัมน์แรกออกไปได้ยังไง โดยที่ไม่ใส่ class เพื่อสั่งลบเส้นขอบออกไป

IE9 พี่ท่านมาแล้ว ถึงแม้ยังขาดตก บกพร่อง ก็ยังดีกว่าไม่มา ใครที่อยากจะลองของแปลก เชิญอัพเดทจาก IE8 ไปเป็น IE9 ได้ที่ www.beautyoftheweb.com เลยครับ ส่วนผม อัพเดทไปเรียบร้อยแล้ว เพื่อที่จะเอามาลองเล่นของ ซึ่งถือว่าไม่ได้เลวร้ายไปจากที่คาดการณ์กันเท่าไหร่นัก ส่วนที่เลวร้ายกว่านั้นในความรู้สึกของผมคือ ความเหินห่างจากบราวเซอร์โลโก้ ตัว อี สีฟ้าๆ น้ำเงินๆ ตัวนี้มานานหลายปีนั่นเองที่ทำให้เกิดความไม่อยากใช้งาน แม้กระทั่ง แทบไม่ได้ใช้เข้า ThaiCSS จนเกิดอาการคนใช้ IE เข้า ThaiCSS ไม่ได้มาเป็นเดือนๆ เพราะผมแยก Theme เอาไว้แล้วลืมอัพโหลดไฟล์ template เข้าไปยัง Theme ของ IE 1 ไฟล์ จึงเกิดอาการ หน้าขาวเกิดขึ้น ขออภัยมา ณ ที่นี้ด้วยขอรับ

กลับมาที่เรื่องราว CSS ของเรากันต่อ อย่างที่ผมได้เกริ่นไปในบทความก่อนหน้าว่าผมจะเริ่มเข้าสู่โหมด CSS3 Modules หลังจากที่เมาอยู่กับ CSS3 Selectors มานานสองนาน วันนี้ผมขอยกตัวอย่างเรื่องของ CSS Background Module Level 3 กันพอหอมปากหอมคอ แต่น่าจะได้นำไปใช้ประโยชน์ได้หลากหลายหนทาง

หลังจากที่ห่างหายไปกับการพูดถึงเรื่องของ Module ที่เกี่ยวข้องโดยตรงกับ Properties และ Values ของ CSS กันไปเป็นระยะเวลานานพอสมควร อาจเป็นเพราะผมยังมองว่าเรายังเข้าใจหลักการเขียน Selectors กันแบบถูกน้อย ถูกน้อยมากกันอยู่ จึงมัววุ่นอยู่แต่กับ Selector ซึ่งก็ยังพูดกันไม่หมดอยู่ดี แต่การกระโดดไกลแบบเขย่ง ก้าว กระโดดของ User Agents ทั้งหลาย ทำให้ผมไม่สามารถรีรอที่จะพูดถึงความสามารถต่าง ต่าง ที่เป็นส่วนประกอบ (Property) ของ CSS3 ได้อีกต่อไป

ขอเริ่มกันที่ CSS3 Color Module นะครับ เพราะผมเห็นว่า Module นี้ User Agents ที่เป็น Browser ทั้งหลายนั้นได้รองรับกันหลายเจ้าพอสมควร และอีกอย่าง เพื่อต้อนรับการมาถึงของ IE9 ที่กำลังเดินทางมาจากกาแล๊กซี่อันไกลโพ้น

CSS Pseudo-classes ที่อยู่ในจำพวก Structural pseudo-classes นั้นมีหลายตัวด้วยกัน แต่วันนี้ ผมขอพูดถึงตัวพื้นๆ ใช้ง่ายๆ และน่าจะได้นำมาใช้บ่อยๆ กันก่อนนะครับ
Structural pseudo-classes มีไว้ใช้ในกรณีที่ Simple Selectors และ Combinators Selectors นั้นไม่สามารถนำมาใช้งานได้ เพราะฉะนั้น ในการเลือกใช้งานอย่างเหมาะสมตามความสามารถของภาษาก่อนเป็นอันดับแรก เช่น ถ้าหากเราจะสั่งงาน HTML บางชุดการใช้งาน ให้เริ่มคำนึงถึง Simple Selectors อื่นๆ ก่อน

ปัญหาจะตามมาตรงนี้ เพราะ คนทำงานมันยังไม่รู้ว่า Simple Selectors มันคืออะไรกันวะ หน้าตาเป็นยังไง ถ้าอย่างนั้น เอาอย่างนี้ ผมจะขอไกด์ไลน์ ให้พอเป็นอีโนให้ เช่น สมมุติว่าเรามีกลุ่ม HTML กลุ่มหนึ่ง เราจะเขียน CSS จัดการ ให้เริ่มลำดับการเลือกที่

1. Type Selector
2. Universal Selector
3. Attribute Selectors
4. Class selectors (อันนี้ได้ข่าวว่า ชาวไทยผู้คลั่งชาติ ชอบใช้กันมาก)
5. ID Selectors (อันนี้ หลายคนก็ยังไม่รู้ว่ามันต่างจาก อันด้านบนยังไง และเลือกใช้งานยังไงอีก)
6. พอมาถึงตรงนี้ ถ้ายังเลือกหา Selectors ที่เหมาะสมเพื่อจะจัดการกับ HTML ของเรายังไม่ได้ ให้ข้ามไปที่ Combinators Selectors โดยเริ่มที่การเลือก Descendant Combinator ก่อน ถ้ายังไม่ได้ ให้ไป
7. Child combinators
8. Sibling combinators โดยในนี้ มี 2 อันให้เลือกใช้คือ Adjacent sibling และ General sibling
9. ถ้าลูกค้าเร่งงานมาด่วนมาก คิดไม่พบ ว่าอะไร เป็นยังไง ให้ทำงานหาเงินก่อน อย่าเพิ่งคำนึงถึง 8 ข้อด้านบนมาก เดี๋ยวจะไม่มีเงินกินข้าว

เคยคิดหนักเรื่องการแบ่งหน้าเว็บออกเป็นหลายๆ สดมภ์กันไหมครับ ไม่ว่าจะ สอง สาม สี่ หรือห้า เมื่อเราต้องการแบ่งหน้าเว็บทีไร ต้องมาเขียน CSS
ใหม่ทุกที แต่วิธีที่ผมจะแนะนำต่อไปนี้ มันต้องมีข้อแม้ และไม่ต้องไป ค้นหาว่า มี ”ฝรั่ง” ที่ไหนเคยทำ หรือ พาทำ หรือไม่ ถึงมีจริง ผมก็ไม่รู้ว่าอยู่ตรงไหน

การตั้งค่าการการแบ่ง สดมภ์ อย่างเป็นมาตรฐาน เราสามารถเขียน CSS แค่ไม่กี่บรรทัด ก็ทำได้แล้ว แต่สิ่งที่เราจำเป็นต้องรู้คือ การเขียน CSS Selector ในหมวดหมู่ Attribute
Selector โดยเฉพาะ อย่างยิ่ง CSS Substring matching attribute Selector ถ้าใครยังไม่รู้ว่าเขียนยังไง ก็ลองค้นๆ หาเอาใน ThaiCSS นี่แหละครับ ผมเขียนไว้หลายแบบอยู่และนานมาแล้ว

Selectors ที่ต้องใช้ในการนี้มีทั้ง Child Selector และ Attribute Selector

เป็นอะไรกันไม่รู้ครับ พ่อแม่พี่น้อง ช่วงนี้ ทำไม มองไปทางไหนมีแต่คน บ้า HTML5 และ CSS3 แต่บางที
คงไม่ต้องหาคำตอบให้กับคำถามปัญญาอ่อนของผมก็ได้ เพียงแค่ก้มหน้าก้มตาทำหน้าที่ไปเรื่อย เรื่อยก็คงพอเพียงแล้ว

อันเรื่องราวของ HTML5 และ CSS3 นั้น ThaiCSS เองก็ใช้มานานนม เพราะมันมีมานานแล้ว จึงไม่ค่อยได้ตื่นเต้นไปเท่าไหร่

เมื่อก่อนตอนใช้ ก็มีคนหาว่าบ้า ตอนนี้เป็นไงหละ บ้ากว่ากุอีก