CSS Document Rule (@document) qoidasiga chuqur kirish. Veb-dasturchilarga maqsadli hujjatlarga maxsus stilelarni qo‘llash imkonini beradi, foydalanuvchi tajribasini yaxshilaydi va veb-sayt ish faoliyatini optimallashtiradi.
CSS Document Qoidasini O'zlashtirish: Muayyan Hujjatlar uchun Stilelarni Moslashtirish
Doimiy rivojlanib borayotgan veb-dasturlash sohasida CSS veb-kontent taqdimotini boshqarish uchun kuchli vositalarni taqdim etishda davom etmoqda. Shunday vositalardan biri, ko'pincha e'tibordan chetda qoladigan, lekin nihoyatda foydali bo'lgan CSS Document Qoidasi bo'lib, u @document bilan belgilanadi. Bu qoida sizga ma'lum mezonlarga mos keladigan hujjatlarga maxsus stilelarni qo'llash imkonini beradi, bu esa maqsadli stillash va foydalanuvchi tajribasini yaxshilash imkoniyatlarini ochadi.
CSS Document Qoidasi nima?
@document qoidasi, CSS Shartli Qoidalar Modulining 3-darajasi tarkibiga kirib, sizga faqatgina URL yoki URL xususiyatlariga asoslangan ma'lum hujjatlarga qo'llaniladigan CSS qoidalarini aniqlash imkonini beradi. Turli qurilmalar yoki ekran o'lchamlariga mo'ljallangan media so'rovlaridan farqli o'laroq, @document qoidasi muayyan veb-sahifalar yoki sahifalar to'plamini nishonga oladi. Bu, ayniqsa, turli domenlarda joylashgan sahifalarga, maxsus subdomenlarga yoki hatto veb-sayt ichidagi alohida fayllarga noyob stillarni qo'llash kerak bo'lganda juda qimmatlidir.
Buni hujjat darajasida ishlaydigan yuqori darajada ixtisoslashtirilgan selektor deb o'ylang, bu sizga veb-kontentingiz ko'rinishi ustidan nozik nazoratni beradi. Bu bir nechta saytlar bo'ylab brendli tajribalarni yaratish, eskirgan kontentni boshqarish va hatto yangi dizaynlarni global miqyosda joriy etishdan oldin veb-saytning ma'lum bo'limlarida sinab ko'rish uchun kuchli vositadir.
@document Qoidasining Sintaksisi
@document qoidasining asosiy sintaksisi quyidagicha:
@document {
/* CSS qoidalari */
}
Komponentlarning tahlili:
@document: Bu kalit so'z hujjat qoidasini boshlaydi.<match-function>: Bu stillar qo'llanilishi uchun hujjatning URL manzili qanday mezonlarga javob berishi kerakligini belgilaydi. Quyida ko'rib chiqadigan bir nechta mos kelish funksiyalari mavjud.{ /* CSS qoidalari */ }: Bu blok, agar hujjatning URL manzili belgilangan mezonlarga mos kelsa, qo'llaniladigan CSS qoidalarini o'z ichiga oladi. Bu qoidalar standart CSS sintaksisiga amal qiladi.
Mos kelish Funksiyalari: Maqsadli Hujjatlarni Aniqlash
@document qoidasining yuragi uning mos kelish funksiyalarida yotadi. Bu funksiyalar tegishli CSS qoidalari qo'llanilishi uchun hujjatning URL manzili qondirishi kerak bo'lgan shartlarni belgilaydi. Keling, keng tarqalgan mos kelish funksiyalarini ko'rib chiqaylik:
1. url()
url() funksiyasi URL manzili ko'rsatilgan URL bilan to'liq bir xil bo'lgan hujjatga mos keladi. Bu eng aniq moslashtirish usuli.
@document url("https://www.example.com/specific-page.html") {
body {
background-color: #f0f0f0;
}
}
Ushbu misolda, background-color faqat https://www.example.com/specific-page.html manzilida joylashgan hujjatning body qismiga qo'llaniladi.
2. url-prefix()
url-prefix() funksiyasi URL manzili ko'rsatilgan prefiks bilan boshlanadigan har qanday hujjatga mos keladi. Bu butun kataloglar yoki subdomenlarga stillarni qo'llash uchun foydalidir.
@document url-prefix("https://www.example.com/blog/") {
h1 {
color: #007bff;
}
}
Bu yerda, www.example.com saytidagi /blog/ katalogidagi barcha sahifalarning h1 elementlari #007bff rangi bilan uslublanadi.
3. domain()
domain() funksiyasi domeni ko'rsatilgan domenga mos keladigan har qanday hujjatga mos keladi. Bu butun bir domen bo'ylab stillarni qo'llash uchun foydalidir.
@document domain("example.com") {
a {
font-weight: bold;
}
}
Bu holda, example.com domeni ichidagi har qanday sahifadagi barcha havolalar (a elementlari) font-weight qiymati bold bo'ladi.
4. regexp()
regexp() funksiyasi URL manzillarini moslashtirish uchun regular ifodalardan foydalanish imkonini beradi. Bu eng moslashuvchan va kuchli moslashtirish qobiliyatini ta'minlaydi.
@document regexp("https://.*\.example\.com/.*\.pdf") {
body {
margin: 20px;
}
}
Bu misol example.com ning subdomenida joylashgan har qanday PDF hujjatining body qismiga 20px margin qo'llaydi. Regular ifoda ichidagi maxsus belgilarni ekranning qanday qilinganiga e'tibor bering.
@document Qoidasining Amaliy Qo'llanilishi
@document qoidasi foydalanuvchi tajribasini yaxshilash va veb-saytga xizmat ko'rsatishni soddalashtirish uchun turli xil stsenariylarda qo'llanilishi mumkin. Mana bir nechta amaliy misollar:
1. Bir nechta Veb-saytlar bo'ylab Brending Izchilligi
Tasavvur qiling, kompaniyangizning har biri o'ziga xos maqsadga ega bo'lgan bir nechta veb-sayti bor. Ularning barchasida izchil brending tajribasini ta'minlash uchun @document qoidasidan foydalanishingiz mumkin.
/* Umumiy brending stillari */
@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");
}
}
Ushbu kod parchasi example.com, example.net va example.org domenlarida joylashgan barcha veb-saytlarga bir xil shrift oilasi, matn rangi va logotipni qo'llaydi. Bu foydalanuvchi qaysi veb-saytga tashrif buyurishidan qat'i nazar, yagona brend identifikatorini ta'minlaydi.
2. Eskirgan Kontentni Uslublash
Ko'pgina veb-saytlarda hozirgi dizayn standartlariga mos kelmaydigan eskirgan kontent mavjud. @document qoidasi veb-saytning qolgan qismiga ta'sir qilmasdan, ushbu eski sahifalarga maxsus stillarni qo'llash uchun ishlatilishi mumkin.
/* Eskirgan kontent uchun stillar */
@document url-prefix("https://www.example.com/legacy/") {
.old-table {
border: 1px solid #ccc;
width: 100%;
}
}
Ushbu misol /legacy/ katalogidagi .old-table sinfiga ega jadvallarga chegara va kenglik qo'llaydi, bu esa asl HTMLni o'zgartirishni talab qilmasdan ularning ko'rinishini yaxshilaydi.
3. A/B Testlash
A/B testini o'tkazayotganda, foydalanuvchilarning bir qismi uchun veb-saytning ma'lum bir sahifasi yoki bo'limiga turli xil stillarni qo'llashni xohlashingiz mumkin. @document qoidasi ushbu test sahifalarini nishonga olish uchun ishlatilishi mumkin.
/* A/B testlash stillari */
@document url("https://www.example.com/landing-page-test.html") {
.cta-button {
background-color: #28a745; /* Yashil tugma */
color: white;
}
}
/* Asl stillar (ko'pchilik foydalanuvchilarga ko'rsatiladi) */
.cta-button {
background-color: #007bff; /* Moviy tugma */
color: white;
}
Ushbu stsenariyda, https://www.example.com/landing-page-test.html sahifasiga tashrif buyuruvchilar yashil chaqiruv tugmasini ko'radilar, boshqa foydalanuvchilar esa standart moviy tugmani ko'radilar. Bu sizga butun veb-saytga ta'sir qilmasdan, qaysi tugma yaxshiroq ishlashini kuzatish imkonini beradi.
4. Iframe ichidagi Tashqi Veb-saytlarni Uslublash
Agar siz boshqa veb-saytdan kontentni iframe yordamida joylashtirayotgan bo'lsangiz, uni saytingiz dizayni bilan yaxshiroq moslashtirish uchun ba'zi asosiy stillarni qo'llashni xohlashingiz mumkin. @document qoidasi bunga yordam berishi mumkin, ammo uning samaradorligi iframe manbasiga va joylashtirilgan saytning Kontent Xavfsizlik Siyosatiga (CSP) bog'liq.
/* Boshqa domendan iframe ichidagi kontentni uslublash */
@document domain("another-example.com") {
body {
font-size: 14px;
}
}
Bu another-example.com dan yuklangan kontentning shrift o'lchamini iframe ichida o'zgartirishga harakat qiladi. E'tibor bering, bu bir xil manba siyosati va CSP cheklovlariga bog'liq. Agar another-example.com cheklovchi CSP ga ega bo'lsa, bu stillar qo'llanilmasligi mumkin.
5. Maxsus Kontent Boshqaruv Tizimlari (CMS) uchun Stilelarni Moslashtirish
Turli CMS platformalari ko'pincha o'ziga xos HTML tuzilmalarini yaratadi yoki maxsus CSS sinflarini o'z ichiga oladi. Muayyan CMS tomonidan yaratilgan sahifalarni nishonga olish va maxsus uslub tuzatishlarini qo'llash uchun @document ni url-prefix bilan birgalikda ishlatishingiz mumkin.
/* Muayyan CMS tomonidan yaratilgan sahifalarni nishonga olish */
@document url-prefix("https://www.example.com/cms-generated-pages/") {
.cms-content p {
line-height: 1.6;
}
}
Bu misol /cms-generated-pages/ katalogi ostida joylashgan va ma'lum bir CMS tomonidan yaratilgan deb taxmin qilingan sahifalardagi `.cms-content` sinfidagi paragraflarning qator balandligini oshiradi. Bu o'sha CMS tomonidan yaratilgan kontent taqdimotini nozik sozlash imkonini beradi.
@document ni Boshqa CSS Texnikalari bilan Birlashtirish
@document qoidasi yanada murakkab va moslashuvchan uslublash yechimlarini yaratish uchun boshqa CSS texnikalari bilan birgalikda samarali ishlatilishi mumkin.
1. @document ni Media So'rovlari bilan Ishlatish
Siz hujjat URL manzili va qurilma yoki ekran o'lchamiga qarab turli xil stillarni qo'llash uchun @document ni media so'rovlari bilan birlashtirishingiz mumkin.
@document domain("example.com") {
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
}
Bu misol example.com domeni ichidagi barcha sahifalar uchun ekrani kengligi 768px yoki undan kam bo'lgan qurilmalarda shrift o'lchamini kamaytiradi.
2. CSS O'zgaruvchilaridan Foydalanish (Maxsus Xususiyatlar)
CSS o'zgaruvchilari sizga osongina yangilanishi mumkin bo'lgan qayta ishlatiladigan qiymatlarni aniqlash imkonini beradi. Muayyan hujjatlar uchun turli xil CSS o'zgaruvchi qiymatlarini belgilash uchun @document dan foydalanishingiz mumkin.
/* Muayyan subdomen uchun CSS o'zgaruvchilarini sozlash */
@document url-prefix("https://blog.example.com/") {
:root {
--primary-color: #ff6600; /* To'q sariq */
--secondary-color: #333;
}
}
/* O'zgaruvchilarni boshqa stillarda ishlatish */
body {
background-color: var(--primary-color);
color: var(--secondary-color);
}
Ushbu misolda, asosiy va ikkilamchi ranglar `blog.example.com` subdomenidagi barcha sahifalar uchun mos ravishda to'q sariq va to'q kulrang ranglarga o'rnatilgan. Keyin bu o'zgaruvchilar tana foni va matn rangini uslublash uchun ishlatiladi. Bu yondashuv texnik xizmat ko'rsatishni osonlashtiradi va veb-saytning turli qismlarida stillarni oson sozlash imkonini beradi.
3. @document bilan !important dan foydalanish
Odatda tavsiya etilmasa ham, @document qoidalari ichida !important dan foydalanish ba'zi holatlarda CSS-ning boshqa joylarida aniqlangan stillarni bekor qilish uchun zarur bo'lishi mumkin. Biroq, o'ziga xoslik muammolarini yaratmaslik uchun bundan ehtiyotkorlik bilan foydalaning.
@document url("https://www.example.com/special-page.html") {
.override-style {
color: red !important;
}
}
Bu boshqa uslub deklaratsiyalaridan qat'i nazar, ko'rsatilgan sahifadagi .override-style sinfiga ega elementlarning matn rangini majburan qizil rangga o'rnatadi. Bundan kamdan-kam hollarda va faqat mutlaqo zarur bo'lganda foydalaning.
Brauzer Mosligi
@document qoidasi zamonaviy brauzerlarda yaxshi qo'llab-quvvatlanadi. Biroq, eski brauzerlar uni qo'llab-quvvatlamasligi mumkin. Loyihalaringizda uni amalga oshirishdan oldin har doim Can I use kabi manbalardagi so'nggi brauzer mosligi ma'lumotlarini tekshiring. Agar eski brauzerlarni qo'llab-quvvatlashingiz kerak bo'lsa, hujjat URL manziliga qarab maxsus stillarni qo'llash uchun server tomonidagi skriptlar yoki JavaScript kabi muqobil usullardan foydalanishni ko'rib chiqing.
@document dan Foydalanish bo'yicha Eng Yaxshi Amaliyotlar
@document qoidasidan foydalanish samarali va texnik xizmat ko'rsatishga yaroqli bo'lishini ta'minlash uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:
- O'ziga xoslik: CSS o'ziga xosligiga e'tibor bering.
@documentqoidasi ichida aniqlangan stillar boshqa joyda aniqlangan yanada aniqroq selektorlar tomonidan bekor qilinishi mumkin. - Texnik xizmat ko'rsatish qulayligi: Har bir
@documentqoidasining maqsadini tushuntirish uchun aniq va tavsiflovchi izohlardan foydalaning. Bu sizga va boshqa dasturchilarga kelajakda kodni tushunish va saqlashga yordam beradi. - Tashkillashtirish: O'qishni osonlashtirish va tashkil etishni yaxshilash uchun bog'liq
@documentqoidalarini CSS fayllaringizda birgalikda guruhlang. - Sinovdan o'tkazish:
@documentqoidalaringizni mo'ljallangan hujjatlarga to'g'ri qo'llanilishini ta'minlash uchun sinchkovlik bilan sinovdan o'tkazing. - Haddan tashqari foydalanmaslik:
@documentqoidasidan haddan tashqari foydalanmang. Iloji bo'lsa, kerakli uslubni yaratish uchun an'anaviyroq CSS selektorlari va texnikalaridan foydalaning.@documentqoidasi juda aniq hujjatlarni yoki hujjatlar to'plamini nishonga olish kerak bo'lganda eng samarali hisoblanadi. - Ishlash samaradorligi: Ishlash samaradorligiga ta'siri odatda ahamiyatsiz bo'lsa-da, murakkab
regexp()funksiyalaridan haddan tashqari foydalanish renderlash samaradorligiga potentsial ta'sir qilishi mumkin. Regular ifodalaringizni samaradorlik uchun optimallashtiring.
@document Qoidasiga Muqobillar
@document qoidasi kuchli vosita bo'lsa-da, ayniqsa eski brauzerlar yoki murakkab stsenariylar bilan ishlaganda, shunga o'xshash natijalarga erishish uchun foydalanishingiz mumkin bo'lgan muqobil yondashuvlar mavjud.
1. Server Tomonidagi Skriptlar
PHP, Python yoki Node.js kabi server tomonidagi skript tillaridan foydalanib, so'ralgan URL manzilini aniqlashingiz va URL ga qarab turli CSS fayllari yoki ichki stillarni taqdim etishingiz mumkin. Bu yondashuv maksimal moslashuvchanlikni ta'minlaydi, lekin server tomonidagi kod o'zgarishlarini talab qiladi.
2. JavaScript
Joriy URL manzilini aniqlash va hujjatga dinamik ravishda CSS sinflari yoki stillarini qo'llash uchun JavaScript-dan foydalanishingiz mumkin. Bu yondashuv yaxshi moslashuvchanlikni taklif etadi va butunlay mijoz tomonida amalga oshirilishi mumkin, lekin u JavaScript ijrosini talab qiladi.
3. CSS Preprotsessorlari (Sass, Less)
Sass va Less kabi CSS preprotsessorlari ma'lum shartlarga asoslanib turli CSS qoidalarini yaratish uchun o'zgaruvchilar va shartli bayonotlardan foydalanish imkonini beradi. Ular to'g'ridan-to'g'ri hujjatga asoslangan moslashtirishni qo'llab-quvvatlamasa-da, ularni server tomonidagi skriptlar yoki JavaScript bilan birgalikda ishlatib, shunga o'xshash natijalarga erishishingiz mumkin.
Xulosa
@document qoidasi muayyan veb-hujjatlarni uslublash ustidan aniq nazoratga intilayotgan veb-dasturchilar uchun qimmatli vositadir. Uning sintaksisini, mos kelish funksiyalarini va amaliy qo'llanilishini tushunib, siz undan brendli tajribalar yaratish, eskirgan kontentni uslublash, A/B testlarini o'tkazish va turli CMS platformalari uchun stillarni moslashtirish uchun foydalanishingiz mumkin. Brauzer mosligi hisobga olinishi kerak va muqobil yondashuvlar mavjud bo'lsa-da, @document qoidasi CSS-ni veb-loyihalaringizning o'ziga xos ehtiyojlariga moslashtirishning kuchli va samarali usuli bo'lib qoladi. Texnik xizmat ko'rsatish qulayligi, tashkillashtirish va optimal ishlashni ta'minlash uchun eng yaxshi amaliyotlarga rioya qilishni unutmang. Uning imkoniyatlarini o'rganing va veb-saytingiz taqdimoti ustidan yangi nazorat darajasini oching. To'g'ri va o'rinli foydalanilganda, bu har qanday veb-dasturchining asboblar to'plamidagi kuchli vositadir.