Meskipun banyak fitur baru CSS3 yang tidak didukung oleh banyak browser, atau tidak didukung dengan baik. Namun sebagai pengembang front-end, Anda tidak bisa menunggu sampai semua browser mendukungnya sepenuhnya sebelum mempelajarinya.
Fitur baru apa yang dihadirkan CSS3 kepada kita? Sederhananya, CSS3 dapat mencapai banyak efek yang sebelumnya memerlukan penggunaan gambar dan skrip hanya dalam beberapa baris kode. Seperti sudut membulat, batas gambar, bayangan teks dan bayangan kotak, dll. CSS3 tidak hanya menyederhanakan proses desain untuk pengembang front-end, tetapi juga mempercepat pemuatan halaman.
Pada artikel ini, mari kita lihat secara komprehensif berbagai fitur baru CSS3.
Untuk menggunakan sebagian besar fitur CSS3, kita harus menggunakan ekstensi khusus pabrikan bersama dengan properti aslinya. Pasalnya hingga saat ini sebagian besar browser hanya mendukung beberapa properti CSS3 saja. Dan sayangnya, beberapa properti bahkan mungkin tidak direkomendasikan oleh W3C, jadi penting untuk membedakannya dari properti standar dengan menentukan properti khusus browser (dan kemudian menggunakan properti yang sesuai standar jika gayanya berlebihan akan menimpanya).
Tentu saja, kelemahan dari pendekatan ini adalah akan menghasilkan style sheet yang berantakan dan kinerja situs antar browser yang tidak konsisten. Lagi pula, kami tidak ingin memperkenalkan kembali perlunya peretasan browser pribadi di stylesheet kami. Marquee, Blink, dan tag lainnya yang terkenal di Internet Explorer digunakan di banyak style sheet dan menjadi legenda di tahun 1990-an; tag tersebut masih membuat banyak situs web yang ada (di browser lain) tidak konsisten atau bahkan sulit dibaca. Dan kita tidak ingin menempatkan diri kita dalam situasi yang sama sekarang, bukan?
Namun, sebuah situs web tidak harus terlihat sama persis di semua browser. Terkadang dimungkinkan untuk menggunakan properti pribadi di browser untuk mencapai efek tertentu.
Properti pribadi yang paling umum adalah untuk browser berbasis Webkit (misalnya, Safari), yang dimulai dengan -webkit-, dan browser berbasis Gecko (misalnya, Firefox), yang dimulai dengan -moz-, dan Konqueror (-khtml -), Opera (-o-) dan Internet Explorer (-ms-) semuanya memiliki ekstensi propertinya sendiri (saat ini hanya IE8 yang mendukung awalan -ms-)
Sebagai desainer profesional, kita harus menyadari bahwa menggunakan properti pribadi ini akan membuat style sheet kita gagal lolos validasi . Jadi memasukkannya ke dalam versi final dari gaya tersebut saat ini jarang terjadi. Namun dalam beberapa kasus, seperti eksperimen atau pembelajaran, setidaknya kita dapat mempertimbangkan untuk menuliskannya ke dalam style sheet bersama dengan properti CSS standar.
Pemilih CSS adalah alat yang sangat hebat: alat ini memungkinkan kita menentukan elemen HTML tertentu dalam tag tanpa harus menggunakan kelas, ID, atau JavaScript yang berlebihan. Dan kebanyakan dari mereka bukan merupakan hal baru yang ditambahkan ke CSS3, namun belum banyak digunakan sebagaimana mestinya. Penyeleksi tingkat lanjut sangat berguna jika Anda mencoba mendapatkan tag yang bersih dan ringan serta pemisahan struktur dan kinerja yang lebih baik. Mereka dapat mengurangi jumlah kelas dan ID dalam tag dan memudahkan desainer untuk memelihara style sheet.
Tiga pemilih atribut baru ditambahkan ke CSS3:
[att^="value"]
Mencocokkan elemen yang berisi atribut yang dimulai dengan nilai tertentu
[att$="value"]
Mencocokkan elemen yang berisi atribut yang diakhiri dengan nilai tertentu
[att*="value"]
Mencocokkan elemen yang berisi atribut dengan nilai tertentu
atribut nilai elemen
a[judul$="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 均支持。