CSS3

CSS3 ปฐมบท

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

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

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

เปรียบเทียบ Selectors ของ CSS2 และ CSS3

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

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

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

Descendant selectors ของ CSS

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

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

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

CSS3 เพื่ออะไร?

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

กลับมาหา CSS

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

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

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

Back to Top