CSS Selectors

ในตอนแรก ผมตั้งใจเขียนบทความในเรื่องการเขียน Floating Layout โดยใช้ Simple Selectors ผสมกับ Combinators ผลปรากฎว่า พอผมกลับมานั่งอ่านเองแล้ว ยังเห็นความยุ่งยากของการทำความเข้าใจกับการเรียกชื่อ Selectors แบบต่างๆ อยู่ อาจกล่าวได้ว่า ถ้าคนที่ไม่แตกฉานเรื่อง CSS Selectors แล้วมาอ่าน คง มึนงง กลับบ้านไม่ถูกกันเลยทีเดียว

ก่อนหน้านี้ผมเขียนบทความเรื่อง "อาชีพ เขียน CSS" เอาไว้ ตั้งปณิธาน เอาไว้ว่า จะพยายามอธิบายสิ่งที่มันยากๆ ให้เข้าใจง่าย และจะพยายามหาเรื่องใหม่ๆ มาให้คนที่สนใจได้รับรู้และศึกษา ตาม Title ของ ThaiCSS ที่เปลี่ยนไป เป็น CSS3 จึงต้องหันกลับมา เริ่มเขียนเรื่องใหม่ ค่อยๆ แนะนำกันให้เข้าใจกันก่อน

บางคนที่ทำมาหากินกับการเขียน CSS HTML แทบเรียกชื่อ Selectors ของ CSS ไม่ถูกด้วยซ้ำไป เพราะฉะนั้นแล้ว ถ้าผมไม่มีเนื้อหาเกี่ยวกับการสร้างความเข้าใจในเรื่อง Selectors ของ CSS แล้ว นั่นก็หมายความว่า "ผม บกพร่องในหน้าที่ ของการถ่ายทอดความรู้เรื่อง CSS"

การเขียน CSS แบบ Attribute Selector มีประโยชน์มากมาย มหาศาล แต่เรายังไม่ค่อยเห็นว่ามันแพร่หลายหรือเกลื่อนกลาดมากนัก นั่นก็เพราะว่า Attribute Selector เป็น CSS Version 2.1-3.0 ซึ่ง IE6 ไม่รองรับนั่นเอง จึงยังไม่เป็นที่นิยม

แต่สำหรับ CSS3 แล้ว ความหลากหลายของ Attribute Selector ได้ถูกเพิ่มเข้ามา คนที่ยังไม่เคยเห็น ผมขอแนะนำเอาไว้ตรงนี้ครับ

1. E[foo] คือ Element ใดๆ ที่มี Attribute ชื่อ foo เช่น div id=”main-contents”> ถ้านำมาเขียน CSS ก็จะเป็น div[id]{} หมายถึง div ที่มี attribute id อยู่

   ตัวอย่างที่ 1

   CSS:

   
div[id] {
width: 74em;
border: solid 0.02em rgb(200, 200, 200);
margin: 0 auto;
min-height: 5em;
}


บทที่ 1: เกริ่น

ถ้าหากจะบอกว่าการทำความเข้าใจความหมายและรูปแบบการเขียน Selector ของ CSS นั้นมันไม่สำคัญ ก็คงจะไม่ใช่ เพราะว่าแท้จริงแล้วมันก็สำคัญในระดับพื้นฐาน บางคนอาจจะหลงลืมไป หลายๆ คนอาจจะไม่อยากใส่ใจมัน เพราะว่า "คิดว่า" มันไม่สำคัญ เพราะว่ามันก็แค่ชื่อเรียกใช่หรือไม่ เพราะในความเป็นจริงแล้ว ลูกค้าหน้าไหนจะเข้าใจถ้าเราไปนั่งอธิบายว่า อันนั้นคืออะไร อันนี้คืออะไร

เมื่อไม่นานมานี้ ผมเพิ่งเข้าใจว่า ผมไม่ได้เขียนเรื่องราวการทำเว็บ แต่เป็นเพียงแค่ส่วนหนึ่ง ผมกำลังพูดถึงการเขียนภาษาที่เกี่ยวข้องกับการทำเว็บอยู่ 2 ภาษา นั่นคือ HTML กับ CSS จึงสรุปได้ว่า นั่นคือสิ่งที่ผมกำลังทำ และจะทำต่อไป ผมไม่ได้เขียนบทความ หรือสร้างเนื้อหา พาคนมาทำเว็บ แต่กำลังแลกเปลี่ยนความรู้ ประสบการณ์ ของการเขียน CSS และ HTML ผมจึงไม่ค่อยสนใจเรื่องการทำเว็บ แต่ใส่ใจในหน้าที่ที่ต้องทำ เพราะอาชีพของผมคือ "เขียน HTML และ CSS" เพราะฉะนั้น ผมจึงขอพูดแค่นั้น เพราะอย่างอื่นไม่สันทัด

หลายๆ คนอาจจะสับสน ตีเหมารวมไปหมดว่า แค่สองอย่างนี้มันคือการทำเว็บทั้งหมด ซึ่งมันไม่ใช่ในความรู้สึกของผม ไม่ว่ามันจะใหม่ จะเก่าในเรื่องเนื้อหา บราวเซอร์ไม่รองรับ ลูกค้าไม่ต้องการ หรือคนอื่นมันยังไม่รู้เรื่อง แต่ผมก็คิดว่า นั่นมันเรื่องของเว็บ หรือเรื่องของคนทำเว็บ ไม่ใช่เรื่องของ "CSS หรือ HTML" ที่ผมทำอยู่ เพราะฉะนั้น ในเมื่อภาษามันเปลี่ยนแปลง มันก้าวหน้าไป ผมก็ต้องทำหน้าที่เพื่อที่จะศึกษาและพัฒนาในส่วนของงาน

