Banyak situs memiliki banyak halaman, tapi semua halaman yang biasanya bergaya dengan hanya satu stylesheet. Melayani hanya satu stylesheet adalah praktik yang baik untuk meminimalkan permintaan HTTP memungkinkan halaman untuk memuat lebih cepat pada browser.
Namun, akan ada banyak gaya-aturan yang terkandung dalam stylesheet yang tidak diperlukan untuk beberapa halaman. Jadi tidak akan lebih bagus lagi jika kita bisa menerapkan satu set gaya-aturan hanya untuk halaman tertentusambil tetap ke satu stylesheet?
Ide ini akan dimungkinkan dengan standar baru diusulkan CSS At-aturan yang disebut @document . Aturan ini awalnya diusulkan sebagai bagian dari CSS3namun karena beberapa masalah, itu ditunda dan kemungkinan akan dimasukkan dalam CSS Level 4.
Mari kita lihat cara kerjanya.
Penggunaan dasar
@document memungkinkan kita untuk menunjuk gaya-aturan untuk hanya halaman tertentu. Seperti yang tercantum dalam Proposal , itu terutama dirancang untuk pengguna Stylesheet. Jadi, pengguna dapat melakukan hal berikut untuk menyesuaikan (favorit) mereka website:
| 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
domain @document ( “facebook.com” ) {
body { background-color : yellow; } a { color : red ; } img { border-radius: 100% ; } } domain @document ( “twitter.com” ) { body { background-color : red ; } a { color : pink; } } |
Anda dapat mengunjungi UserStyles.org untuk beberapa contoh besar dari stylesheet pengguna.
Kami, sebagai penulis web, juga dapat memanfaatkan @document untuk mengontrol gaya di website kami. Katakanlah kita ingin kami gaya-aturan yang harus diterapkan pada halaman tertentu di website kami. Untuk melakukan itu, kita dapat merangkum gaya-aturan dengan @document seperti:
| 1
2 3 4 5 6 7 8 9 10 11 12 |
@document url ( ” http://www.tncmediaweb.com/blog/about-us/ ” ) {
h1 { font-size : 50em ; color : green ; } p { color : red ; } a { Warna : blue ; } } |
Perbedaan antara domain () (dari contoh pertama) dan url () adalah bahwadomain () akan mempengaruhi semua halaman yang di-host di domain tertentu, sedangkan url () hanya akan menerapkan gaya-aturan untuk URL tertentu; URL lain (atau halaman) dengan demikian tidak terpengaruh.
Anda dapat menggunakan url-prefix () untuk menunjuk gaya-aturan untuk URL yang dimulai dengan, misalnya, css .
| 1
2 3 4 5 6 7 8 9 |
@document url-prefix ( ” http://www.tncmediaweb.com/blog/category/ ” ) {
h2 { font-family : “Georgia” ; } div { background-color : blue ; Warna : #fff ; } } |
Menggunakan regexp () fungsi, kita bisa pergi lebih mendalam dengan Regular Expression (Regex). Contoh berikut ini berasal dari W3C, dan Regex cocok dengan URL yang diawali dengan http://www.w3.org/TR/ , diikuti oleh 4 digit angka dan berakhir dengan 8 angka numerik.
| 1
2 3 4 5 |
@document regexp ( ” http://www.w3.org/TR/ \\ d {4} / [^ /] * – CSS2 – \\ d {8} /” ) {
body { transform: rotate ( 90 deg); } } |
Kesimpulan
Baiklah, kita telah melihat beberapa kemungkinan penggunaan dari @documentaturan. Tapi seperti yang disebutkan, itu adalah saat ditahan untuk CSS4, dan Firefox adalah browser hanya yang telah menerapkan hal itu dengan @ -moz-document prefix. Meskipun demikian, kami akan menjaga tab pada pengembangan @document aturan, dan lihat bagaimana kelanjutannya di masa depan.
