Apa yang Baru di CSS4?

CSS merupakan jembatan terbaik antara web designer dan developer, meski mungkin masih banyak masalah browser compatibility, tetapi mengetahui hal baru dari CSS adalah hal yang sangat menyenangkan :mrgreen:.

Nah, di saat saya belum khatam belajar CSS3, ini udah rilis aja CSS4. Ketinggalan banget ya?

Coba langsung kita tengok saja yuk apa yang baru di CSS4 ini ;).

Selectors $E > F

Sintaks selector yang memungkinkan untuk styling dari elemen parents ($ E) berdasarkan elemen anak nya (F).

[code language=”css”]/* style the LI element */
ul > $li > p { border: 1px solid #ccc; }
$ol > li:only-child {
list-style-type: none;
}[/code]

Pada source code ul di atas, yang akan terkena style adalah elemen li bukan elemen p, sedangkan pada ol akan melakukan styling pada elemen child li yang unik. Yang menarik di sini yaitu bagaimana nanti atau berapa sering developer akan menggunakan syntax $ (selector) :D.

Location Pseudo-Classes – :any-link and :local-link

Pseudo class bisa digunakan untuk elemen yang merupakan location based. Atribut any-link bisa digunakan untuk link general, sedangkan local-link bisa digunakan untuk link-link khusus.

[code language=”css”]/* To add an icon to all internal links within your sidebar */
#sidebar a:local-link {
background: url(internal.png) 0 0 no-repeat;
}

/*To add another icon to all <em>external</em> links*/

:not(:local-link) {
background: url(external.png) 0 0 no-repeat;
}[/code]

Ini merupakan penambahan yang sangat bagus, karena bisa lebih mempermudah dalam styling link.

Linguistic Pseudo-Class – :dir

Pseudo-class dir digunakan untuk mengidentifikasi display text, dari kiri ke kanan atau sebaliknya.

[code language=”css”]
p:dir(ltr) { /* left to right */
}
div:dir(rtl) { /* right to left */
}
[/code]

Ini juga penambahan yang sangat bagus, terutama jika kita sedang membangun web dengan multi bahasa.

Reference Combinators

Mengenalkan karakter slash (/) yang memetakan hubungan antara compound selector.

[code language=”css”]

label:matches(:hover, :focus) /for/ input {
box-shadow: #fffea1 0 0 8px
}
[/code]

Contoh di atas melakukan highlight elemen INPUT ketika LABEL nya difokuskan atau hover; asosiasi ini dibuat oleh atribut for dari label.

Untuk informasi yang lebih lengkap, bisa mengunjungi link di bawah ini :

• http://davidwalsh.name/css4-preview
• http://www.w3.org/TR/2011/WD-selectors4-20110929/
• http://www.webmonkey.com/2011/10/discover-whats-new-in-css-4/
• http://www.inserthtml.com/2012/01/css4-selectors/
• http://www.red-team-design.com/meet-the-css4-selectors