Fitur eksperimental baru - stylesheet cakupan

Alex Danilo

Chromium baru-baru ini menerapkan fitur baru dari HTML5: stylesheet terbatas. <style scoped>. Penulis web dapat membatasi aturan gaya agar hanya diterapkan pada bagian halaman dengan menetapkan atribut 'cakupan' pada elemen <style> yang merupakan turunan langsung dari elemen root subhierarki tempat Anda ingin menerapkan gaya. Hal ini akan membatasi gaya agar hanya memengaruhi elemen yang merupakan induk dari elemen <style> dan semua turunannya.

Contoh

Berikut adalah dokumen sederhana yang menggunakan gaya visual standar:

<html>
<body>
    <div>a div! <span>a span!</span></div>
    <div>
        <style>
        div { color: red; }
        span { color: green; }
        </style>
        a div! <span>a span!</span></div>
    <div>a div! <span>a span!</span></div>
</body>
</html>

Aturan gaya yang ditentukan akan mewarnai teks dalam <div> menjadi merah, dan dalam <span> menjadi hijau:

div! sebuah span!
sebuah div! sebuah span!
sebuah div! sebuah span!

Namun, jika kita menetapkan scoped pada elemen <style>:

<html>
<body>
    <div>a div! <span>a span!</span></div>
    <div>
        <style scoped>
        div { color: red; }
        span { color: green; }
        </style>
        a div! <span>a span!</span></div>
    <div>a div! <span>a span!</span></div>
</body>
</html>

kemudian, aturan gaya akan membatasi aturan gaya sehingga dapat diterapkan ke <div> yang mencakupnya yang merupakan induk dari elemen <style scoped> dan semua yang ada di dalam <div> tersebut. Kita menyebutnya 'cakupan' dan hasilnya terlihat seperti:

div! div!
div! sebuah span!
div! a div!

Hal ini tentu saja dapat dilakukan di mana saja di dalam markup. Jadi, jika Anda ingin mencoba hal baru, Anda dapat menggabungkan gaya bercakupan dalam bagian cakupan lain pada markup sebanyak yang Anda inginkan untuk mendapatkan kontrol mendetail mengenai tempat penerapan gaya.

Kasus penggunaan

Sekarang, apa manfaatnya?

Kasus penggunaan yang umum adalah konten bersindikasi: saat Anda sebagai penulis web ingin menyertakan konten dari pihak ketiga, termasuk semua gayanya, namun tidak ingin mengambil risiko gaya tersebut "menimbulkan polusi" lainnya yang tidak terkait pada halaman. Keuntungan besar di sini adalah kemampuan untuk menggabungkan konten dari situs lain seperti yelp, twitter, eBay, dll. ke dalam satu halaman tanpa perlu mengisolasinya menggunakan <iframe> atau dengan cepat mengedit konten eksternal.

Jika Anda menggunakan sistem pengelolaan konten (CMS) yang mengirimi Anda cuplikan markup yang semuanya digabungkan menjadi tampilan halaman akhir, ini adalah fitur yang hebat untuk memastikan setiap cuplikan ditata secara terpisah dari elemen lain di halaman tersebut. Hal ini bisa sama berguna untuk wiki.

Jika ingin menulis beberapa kode demo yang bagus di halaman, Anda dapat dengan mudah membatasi gaya hanya ke konten demo. Dengan demikian, Anda dapat berkreasi dengan CSS di demo, tetapi tidak ada hal lain di halaman yang akan terpengaruh.

Kasus penggunaan lainnya hanyalah enkapsulasi: misalnya, jika halaman web Anda memiliki menu samping, sebaiknya tempatkan gaya yang spesifik untuk menu tersebut ke dalam bagian <style scoped> di bagian markup tersebut. Aturan gaya tersebut tidak akan berpengaruh saat merender bagian lain dari laman, yang membuat mereka tetap terpisah dari konten utama dengan baik!

Mungkin salah satu kasus penggunaan yang paling menarik adalah untuk model komponen web. Komponen web akan menjadi cara yang bagus untuk membangun hal-hal seperti penggeser, menu, pemilih tanggal, widget tab, dll. Dengan menyediakan gaya cakupan, desainer dapat membangun widget dan mengemasnya dengan gaya mereka sebagai unit mandiri yang dapat diambil orang lain dan digabungkan ke dalam aplikasi web kaya. Kami berencana untuk sering menggunakan <style scoped> dengan Komponen Web dan shadow DOM (yang dapat diaktifkan dengan menyetel tanda “shadow DOM” eksperimental di chrome://flags). Saat ini, tidak ada cara yang benar-benar tepat untuk memastikan bahwa gaya dibatasi pada Komponen Web tanpa melakukan praktik buruk seperti gaya visual inline, sehingga gaya cakupan sangat cocok untuk hal ini.

Mengapa menyertakan elemen induk?

Cara yang paling alami adalah dengan menyertakan elemen induk sehingga aturan <style scoped> dapat, misalnya, menetapkan warna latar belakang umum untuk seluruh cakupan. Hal ini juga memungkinkan sheet gaya tercakup ditulis "defensif" untuk browser yang belum mendukung <style scoped>, dengan memberi awalan pada aturan dengan ID atau pemilih class sebagai pengganti:

<div id="menu">
    <style scoped>
    #menu .main { … }
    #menu .sub { … }
    …

Hal ini meniru efek penggunaan gaya saat 'cakupan' diterapkan, tetapi dengan beberapa penalti performa waktu proses karena pemilih yang lebih kompleks. Hal yang menyenangkan dari pendekatan ini adalah pendekatan ini memungkinkan pendekatan penggantian yang halus hingga hari ketika <style scoped> didukung secara luas dan pemilih ID dapat dihapus.

Status

Mengingat implementasinya masih baru, style sheet saat ini disembunyikan di balik tanda run-time di Chrome. Untuk mengaktifkannya, Anda harus mendapatkan versi Chrome yang memiliki nomor versi 19 atau lebih tinggi (Chrome Canary saat ini), lalu cari entri 'Enable <style scoped>' di chrome://flags (ke akhir), klik 'Aktifkan', lalu mulai ulang browser.

Saat ini tidak ada bug yang diketahui, tetapi @global serta versi cakupan @keyframes dan @-webkit-region dan masih dalam proses diimplementasikan. Selain itu, @font-face akan diabaikan untuk sementara waktu karena ada kemungkinan spesifikasi akan berubah.

Kami ingin mendorong semua orang yang tertarik dengan fitur ini untuk mencobanya dan memberi tahu kami tentang pengalaman Anda: baik, buruk, dan (mungkin) bug-nya.