Chromium baru-baru ini menerapkan fitur baru dari HTML5: stylesheet cakupan, alias
<style scoped>. Penulis web dapat membatasi aturan gaya agar hanya diterapkan pada sebagian halaman dengan menetapkan atribut ‘cakupan’ pada elemen <style> yang merupakan turunan langsung dari elemen root subhierarki yang ingin Anda terapkan gayanya. Hal ini 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> merah, dan di dalam <span> berwarna hijau:
div! satu span!
satu div! satu span!
satu div! satu rentang!
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 elemen tersebut membatasi aturan gaya sehingga diterapkan ke <div> yang mencakup, yang merupakan induk dari elemen <style scoped> dan apa pun di dalam <div> tersebut. Kita menyebutnya 'cakupan' dan hasilnya akan terlihat seperti:
seorang div! a span!
div! span!
div! rentang waktu!
Ini tentu saja dapat dilakukan di mana saja dalam markup. Jadi, jika ingin berjiwa petualang, Anda dapat menyusun bertingkat gaya cakupan dalam bagian cakupan lain dari markup sebanyak yang Anda inginkan untuk mendapatkan kontrol terperinci tentang tempat gaya diterapkan.
Kasus penggunaan
Apa manfaatnya?
Kasus penggunaan yang umum adalah konten bersindikasi: saat Anda sebagai penulis web ingin memasukkan 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 pengeditan konten eksternal dengan cepat.
Jika Anda menggunakan sistem pengelolaan konten (CMS) yang mengirimkan cuplikan markup yang semuanya digabungkan menjadi tampilan halaman akhir, ini adalah fitur yang tepat untuk memastikan setiap cuplikan diberi gaya secara terpisah dari elemen lainnya di halaman tersebut. Ini juga bisa berguna untuk wiki.
Jika ingin menulis beberapa kode demo yang bagus di halaman, Anda dapat membatasi gaya hanya pada konten demo. Cara ini memungkinkan Anda menggunakan CSS di demo, tetapi hal lain di halaman tidak akan terpengaruh.
Kasus penggunaan lainnya adalah enkapsulasi: misalnya, jika halaman web Anda memiliki menu samping, sebaiknya tempatkan gaya yang khusus untuk menu tersebut ke bagian <style scoped> di bagian markup tersebut. Aturan gaya tersebut tidak akan berpengaruh saat merender bagian lain halaman, yang memisahkannya 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, seorang desainer dapat membuat widget dan mengemasnya dengan gayanya sebagai unit mandiri yang dapat diambil dan digabungkan orang lain ke dalam sebuah aplikasi web lengkap. Kami berencana akan banyak menggunakan <style scoped> dengan Komponen Web dan shadow DOM (yang sudah dapat diaktifkan dengan menyetel flag “shadow DOM” eksperimental di chrome://flags). Saat ini tidak ada cara yang benar-benar bagus untuk memastikan bahwa gaya terbatas pada Komponen Web tanpa menggunakan praktik buruk seperti gaya visual inline, sehingga gaya cakupan adalah pilihan yang tepat 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 lembar gaya cakupan ditulis secara “defensif” untuk browser yang belum mendukung <style scoped>, dengan memberi awalan pada aturan menggunakan pemilih class atau ID sebagai penggantian:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Hal ini meniru efek penggunaan gaya saat 'cakupan' diimplementasikan, tetapi dengan beberapa penalti performa runtime karena pemilih yang lebih kompleks. Keuntungan pendekatan ini adalah memungkinkan pendekatan fallback yang halus sampai hari ketika <style scoped> didukung secara luas dan pemilih ID dapat dihapus dengan mudah.
Status
Mengingat implementasi style sheet cakupan masih baru, saat ini gaya sheet tersebut disembunyikan di balik flag run-time di Chrome. Untuk mengaktifkannya, Anda perlu mendapatkan versi Chrome yang memiliki nomor versi 19 atau lebih tinggi (saat ini Chrome Canary), lalu cari 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 serta versi cakupan @keyframes dan @-webkit-region dan masih dalam proses penerapan. Selain itu, @font-face diabaikan untuk sementara waktu karena ada kemungkinan besar bahwa 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) ada bug.