CSS3

คำเตือน บทความนี้เป็นบทความเฉพาะกลุ่มเป้าหมาย เนื้อหาส่วนใหญ่ไม่ได้อยู่ในโลกปัจจุบัน ไม่ค่อยเหมาะสำหรับคนที่มองอนาคตระยะ 15 เมตร

คำเตือนที่สอง เนื้อหานี้ ไม่เหมาะสำหรับผู้ใช้ทั่วไป และ ตัวอย่างทั้งหมด ไม่สามารถใช้ User Agent ที่เป็น Browsers อย่าง IE ทั้ง 6-7-8 เรียกดูได้ เพราะฉะนั้น กรุณาใช้ Firefox, Opera, Safari, หรือ Chrome เข้าชม

คำเตือนที่สาม ผมเกรียน…

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

-1-

คำถามชุดที่หนึ่ง ราคา สี่ร้อยเก้าสิบเก้าบาท

ถามว่า HTML5 จะใช้ได้ในเร็ววันนี้หรือไม่

คำตอบคือ ทั้งใช่ และไม่ใช่ อย่างไรบ้างหละ

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 แต่สำหรับเว็บบางประเภทแล้ว คงเริ่มใช้กันตั้งแต่วันนี้

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

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

สถานะ Last Call ของ CSS3 ในหมวดของ Selector แน่นิ่งมานาน แต่ผมก็ไม่รู้ว่าจะรีบไปใย โดยเฉพาะกับพี่ไทยทั้งหลาย เพราะ เอาแค่ CSS2 นี่ก็ยังเมากันอยู่ หรือดีมาหน่อยก็ CSS2.1 ก็ยังใช้กันไม่หวาดไม่ไหว สำหรับบางคนแล้ว มีแค่ Class Selector ก็คงถือว่ามากพอ แต่สำหรับคนบางกลุ่มแล้วมันคงไม่พอ

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 เท่านั้น

CSS3 เริ่มเขียนเริ่มใช้กันได้แล้ว หาซื้อได้ตามร้านโชวห่วยทั่วไป แต่ อะไรกันแค่เพียง CSS1 กับ CSS2-2.1 ยังเขียนไม่หวาดไม่ไหว จะจู่โจมสู่ไตรภาคกันแล้วหรือ ค่อยๆ เขียนค่อยๆ เพิ่มกันไป จะให้ผมมาเขียนเชียร์แบบบ้าพลัง

กลับมาหา CSS

ถือได้ว่าเราห่างหายจากการเขียนบทความที่เกี่ยวข้องกับ CSS อย่างเดียวโดยตรงไปนาน เพราะทั้งผม (พร อันทะ) และ รดิส (radiz) ต่างพยายามเบี่ยงเบนความสนใจของทุกๆ ท่านไปที่เรื่อง Semantic web, Web Standards และเรื่อง XHTML นานพอสมควร ไม่ใช่ว่าพวกเราจะเลิกสนับสนุนหรือแนะนำเรื่องราวเกี่ยวกับ CSS กันแล้ว แต่เพียงแค่หันไปบอกเล่าเรื่องที่มันสำคัญมากยิ่งกว่า CSS แค่ชั่วคราวแค่นั้นเองครับ เพียงเพราะแค่อยากให้เข้าใจเรื่องราวของการเขียนเว็บตรงและเป็นอันหนึ่งอันเดียวกัน กระนั้นก็ยังหวั่นๆ ว่ามันจะไปทางเดียวกันได้หรือไม่ ต้องรอดู

มาถึงตอนนี้ ผมคงเริ่มที่จะกลับเข้ามาหาเรื่องราวที่เกี่ยวข้องกับ CSS มากยิ่งขึ้น ตามการเปลี่ยนแปลงของเวลา แต่คงเป็นอะไรที่ซับซ้อนมากกว่าเมื่อก่อนมาก เพราะต้องเขียน CSS ให้รองรับในฉบับของ Semantic Web

สงครามบราวเซอร์ จุดเริ่มต้นของจุดจบ