10 มีนาคม 2552 คือวันที่ W3C เรียก Last Call: Selectors Level 3 นั่นก็แสดงว่า ความจริงที่เราจะต้องเจอมันขยับเข้ามาใกล้ตัวมากขึ้นทุกที

สิ่งหนึ่งที่ผมคิดว่า W3 มีความจำเป็นอย่างยิ่งที่ต้องปล่อย CSS3 ออกมาให้เร็วที่สุดเท่าที่จะทำได้ก็เพราะว่า Windows 7 จะออกลุยตลาดอย่างช้าที่สุดก็ภายในปลายปีนี้ นั่นก็เป็นนิมิตหมายอันเลวร้ายสำหรับเว็บที่ไม่ได้มาตรฐานทั้งหลาย เพราะ IE8 จะนอนมากับ Windows 7 ด้วย ยกเว้นผู้ใช้ Windows ในยุโรป เพราะ M$ อาจจะไม่แถม IE8 มากับ Windows 7 เพราะ Opera เคยยื่นหนังสือร้องเรียนการผูกขาดตลาดบราวเซอร์อย่างไม่เป็นธรรมกับ EU มาก่อนหน้านี้

ช่างมันเหอะ กับเรื่องราวด้านบน เรามาดูกันว่า เราจะเริ่มทำตัวให้คุ้นชินกับ CSS3 กันยังไงได้บ้างนั่นต่างหาก

สำหรับผม ผมเขียน CSS3 ไปนานแล้ว แต่ใครที่ใช้ IE6 ก็คงไม่รู้ว่าผมเขียนอะไรไปบ้าง เพราะผมจงใจที่จะไม่ใช้ กับ IE ที่หลายๆ คนเห็นเวลาเอา IEs เข้าชม ThaiCSS หน้าเว็บมันดูไม่ได้บ้าง มันโย้นั่นโย้นี่ ก็คือผมตั้งใจให้มันเป็นอย่างนั้นเอง คือ ไม่อยากไปสนใจกับมันมาก ผมไม่ได้ทำเว็บเพื่อคนทุกคน แต่ผมแค่ทำเว็บเพื่อคนบางกลุ่ม

เพราะกลุ่มเป้าหมายทางด้านการสื่อสารของผม ไม่ใช่ “คนทั่วไป” อย่างที่หลายๆ คนเคยได้ยิน

อย่างต่ำไม่น้อยกว่า 5 ปี หรือภายในปี 2557 ประเทศไทยถึงจะหันมาใช้ CSS3 แต่สำหรับเว็บบางประเภทแล้ว คงเริ่มใช้กันตั้งแต่วันนี้

css2 และ css3 มีรูปแบบการใช้งาน selectors เพิ่มมากยิ่งขึ้นและแตกต่างกันออกไป มาดูกันว่า css3 มี selectors เพิ่มมา มากน้อยเท่าใด และเราจะเตรียมตัวนำไปใช้ได้อย่างไรกันบ้าง

เราจะเตรียมตัว ต้อนรับการมาถึงของ IE8 กันอย่างไรให้สมศักดิ์ศรี ถึงแม้ว่า ต้นมีนาคมนี้ ความไม่แน่นอน ยังคงมีอยู่สูงว่า จริงๆ แล้วเบต้า จะออกมาให้เราลองใช้กันทันหรือไม่ 5 มีนาเราคงเห็นคำตอบกัน แต่เรานั่งพิจารณาดูกันให้ถี่ถ้วนกันอีกสักนิดว่า เราจะนำ Selectors ทั้งสองเวอร์ชั่นเหล่านี้ มาใช้งานให้คุ้มกันอย่างไรบ้าง

ปัจจุบัน Selectors รูปแบบหลักๆ ที่เราใช้กันบ่อยมาก ก็คงจะมี

หลายคนอาจจะไม่ค่อยสนใจเท่าไหร่ว่า ลักษณะการเขียน CSS Selector ที่ใช้อยู่นั้นมันเรียกว่าการเขียนแบบไหน รู้แค่เพียงว่ามันใช้ประโยชน์ อย่างไรและเขียนแบบนี้แล้วแสดงผลแบบนั้นเป็นสำคัญ โดยหลักๆ แล้ว Class Selector (.) และ ID Selector (#) มักจะถูกนำมาใช้งานมากและบ่อยที่สุดก็น่าจะว่าได้ แล้ว Selector แบบอื่นที่เราเห็นหละ มันเรียกว่าอย่างไร มีหลักการใช้งานยังไงกันบ้าง

ตอนนี้ผมจะขอยกตัวอย่างการเขียน CSS ในการควบคุมการแสดงผลของ Navigation แล้วขออธิบายเป็นลำดับไปนะครับ โดยในที่นี้อยากจะเน้นไปที่การเขียน CSS แบบ Descendant selectors เป็นหลัก แต่ไม่ได้หมายความว่าผมจะละเลยการอธิบายเรื่องราวการเขียน CSS ในรูปแบบอื่นๆ ไป

Descendant selectors คือการเขียน CSS แบบสืบทอดคุณสมบัติตามแบบฉบับลูกหลานของ Element ใดๆ ที่อยู่ภายใต้ Element หลักที่เราสั่งงาน เช่นตัวอย่างต่อไปนี้จะแสดงถึง h1 ซึ่งเป็น ลูกของ div จะทำงานก็ต่อเมื่อ อยู่ใน div เท่านั้น