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).

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

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.

/* 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;
}

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.

p:dir(ltr) { /* left to right */
}
div:dir(rtl) { /* right to left */
}

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.


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

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 :

About these ads

One thought on “Apa yang Baru di CSS4?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s