Chromium baru-baru ini menerapkan fitur baru dari HTML5: stylesheet cakupan, alias.
<style scoped>. Penulis web dapat membatasi aturan gaya agar hanya berlaku untuk bagian halaman dengan menetapkan atribut 'scoped' pada elemen <style> yang merupakan turunan langsung dari elemen root sub-pohon tempat Anda ingin gaya diterapkan. Hal ini membatasi gaya agar hanya memengaruhi elemen yang merupakan induk 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> merah, dan dalam <span> hijau:
div! span!
div! span!
div! 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 dibatasi sehingga diterapkan ke <div> yang melingkupi, yang merupakan induk elemen <style scoped> dan apa pun di dalam <div> tersebut. Kami menyebutnya 'cakupan' dan hasilnya terlihat seperti:
div! span!
div! span!
div! span!
Hal ini tentu saja dapat dilakukan di mana saja dalam markup. Jadi, jika Anda ingin bereksperimen, Anda dapat menyusun gaya cakupan dalam bagian markup cakupan lainnya sebanyak yang Anda inginkan untuk mendapatkan kontrol terperinci atas tempat gaya diterapkan.
Kasus penggunaan
Lalu, apa manfaatnya?
Kasus penggunaan yang umum adalah konten yang didistribusikan: saat Anda sebagai penulis web ingin menyertakan konten dari pihak ketiga, termasuk semua gayanya, tetapi tidak ingin mengambil risiko gaya tersebut “mencemari” bagian lain yang tidak terkait dari 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 mengedit konten eksternal secara langsung.
Jika Anda menggunakan sistem pengelolaan konten (CMS) yang mengirimkan cuplikan markup yang digabungkan menjadi tampilan halaman akhir, ini adalah fitur yang bagus untuk memastikan setiap cuplikan diberi gaya secara terpisah dari hal lain di halaman. Hal ini juga dapat berguna untuk wiki.
Jika Anda ingin menulis beberapa kode demo yang bagus di halaman, Anda dapat dengan mudah membatasi gaya hanya untuk konten demo. Hal ini memungkinkan Anda melakukan apa pun dengan CSS pada demo, tetapi tidak ada yang akan terpengaruh di halaman.
Kasus penggunaan lainnya adalah enkapsulasi: misalnya, jika halaman web Anda memiliki menu samping, sebaiknya masukkan gaya yang spesifik untuk menu tersebut ke bagian <style scoped> di bagian markup tersebut. Aturan gaya tersebut tidak akan berpengaruh saat merender bagian lain halaman, sehingga tetap terpisah dengan baik dari konten utama.
Mungkin salah satu kasus penggunaan yang paling menarik adalah untuk model komponen web. Komponen web akan menjadi cara yang bagus untuk membuat berbagai hal seperti penggeser, menu, pemilih tanggal, widget tab, dll. Dengan menyediakan gaya cakupan, desainer dapat membuat widget dan mengemasnya dengan gaya mereka sebagai unit mandiri yang dapat diambil dan digabungkan oleh orang lain ke dalam aplikasi web yang kaya. Kami berencana untuk menggunakan <style scoped> secara intensif dengan Komponen Web dan shadow DOM (yang sudah dapat diaktifkan dengan menetapkan tanda “shadow DOM” eksperimental di chrome://flags). Saat ini, tidak ada cara yang benar-benar baik untuk memastikan bahwa gaya dibatasi untuk Komponen Web tanpa menggunakan praktik buruk seperti gaya inline, sehingga gaya cakupan sangat cocok untuk hal ini.
Mengapa menyertakan elemen induk?
Cara yang paling alami adalah menyertakan elemen induk sehingga aturan <style scoped> dapat, misalnya, menetapkan warna latar belakang umum untuk seluruh cakupan. Hal ini juga memungkinkan style sheet cakupan ditulis secara “defensif” untuk browser yang belum mendukung <style scoped>, dengan menambahkan awalan aturan dengan ID atau pemilih class sebagai penggantian:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Hal ini meniru efek penggunaan gaya saat 'scoped' diterapkan, tetapi dengan beberapa penalti performa runtime karena pemilih yang lebih kompleks. Kelebihan pendekatan ini adalah memungkinkan pendekatan penggantian yang halus hingga saat <style scoped> didukung secara luas dan pemilih ID dapat dihapus.
Status
Mengingat penerapan sheet gaya cakupan masih baru, sheet gaya tersebut saat ini disembunyikan di balik tanda run-time di Chrome. Untuk mengaktifkannya, Anda harus mendapatkan versi Chrome yang memiliki nomor versi 19 atau yang lebih tinggi (saat ini Chrome Canary), lalu temukan entri 'Enable <style scoped>' di chrome://flags (di bagian akhir), klik 'Enable', lalu mulai ulang browser.
Saat ini tidak ada bug yang diketahui, tetapi @global dan versi terbatas @keyframes dan @-webkit-region masih dalam proses penerapan. Selain itu, @font-face diabaikan untuk saat ini karena ada kemungkinan besar spesifikasi akan berubah.
Kami ingin mendorong semua orang yang tertarik dengan fitur ini untuk mencobanya dan memberi tahu kami tentang pengalaman Anda: yang baik, yang buruk, dan (mungkin) yang bermasalah.