CSS3

มีมิตรสหายโทรมาเร่งครับว่าอยากอ่านแล้ว ผมเองก็หมดมุขเพราะจริงๆ มันแทบจะซ้ำกับ HTML5 เลย แต่ก็เอาสักหน่อย

เนื้อหาอย่างที่บอกนะครับ ส่วนมากซ้ำกับ HTML5 ผมไม่เขียนนะ ประเด็นสำคัญที่เหมือนกันคือ CSS3 กับ CSS เดิมออกแบบมาให้ใช้งานได้ด้วยกัน ฉะนั้น ไม่ได้เป็นภาษาใหม่ หน้าตาแบบใหม่ ไม่ต้องเรียนใหม่ แค่คำสั่งเพิ่ม

# CSS3 คืออะไร

มันคือมาตรฐานใหม่แบบ living standard เช่นเดียวกันครับ (ความเดิมตอนที่แล้ว living standard คือมาตรฐานที่มันเขียนเพิ่มไปเรื่อยๆ)

HTML5 ดูแลโดยองค์กร [WhatWG](http://whatwg.org) ส่วน CSS3 นั้นดูแลโดย [W3C](http://www.w3.org/standards/techs/css) นะครับ ซึ่งลักษณะการทำงานขององค์กรก็จะต่างกัน W3C นั้นมองตัวมาตรฐานแบ่งเป็นเอกสารย่อยๆ ซึ่ง HTML5 ก็เคยถูกดูแลในลักษณะนี้ก่อนที่จะโอนย้ายไปให้ WhatWG

ในมาตรฐานย่อยๆ ก็จะมีสถานะแยกกันไปว่าเอกสารนี้นั้นถึงขั้นไหนแล้ว ได้แก่ Working Draft – เผยแพร่ออกมาให้ตรวจทาน บางอันอาจไม่ไปต่อจากขั้นนี้, Last Call – ประกาศเส้นตายการขอความคิดเห็นเพื่อที่จะได้ไปขั้นต่อไป, Candidate Recommendation – แนะนำให้เอาไปพัฒนาดู, Proposed Recommendation – เสนอชื่อให้เข้าขั้นแนะนำให้มี, W3C Recommendation – ควรเอาไปใช้กันทั่วไป

ไอ้ตัวสถานะเอกสารเนี่ย ในฐานะคนใช้ไม่ต้องไปแคร์ให้ปวดหัวครับ ดูตาราง [caniuse](http://caniuse.com) อย่างเดียวได้เลย

ทีนี้มาพูดถึงตัวที่น่าสนใจสักหน่อย

# Selector Level 3

บางคนอาจสับสนว่า​ CSS3 คือ CSS Query แบบใหม่อย่างเดียว นั่นไม่ใช่ครับ ตัวมาตรฐาน CSS2/2.1 เคยถูกกำหนดเป็นเอกสารชิ้นเดียวมาก่อนที่จะถูกแยกออกเป็นชิ้นๆ ก่อนที่จะมาเป็น CSS3 ซึ่งมีหลายๆ ส่วน Selector เป็นแค่ส่วนนึง

Selector ถ้ายังไม่รู้จัก (บางคนเขียน CSS ไม่รู้จัก selector นะครับ เหมือนยุยที่ดีดกีตาร์เป็นแต่ไม่รู้ศัพท์เทคนิคนั่นล่ะ) มันคือการระุบ element นั่นแแหละครับ อย่าง `#id .class tagname{}` ตัวนี้แหละคือ selector

ถามว่า CSS3 มี Selector อะไรบ้างล่ะ ผมแนะนำเลยครับว่า[ดูในสเปค](http://www.w3.org/TR/selectors/#selectors)มันได้เลย ตารางที่เห็นในลิงก์ นั่นล่ะครับคืออ้างอิง CSS ที่สั้น ง่าย ได้ใจความ และครบถ้วนที่สุดแล้ว และช่องหลังสุดจะบอกเลยว่าตัวนี้มีครั้งแรกใน Selector Level ไหน

นอกจากนี้แล้ว Selector ยังมี [Level 4](http://www.w3.org/TR/selectors4/) นะครับ แต่อยุ่ในขั้น WD อยู่ในตอนนี้ ตัวที่น่าจะเคยเห็นกันที่มาจากเลเวลนี้คือ `:nth-match()` ที่ไว้ระบุกรณี selector ตรงกับหลายตัวว่าจะเอาตัวไหนตัวหนึ่ง

# Media Query

สมัย HTML4 เรามี `