Selami Aturan Dokumen CSS (@document): Terapkan gaya spesifik ke dokumen web bertarget, tingkatkan UX, dan optimalkan kinerja situs. Panduan komprehensif untuk developer.
Menguasai Aturan Dokumen CSS: Menyesuaikan Gaya untuk Dokumen Spesifik
Dalam lanskap pengembangan web yang terus berkembang, CSS terus menyediakan alat yang ampuh untuk mengontrol presentasi konten web. Salah satu alat tersebut, yang sering diabaikan namun sangat berguna, adalah Aturan Dokumen CSS, yang dilambangkan dengan @document
. Aturan ini memungkinkan Anda untuk menerapkan gaya spesifik ke dokumen yang cocok dengan kriteria tertentu, membuka kemungkinan untuk penataan gaya yang ditargetkan dan pengalaman pengguna yang lebih baik.
Apa Itu Aturan Dokumen CSS?
Aturan @document
, bagian dari Modul Aturan Kondisional CSS Level 3, memungkinkan Anda mendefinisikan aturan CSS yang hanya berlaku untuk dokumen spesifik berdasarkan URL atau karakteristik URL-nya. Berbeda dengan kueri media, yang menargetkan perangkat atau ukuran layar yang berbeda, aturan @document
menargetkan halaman web spesifik atau kumpulan halaman. Ini sangat berharga ketika Anda perlu menerapkan gaya unik ke halaman yang dihosting di domain berbeda, subdomain spesifik, atau bahkan file individual di dalam situs web.
Anggaplah ini sebagai selektor yang sangat terspesialisasi yang beroperasi pada tingkat dokumen, memberi Anda kontrol granular atas tampilan konten web Anda. Ini adalah alat yang ampuh untuk menciptakan pengalaman merek di berbagai situs, menangani konten lama, dan bahkan menguji desain baru pada bagian-bagian tertentu dari situs web sebelum meluncurkannya secara global.
Sintaks Aturan @document
Sintaks dasar aturan @document
adalah sebagai berikut:
@document <match-function> {
/* Aturan CSS */
}
Berikut adalah rincian komponennya:
@document
: Kata kunci ini memulai aturan dokumen.<match-function>
: Ini menentukan kriteria yang harus dipenuhi oleh URL dokumen agar gaya dapat diterapkan. Beberapa fungsi pencocokan tersedia, seperti yang akan kita jelajahi di bawah ini.{ /* Aturan CSS */ }
: Blok ini berisi aturan CSS yang akan diterapkan jika URL dokumen cocok dengan kriteria yang ditentukan. Aturan-aturan ini mengikuti sintaks CSS standar.
Fungsi Pencocokan: Mendefinisikan Dokumen Target
Inti dari aturan @document
terletak pada fungsi pencocokannya. Fungsi-fungsi ini mendefinisikan kondisi yang harus dipenuhi oleh URL dokumen agar aturan CSS terkait dapat diterapkan. Mari kita periksa fungsi pencocokan umum:
1. url()
Fungsi url()
mencocokkan dokumen yang URL-nya persis sama dengan URL yang ditentukan. Ini adalah metode pencocokan yang paling presisi.
@document url("https://www.example.com/specific-page.html") {
body {
background-color: #f0f0f0;
}
}
Dalam contoh ini, background-color
hanya akan diterapkan ke body
dokumen yang terletak di https://www.example.com/specific-page.html
.
2. url-prefix()
Fungsi url-prefix()
mencocokkan dokumen apa pun yang URL-nya dimulai dengan prefiks yang ditentukan. Ini berguna untuk menerapkan gaya ke seluruh direktori atau subdomain.
@document url-prefix("https://www.example.com/blog/") {
h1 {
color: #007bff;
}
}
Di sini, semua halaman dalam direktori /blog/
di www.example.com
akan memiliki elemen h1
mereka yang ditata dengan warna #007bff
.
3. domain()
Fungsi domain()
mencocokkan dokumen apa pun yang domainnya sama dengan domain yang ditentukan. Ini berguna untuk menerapkan gaya di seluruh domain.
@document domain("example.com") {
a {
font-weight: bold;
}
}
Dalam kasus ini, semua tautan (elemen a
) di halaman mana pun dalam domain example.com
akan memiliki font-weight
bold
.
4. regexp()
Fungsi regexp()
memungkinkan Anda menggunakan ekspresi reguler untuk mencocokkan URL. Ini memberikan kemampuan pencocokan yang paling fleksibel dan kuat.
@document regexp("https://.*\\.example\\.com/.*\\.pdf") {
body {
margin: 20px;
}
}
Contoh ini menerapkan margin
sebesar 20px
ke body
dokumen PDF apa pun yang dihosting di subdomain example.com
. Perhatikan escaping karakter khusus dalam ekspresi reguler.
Aplikasi Praktis Aturan @document
Aturan @document
dapat diterapkan dalam berbagai skenario untuk meningkatkan pengalaman pengguna dan menyederhanakan pemeliharaan situs web. Berikut adalah beberapa contoh praktis:
1. Konsistensi Merek di Berbagai Situs Web
Bayangkan perusahaan Anda memiliki beberapa situs web, masing-masing dengan tujuan spesifiknya sendiri. Anda dapat menggunakan aturan @document
untuk memastikan pengalaman merek yang konsisten di semua situs tersebut.
/* Gaya merek umum */
@document domain("example.com"), domain("example.net"), domain("example.org") {
body {
font-family: Arial, sans-serif;
color: #333;
}
.logo {
background-image: url("https://www.example.com/images/logo.png");
}
}
Cuplikan kode ini menerapkan font family, warna teks, dan logo yang sama ke semua situs web yang dihosting di domain example.com
, example.net
, dan example.org
. Ini memastikan identitas merek yang terpadu terlepas dari situs web spesifik yang dikunjungi pengguna.
2. Penataan Gaya Konten Lama
Banyak situs web memiliki konten lama yang tidak sesuai dengan standar desain saat ini. Aturan @document
dapat digunakan untuk menerapkan gaya spesifik ke halaman-halaman lama ini tanpa memengaruhi bagian lain dari situs web.
/* Penataan gaya untuk konten lama */
@document url-prefix("https://www.example.com/legacy/") {
.old-table {
border: 1px solid #ccc;
width: 100%;
}
}
Contoh ini menerapkan batas dan lebar ke tabel dengan kelas .old-table
di dalam direktori /legacy/
, meningkatkan tampilannya tanpa memerlukan modifikasi pada HTML asli.
3. Pengujian A/B
Saat melakukan pengujian A/B, Anda mungkin ingin menerapkan gaya yang berbeda ke halaman atau bagian situs web tertentu untuk sebagian kecil pengguna. Aturan @document
dapat digunakan untuk menargetkan halaman-halaman pengujian ini.
/* Gaya pengujian A/B */
@document url("https://www.example.com/landing-page-test.html") {
.cta-button {
background-color: #28a745; /* Tombol hijau */
color: white;
}
}
/* Gaya asli (disajikan ke sebagian besar pengguna) */
.cta-button {
background-color: #007bff; /* Tombol biru */
color: white;
}
Dalam skenario ini, pengunjung https://www.example.com/landing-page-test.html
akan melihat tombol ajakan bertindak berwarna hijau, sementara pengguna lain akan melihat tombol biru standar. Ini memungkinkan Anda melacak tombol mana yang berkinerja lebih baik tanpa memengaruhi seluruh situs web.
4. Penataan Gaya Situs Web Eksternal dalam Iframe
Jika Anda menyematkan konten dari situs web lain menggunakan iframe, Anda mungkin ingin menerapkan beberapa penataan gaya dasar agar sesuai dengan desain situs Anda. Aturan @document
dapat membantu dengan ini, meskipun efektivitasnya tergantung pada asal iframe dan Kebijakan Keamanan Konten (CSP) situs yang disematkan.
/* Menata gaya konten dalam iframe dari domain lain */
@document domain("another-example.com") {
body {
font-size: 14px;
}
}
Ini akan mencoba mengubah ukuran font konten yang dimuat dari another-example.com
dalam iframe. Perhatikan bahwa ini tunduk pada kebijakan same-origin dan batasan CSP. Jika another-example.com
memiliki CSP yang ketat, gaya ini mungkin tidak diterapkan.
5. Menyesuaikan Gaya untuk Sistem Manajemen Konten (CMS) Spesifik
Platform CMS yang berbeda sering kali menghasilkan struktur HTML yang berbeda atau menyertakan kelas CSS spesifik. Anda dapat menggunakan @document
yang dikombinasikan dengan url-prefix
untuk menargetkan halaman yang dihasilkan oleh CMS tertentu dan menerapkan penyesuaian gaya spesifik.
/* Menargetkan halaman yang dihasilkan oleh CMS tertentu */
@document url-prefix("https://www.example.com/cms-generated-pages/") {
.cms-content p {
line-height: 1.6;
}
}
Contoh ini meningkatkan tinggi baris paragraf dalam kelas .cms-content
pada halaman yang terletak di bawah direktori /cms-generated-pages/
, yang diasumsikan dihasilkan oleh CMS tertentu. Ini memungkinkan penyempurnaan presentasi konten yang dihasilkan oleh CMS tersebut.
Menggabungkan @document dengan Teknik CSS Lain
Aturan @document
dapat digunakan secara efektif bersama dengan teknik CSS lainnya untuk menciptakan solusi penataan gaya yang lebih canggih dan mudah beradaptasi.
1. Menggunakan @document dengan Kueri Media
Anda dapat menggabungkan @document
dengan kueri media untuk menerapkan gaya yang berbeda berdasarkan URL dokumen dan ukuran perangkat atau layar.
@document domain("example.com") {
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
}
Contoh ini mengurangi ukuran font pada perangkat dengan lebar layar 768px atau kurang untuk semua halaman dalam domain example.com
.
2. Memanfaatkan Variabel CSS (Properti Kustom)
Variabel CSS memungkinkan Anda mendefinisikan nilai yang dapat digunakan kembali dan mudah diperbarui. Anda dapat menggunakan @document
untuk mengatur nilai variabel CSS yang berbeda untuk dokumen spesifik.
/* Mengatur variabel CSS untuk subdomain tertentu */
@document url-prefix("https://blog.example.com/") {
:root {
--primary-color: #ff6600; /* Oranye */
--secondary-color: #333;
}
}
/* Menggunakan variabel dalam gaya lain */
body {
background-color: var(--primary-color);
color: var(--secondary-color);
}
Dalam contoh ini, warna primer dan sekunder diatur menjadi oranye dan abu-abu gelap, secara berurutan, untuk semua halaman di subdomain blog.example.com
. Variabel-variabel ini kemudian digunakan untuk menata gaya latar belakang dan warna teks body. Pendekatan ini meningkatkan kemampuan pemeliharaan dan memungkinkan penyesuaian gaya yang mudah di berbagai bagian situs web.
3. Menggunakan !important dengan @document
Meskipun umumnya tidak disarankan, penggunaan !important
dalam aturan @document
dapat diperlukan dalam situasi tertentu untuk menimpa gaya yang didefinisikan di tempat lain dalam CSS Anda. Namun, gunakan ini dengan hati-hati untuk menghindari masalah spesifisitas.
@document url("https://www.example.com/special-page.html") {
.override-style {
color: red !important;
}
}
Ini akan secara paksa mengatur warna teks elemen dengan kelas .override-style
menjadi merah di halaman yang ditentukan, terlepas dari deklarasi gaya lainnya. Gunakan ini secukupnya dan hanya jika benar-benar diperlukan.
Kompatibilitas Peramban
Aturan @document
memiliki dukungan yang baik di peramban modern. Namun, peramban lama mungkin tidak mendukungnya. Selalu periksa informasi kompatibilitas peramban terbaru di sumber daya seperti Can I use sebelum mengimplementasikannya dalam proyek Anda. Jika Anda perlu mendukung peramban lama, pertimbangkan untuk menggunakan teknik alternatif seperti skrip sisi server atau JavaScript untuk menerapkan gaya spesifik berdasarkan URL dokumen.
Praktik Terbaik dalam Menggunakan @document
Untuk memastikan penggunaan aturan @document
Anda efektif dan dapat dipelihara, pertimbangkan praktik terbaik berikut:
- Spesifisitas: Perhatikan spesifisitas CSS. Gaya yang ditentukan dalam aturan
@document
dapat ditimpa oleh selektor yang lebih spesifik yang ditentukan di tempat lain. - Pemeliharaan: Gunakan komentar yang jelas dan deskriptif untuk menjelaskan tujuan setiap aturan
@document
. Ini akan membantu Anda dan pengembang lain memahami dan memelihara kode di masa mendatang. - Organisasi: Kelompokkan aturan
@document
yang terkait bersama-sama dalam file CSS Anda untuk meningkatkan keterbacaan dan organisasi. - Pengujian: Uji aturan
@document
Anda secara menyeluruh untuk memastikan aturan tersebut diterapkan dengan benar ke dokumen yang dituju. - Hindari Penggunaan Berlebihan: Jangan terlalu sering menggunakan aturan
@document
. Jika memungkinkan, gunakan selektor dan teknik CSS yang lebih tradisional untuk mencapai penataan gaya yang diinginkan. Aturan@document
paling efektif ketika Anda perlu menargetkan dokumen atau kumpulan dokumen yang sangat spesifik. - Performa: Meskipun dampak performa umumnya dapat diabaikan, penggunaan berlebihan fungsi
regexp()
yang kompleks berpotensi memengaruhi performa rendering. Optimalkan ekspresi reguler Anda untuk efisiensi.
Alternatif untuk Aturan @document
Meskipun aturan @document
adalah alat yang ampuh, ada pendekatan alternatif yang dapat Anda gunakan untuk mencapai hasil serupa, terutama ketika berhadapan dengan peramban lama atau skenario kompleks.
1. Skrip Sisi Server
Menggunakan bahasa skrip sisi server seperti PHP, Python, atau Node.js, Anda dapat mendeteksi URL yang diminta dan menyajikan file CSS atau gaya inline yang berbeda berdasarkan URL. Pendekatan ini memberikan fleksibilitas maksimum tetapi memerlukan perubahan kode sisi server.
2. JavaScript
Anda dapat menggunakan JavaScript untuk mendeteksi URL saat ini dan menerapkan kelas CSS atau gaya secara dinamis ke dokumen. Pendekatan ini menawarkan fleksibilitas yang baik dan dapat diimplementasikan sepenuhnya di sisi klien, tetapi memerlukan eksekusi JavaScript.
3. Preprosesor CSS (Sass, Less)
Preprosesor CSS seperti Sass dan Less memungkinkan Anda menggunakan variabel dan pernyataan kondisional untuk menghasilkan aturan CSS yang berbeda berdasarkan kondisi tertentu. Meskipun mereka tidak secara langsung mendukung pencocokan berbasis dokumen, Anda dapat menggunakannya bersama dengan skrip sisi server atau JavaScript untuk mencapai hasil serupa.
Kesimpulan
Aturan @document
adalah alat yang berharga bagi pengembang web yang mencari kontrol presisi atas penataan gaya dokumen web tertentu. Dengan memahami sintaksnya, fungsi pencocokannya, dan aplikasi praktisnya, Anda dapat memanfaatkannya untuk menciptakan pengalaman merek, menata gaya konten lama, melakukan pengujian A/B, dan menyesuaikan gaya untuk berbagai platform CMS. Meskipun kompatibilitas peramban harus dipertimbangkan, dan pendekatan alternatif tersedia, aturan @document
tetap menjadi cara yang ampuh dan efisien untuk menyesuaikan CSS Anda dengan kebutuhan unik proyek web Anda. Ingatlah untuk mematuhi praktik terbaik untuk memastikan kemampuan pemeliharaan, organisasi, dan performa optimal. Jelajahi kemungkinannya dan buka tingkat kontrol baru atas presentasi situs web Anda. Ini adalah alat yang ampuh dalam perangkat pengembang web mana pun ketika digunakan dengan benar dan tepat.