CSS4 มาแล้ว เปิดหัวกับ CSS Selectors Level 4

เมื่อวันที่ 29 กันยายน 2554 ทาง W3C ได้ประกาศ Working Draft สำหรับ CSS4
ออกมาอีก 1 หมวด ซึ่งนั่นก็คือ CSS4 ที่เป็น Selectors นั่นเอง

อะไรนะ CSS4 อีกแล้วเหรอเนี่ย!!! หลายคนคงอยากอุทานออกมาเป็นภาษามนุษย์ต่างดาว เพราะทุกวันนี้ CSS3 เรายังไม่ได้ใช้กันจนหมดทุกหมวดหมู่เลย ทำไมมันก้าวไปถึงขั้น CSS4 กันแล้ว

ผมขอย้อนกลับไปยัง CSS2, CSS2.1 จนมาถึง CSS3 กันก่อนนะครับ

ในตอนแรกนั้น ทาง Working Group ที่พัฒนา CSS ไม่ได้แยกหมวดหมู่ของ CSS ออกเป็นแต่ละ Level ของตัวเอง เช่น CSS2 ซึ่ง ใน CSS2 นั้นพอพูดถึงคำว่า CSS2 แล้ว มักจะหมายถึงทุกอย่างที่เกี่ยวกับ CSS2 หรือ 2.1 แต่เมื่อ CSS เดินทางมาถึง Level 3 เขาได้แบ่ง แต่ละหมวดหมู่การทำงานของ CSS ออกเป็นกลุ่มๆ ปรับปรุงและพัฒนาด้วยหมวดหมู่ของมันเอง หมวดหมู่ไหนที่พัฒนาเต็มที่แล้วก็ เบรกเอาไว้อย่างนั้น การแบ่งออกเป็นหมวดหมู่ใน CSS3 ก็อย่างเช่น การพัฒนาเรื่อง
CSS Backgrounds and Borders Module Level 3 หรือ การพัฒนา CSS Selectors Level 3 ทำอันไหนเสร็จก่อนก็สามารถประกาศใช้ก่อนได้ ไม่จำเป็นต้องรอให้เสร็จทุกหมวดหมู่แล้วค่อยประกาศใช้อย่างที่เคยเกิดขึ้นเหมือนกับ CSS2

เราจึงเห็น CSS3 Selectors หลุดออกมาเป็น Completed Work (W3C Recommendations) ก่อนใครเพื่อน ซึ่งส่วนอื่นๆ นั้นก็รอพัฒนาเสร็จแล้วค่อยประกาศ

เมื่อทีม Editors ของ CSS Selectors ประกาศงานออกมาใช้แล้ว เขาเหล่านั้นจะทำอะไรต่อไป หรือกลับไปทำนาที่บ้าน รอน้ำลดแล้วค่อยกลับเข้าโรงงานใหม่ อันนี้ก็คงไม่ใช่เรื่อง เพราะเมื่อภาคสามเสร็จ เขาก็ลุยต่อภาคสี่

เราจึงเห็น CSS Selectors Level 4 โผล่ออกมาก่อนส่วนอื่น

แต่สิ่งที่ทำให้ผมเข้าใจว่าทำไม CSS4 ชุดนี้ออกมาก่อนอย่างอื่น นั่นก็เพราะว่า Selectors ใหม่ๆ ส่วนใหญ่แล้ว ออกมาเพื่อจัดการกับ HTML5 ซะส่วนมาก

ประเด็นที่น่าปวดหัวอีกอย่างคือ “หมวดหมู่” ของ Selectors ถูกโยกย้ายส่ายสะโพกอีกครั้ง ทำให้ต้องมารื้อสมองจำกันใหม่

CSS ที่ถูกสร้างมาเพื่อจัดการกับ HTML5 หลักๆ ก็คือ

1. Time-dimensional Pseudo-classes ซึ่งได้แก่
   1. :current
   2. :past
   3. :future
2. The UI states pseudo-classes ซึ่งได้แก่
   1. :enabled ,:disabled
   2. :checked
   3. :indeterminate
   4. :default
   5. :valid, :invalid
   6. :in-range, :out-of-range
   7. :required, :optional
   8. :read-only, :read-write

รวมถึงหมวดหมู่ที่พัฒนาต่อยอดจากภาค 3 ด้วย เช่นเรื่องของ Grid-Structural Selectors ซึ่งมี :column(), :nth-column(), :nth-last-column() (ต่อยอดจาก CSS Multi-column Layout Module)

แต่ Selector ของ CSS4 ที่ผมชอบมากที่สุดกลับเป็น ตัวนี้ $E > F

เอาหละครับ มันมีเครื่องหมาย $ (ดอลล่า) เข้ามาอยู่ข้างหน้า ซึ่งถูกเพิ่มเข้ามา ในหมวดหมู่ Combinators

$E > F อ่านว่า “อี ที่มีลูกเป็น เอฟ” ถ้าเอามาเขียนเป็นภาษา CSS บ้านๆ ก็ประมาณ $p>strong {…} หมายความว่า “พี่ ที่มีลูกเป็น สตรอง”

เมื่อก่อนในภาค 3 เราเจอ E>F ซึ่งอ่านว่า “เอฟ ที่เป็นลูกของ อี” ถ้าเอามาเขียน CSS บ้านๆ ก็เช่น div>p {…} หมายความว่า “พี ที่เป็นลูกของ ดิฟ”

แล้วมันต่างกันยังไง

ถ้าเราเขียน

<p>Lorem ipsum dolor sit amet, <strong>consectetur adipisicing</strong> elit</p>

$p>strong:hover { 
background: #666;
}

อ่านว่า “เมื่อเอาเมาส์ วางบน strong ให้ p มีพื้นหลังเป็นสี #666” ซึ่งหมายความว่า มันเป็นคำสั่งย้อนกลับไปสั่งที่ตัว “แม่” ของ simple selector นั้นๆ ซึ่งต่างจาก CSS Selectors Level 3 ที่มีเฉพาะการสั่ง ลูกและหลาน

อย่างไรก็ตาม ใช่ว่าการเปิด CSS4 หมวดนี้ออกมาจะทำให้เราสามารถนำมาใช้ได้ง่ายๆ อย่างน้อยผมคาดว่า ไม่น่าจะต่ำกว่า 3-4 ปี เราจึงจะเห็น CSS4 ทยอยออกมาวาดลวดลาย และอีกประมาณ 10 ปี CSS5 คงจะตามกันออกมา ซึ่งตอนนั้นจะเป็นยุคเปลี่ยนระบบคิดเกี่ยวกับการจัดการหน้าเว็บใหม่แทบทั้งหมด นั่นหมายความว่า Floating′s Layout ที่เราเขียนๆ กันอยู่ในปัจจุบัน จะถูกแทนที่ด้วย Positioning′s Layout แทน

แต่ผมอาจจะคิดผิด การประมาณเรื่องเวลาของผม อาจจะมองมันช้าไปหน่อย มันอาจจะมาเร็วกว่าที่คิด เพราะทุกวันนี้ HTML6 เริ่มลงเสาเข็มกันแล้ว

อย่างไรก็ตาม เรื่องของ CSS4 Selectors ที่กล่าวมานั้น ยังไม่มีความแน่นอน สถานการณ์อาจจะเปลี่ยนแปลง หมวดหมู่อาจจะถูกโยกย้าย เพราะมันยังคงเป็นเพียงแค่ Working Draft แต่ไม่ว่าอย่างไร แนวโน้มคงไม่ต่างไปจากนี้มากมายนัก

มีความสุขกับการใช้ชีวิตครับ