แม้ว่าคุณสมบัติใหม่มากมายของ CSS3 จะไม่ได้รับการสนับสนุนจากเบราว์เซอร์จำนวนมากหรือไม่ได้รับการสนับสนุนอย่างดีก็ตาม แต่ในฐานะนักพัฒนาส่วนหน้า คุณแทบจะรอไม่ไหวจนกว่าเบราว์เซอร์ทั้งหมดจะรองรับมันอย่างเต็มที่ก่อนที่จะเรียนรู้
CSS3 นำเสนอคุณสมบัติใหม่อะไรบ้างแก่เรา? พูดง่ายๆ ก็คือ CSS3 สามารถบรรลุเอฟเฟกต์มากมายที่ก่อนหน้านี้จำเป็นต้องใช้รูปภาพและสคริปต์ด้วยโค้ดเพียงไม่กี่บรรทัด เช่น มุมโค้งมน ขอบภาพ เงาข้อความ เงากล่อง เป็นต้น CSS3 ไม่เพียงแต่ทำให้กระบวนการออกแบบสำหรับนักพัฒนาส่วนหน้าง่ายขึ้นเท่านั้น แต่ยังเพิ่มความเร็วในการโหลดหน้าเว็บอีกด้วย
ในบทความนี้ เราจะมาดูฟีเจอร์ใหม่ๆ ต่างๆ ของ CSS3 อย่างครอบคลุมกัน อย่าลืมตรวจสอบบทช่วยสอนและเคล็ดลับ CSS ก่อนหน้าของเรา:
เพื่อที่จะใช้คุณสมบัติ CSS3 ส่วนใหญ่ เราต้องใช้ ส่วนขยายเฉพาะของผู้ผลิต พร้อมกับคุณสมบัติดั้งเดิม เหตุผลก็คือ จนถึงขณะนี้ เบราว์เซอร์ส่วนใหญ่รองรับคุณสมบัติ CSS3 บางอย่างเท่านั้น และน่าเสียดายที่คุณสมบัติบางอย่างอาจไม่ได้รับการแนะนำโดย W3C ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องแยกแยะความแตกต่างจากคุณสมบัติมาตรฐานโดยการระบุคุณสมบัติเฉพาะของเบราว์เซอร์ (จากนั้นใช้คุณสมบัติที่เป็นไปตามมาตรฐานเมื่อมีลักษณะซ้ำซ้อนจะแทนที่คุณสมบัตินั้น)
แน่นอนว่าข้อเสียของแนวทางนี้คือจะส่งผลให้สไตล์ชีตยุ่งเหยิงและประสิทธิภาพของไซต์ระหว่างเบราว์เซอร์ไม่สอดคล้องกัน ท้ายที่สุด เราไม่ต้องการรื้อฟื้นความจำเป็นในการแฮ็กเบราว์เซอร์ส่วนตัวในสไตล์ชีตของเรา แท็กกระโจมกะพริบและแท็กอื่น ๆ ของ Internet Explorer ถูกนำมาใช้ในสไตล์ชีตจำนวนมากและกลายเป็นตำนานในทศวรรษ 1990 แท็กเหล่านี้ยังคงทำให้เว็บไซต์ที่มีอยู่จำนวนมาก (ในเบราว์เซอร์อื่น) ไม่สอดคล้องกันหรือแม้กระทั่งอ่านยาก และเราไม่อยากให้ตัวเองตกอยู่ในสถานการณ์เดียวกันตอนนี้ใช่ไหม?
อย่างไรก็ตาม เว็บไซต์ ไม่ จำเป็นต้อง มีลักษณะเหมือนกันทุกประการในทุกเบราว์เซอร์ บางครั้งคุณสามารถใช้คุณสมบัติส่วนตัวในเบราว์เซอร์เพื่อให้ได้เอฟเฟกต์เฉพาะได้
คุณสมบัติส่วนตัวที่พบบ่อยที่สุด คือสำหรับเบราว์เซอร์ที่ใช้ Webkit (เช่น Safari) ซึ่งขึ้นต้นด้วย -webkit- และเบราว์เซอร์ที่ใช้ Gecko (เช่น Firefox) ซึ่งขึ้นต้นด้วย -moz- และ Konqueror (-khtml -) Opera (-o-) และ Internet Explorer (-ms-) ต่างก็มีส่วนขยายคุณสมบัติของตัวเอง (ปัจจุบันมีเพียง IE8 เท่านั้นที่รองรับคำนำหน้า -ms-)
ในฐานะนักออกแบบมืออาชีพ เราต้องตระหนักว่า การใช้คุณสมบัติส่วนตัวเหล่านี้จะทำให้สไตล์ชีตของเราไม่ผ่านการตรวจสอบความถูกต้อง ดังนั้นการนำพวกมันไปไว้ในเวอร์ชันสุดท้ายของสไตล์จึงเป็นสิ่งที่หาได้ยากในปัจจุบัน แต่ในบางกรณี เช่น การทดลองหรือการเรียนรู้ อย่างน้อยเราก็สามารถพิจารณาเขียนมันลงในสไตล์ชีตร่วมกับคุณสมบัติ CSS มาตรฐานได้
ตัวเลือก CSS เป็นเครื่องมือที่ทรงพลังอย่างไม่น่าเชื่อ โดยช่วยให้เรา ระบุองค์ประกอบ HTML ที่เฉพาะเจาะจงในแท็กได้ โดยไม่ต้องใช้คลาส รหัส หรือ JavaScript ที่ซ้ำซ้อน และส่วนใหญ่ไม่ได้ถูกเพิ่มเข้ามาใน CSS3 ใหม่ แต่ยังไม่ค่อยมีการใช้งานอย่างแพร่หลายเท่าที่ควร ตัวเลือกขั้นสูงมีประโยชน์มากหากคุณต้องการแท็กที่สะอาดตา น้ำหนักเบา และการแยกโครงสร้างและประสิทธิภาพที่ดีขึ้น พวกเขาสามารถลดจำนวนคลาสและ ID ในแท็ก และทำให้นักออกแบบดูแลรักษาสไตล์ชีตได้ง่ายขึ้น
มีการเพิ่มตัวเลือกแอตทริบิวต์ใหม่สามตัวใน CSS3:
[att^="value"][att$="value"][att*="value"]แอตทริบิวต์ค่า ขององค์ประกอบ
a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}
浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。
连字符
CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级节点的所有兄弟级别元素。
比如，给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点)，在样式表中定义下面的样式就足够了：
div~img {
border: 1px solid #ccc;
}
浏览器支持：所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6 ！
伪类
或许在CSS3中增加最多的就是新的伪类了，这里是一些最有趣和最有用的：
- :nth-child(n)
让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组，你可以简单的这样使用：
:nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/ - :nth-last-child(n)
与上个选择器的思想同样，但是从后面匹配元素（倒序），比如，为了指定一个div里面的最后两个段落，我们可以使用下面的选择器：
div p:nth-last-child(-n+2) - :last-child
匹配一个父节点下的最后一个子元素，等同于:nth-last-child(1) - :checked
匹配选择的元素，比如复选框 - :empty
匹配空元素（没有子元素）。 - :not(s)
匹配所有不符合指定声明(s)的元素。比如，如果你想让所有的没有使用”lead”类的段落的显示为黑色，可以这样写：
p:not([class*="lead"]) { color: black; }Andrea Gandino在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落，并将其的外间距(margin)设置为0:
#primary .text p:last-child { margin: 0; }浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类，Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled，但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。
伪元素
在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮（选中）的元素。
浏览器支持:目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。
扩展阅读