CSS nomlar makoni qoidasi: XML'ga CSS yordamida uslub berish

@namespace bilan belgilanadigan CSS nomlar makoni qoidasi, CSS uslub qoidalarini ma'lum bir XML nomlar makonlari bilan bog'lash mexanizmini taqdim etadi. Bu kuchli xususiyat dasturchilarga XML hujjatlarini CSS yordamida uslublash imkonini beradi va XML ma'lumotlarini vizual jozibador tarzda taqdim etishning moslashuvchan va samarali usulini taklif qiladi. Ushbu qo'llanma CSS nomlar makoni qoidalari, jumladan, sintaksis, amaliy misollar va eng yaxshi amaliyotlar haqida keng qamrovli ma'lumot beradi.

XML nomlar makonlarini tushunish

CSS nomlar makoni qoidalariga sho'ng'ishdan oldin, XML nomlar makonlari tushunchasini tushunish juda muhimdir. XML nomlar makonlari bitta XML hujjatida turli manbalardan elementlar va atributlardan foydalanishda nomlar ziddiyatidan qochish usulini ta'minlaydi. Nomlar makoni odatda XML hujjatining ildiz elementida yoki nomlar makoni qo'llanilishi kerak bo'lgan har qanday elementda xmlns atributi yordamida e'lon qilinadi.

Masalan, quyidagi XML parchasi ko'rib chiqing:

            <book xmlns="http://example.com/book">
  <title>The Hitchhiker's Guide to the Galaxy</title>
  <author>Douglas Adams</author>
</book>
            

              
                Copy
              
            
          

Bu misolda xmlns atributi book elementi va uning bolalari uchun standart nomlar makonini e'lon qiladi. Aniq nomlar makoni prefiksisiz barcha elementlar ushbu nomlar makoniga tegishli. Biz prefiksdan ham foydalanishimiz mumkin:

            <bk:book xmlns:bk="http://example.com/book">
  <bk:title>The Hitchhiker's Guide to the Galaxy</bk:title>
  <bk:author>Douglas Adams</bk:author>
</bk:book>
            

              
                Copy
              
            
          

Bu yerda 'bk' prefiksi nomlar makoni bilan bog'langan. Endi shu nomlar makonidagi barcha elementlar ushbu prefiksga ega.

@namespace qoidasi

CSS'dagi @namespace qoidasi sizga nomlar makoni URI'sini nomlar makoni prefiksi bilan bog'lash imkonini beradi. Keyin bu prefiks CSS selektorlarida o'sha nomlar makonidagi elementlarni nishonga olish uchun ishlatilishi mumkin. @namespace qoidasining asosiy sintaksisi quyidagicha:

            @namespace prefix "namespace-uri";
            

              
                Copy
              
            
          

• prefiks: Bu siz CSS selektorlaringizda ishlatadigan nomlar makoni prefiksi. U har qanday haqiqiy CSS identifikatori bo'lishi mumkin.
• nomlar-makoni-uri: Bu siz nishonga olmoqchi bo'lgan XML nomlar makonining URI'sidir. Bu bitta yoki ikkitali tirnoq ichiga olingan satr bo'lishi kerak.

Masalan, bk prefiksini http://example.com/book nomlar makoni bilan bog'lash uchun siz quyidagi @namespace qoidasidan foydalanasiz:

            @namespace bk "http://example.com/book";
            

              
                Copy
              
            
          

CSS selektorlarida nomlar makonlaridan foydalanish

Nomlar makoni prefiksini e'lon qilganingizdan so'ng, siz uni CSS selektorlaringizda o'sha nomlar makonidagi elementlarni nishonga olish uchun ishlatishingiz mumkin. Buning sintaksisi quyidagicha:

            prefix|element { /* CSS qoidalari */ }
            

              
                Copy
              
            
          

Bu yerda prefix — nomlar makoni prefiksi, element — siz nishonga olmoqchi bo'lgan element nomi. Vertikal chiziq (|) prefiksni element nomidan ajratib turadi.

Masalan, http://example.com/book nomlar makonidagi barcha title elementlariga uslub berish uchun siz quyidagi CSS qoidasidan foydalanasiz:

            @namespace bk "http://example.com/book";
bk|title {
  font-size: 1.2em;
  font-weight: bold;
}
            

              
                Copy
              
            
          

Ushbu qoida belgilangan uslublarni faqat http://example.com/book nomlar makoniga tegishli bo'lgan title elementlariga qo'llaydi.

Nomlar makonlaridagi atributlarni nishonga olish

Siz, shuningdek, CSS yordamida ma'lum nomlar makonlaridagi atributlarni nishonga olishingiz mumkin. Sintaksis elementlarni nishonga olishga o'xshaydi:

            prefix|element[prefix|attribute] { /* CSS qoidalari */ }
            

              
                Copy
              
            
          

Masalan, agar sizda http://example.com/book nomlar makonida id nomli atribut bo'lsa, siz uni shunday nishonga olishingiz mumkin:

            @namespace bk "http://example.com/book";
bk|book[bk|id] {
  border: 1px solid black;
}
            

              
                Copy
              
            
          

Standart nomlar makoni

XML hujjati standart nomlar makonini e'lon qilganda (prefiksiz), siz o'sha nomlar makonidagi elementlarni yulduzcha (*) belgisini prefiks sifatida ishlatib nishonga olishingiz mumkin. Masalan, agar sizda quyidagi XML bo'lsa:

            <book xmlns="http://example.com/book">
  <title>The Hitchhiker's Guide to the Galaxy</title>
  <author>Douglas Adams</author>
</book>
            

              
                Copy
              
            
          

            @namespace "http://example.com/book";
*|title {
  color: blue;
}
            

              
                Copy
              
            
          

E'tibor bering, XML hujjati standart nomlar makonini belgilagan bo'lsa ham, siz *| selektoridan foydalanganda ham CSS'da nomlar makonini @namespace yordamida e'lon qilishingiz *kerak* bo'ladi.

|element selektori

|element selektori *har qanday* nomlar makonida bo'lgan elementlarni nishonga oladi. Bu ma'lum bir nomlar makonidan qat'i nazar, elementlarga uslublarni qo'llash uchun foydali bo'lishi mumkin.

Masalan:

            |title {
  text-transform: uppercase;
}
            

              
                Copy
              
            
          

Bu qaysi nomlar makonida bo'lishidan qat'i nazar, 'title' nomli har qanday elementning harflarini kattalashtiradi.

Amaliy misollar

Keling, bir nechta nomlar makonlari bilan murakkabroq misolni ko'rib chiqaylik. Aytaylik, sizda kitob nomlar makoni va metama'lumotlar nomlar makonidagi elementlarni birlashtirgan XML hujjati bor:

            <book xmlns:bk="http://example.com/book" xmlns:meta="http://example.com/metadata">
  <bk:title>The Lord of the Rings</bk:title>
  <bk:author>J.R.R. Tolkien</bk:author>
  <meta:publisher>Allen & Unwin</meta:publisher>
  <meta:year>1954</meta:year>
</book>
            

              
                Copy
              
            
          

Ushbu XML hujjatiga uslub berish uchun siz CSS'ingizda ikkala nomlar makonini ham e'lon qilishingiz kerak:

            @namespace bk "http://example.com/book";
@namespace meta "http://example.com/metadata";

bk|title {
  font-size: 1.5em;
  font-weight: bold;
}

bk|author {
  font-style: italic;
}

meta|publisher {
  color: green;
}

meta|year {
  color: gray;
}
            

              
                Copy
              
            
          

Ushbu CSS kodi http://example.com/book va http://example.com/metadata nomlar makonlaridagi elementlar uchun uslublarni belgilaydi. Sarlavha katta va qalin, muallif kursiv, nashriyotchi yashil va yil kulrang bo'ladi.

SVG'ga CSS nomlar makonlari bilan uslub berish

SVG (Masshtablanuvchi Vektorli Grafika) XML asosidagi vektorli tasvir formatidir. SVG'ga CSS nomlar makonlari bilan uslub berish juda kuchli bo'lishi mumkin. Mana bir misol:

            <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
            

              
                Copy
              
            
          

Mana CSS:

            @namespace svg "http://www.w3.org/2000/svg";

svg|circle {
  stroke: blue;
  fill: orange;
}

svg|svg {
  border: 1px solid black;
}

            

              
                Copy
              
            
          

Bu doiraning konturini ko'k rangga va ichki qismini to'q sariq rangga o'zgartiradi va SVG elementiga chegara qo'shadi. CSS'da SVG nomlar makonini e'lon qilish zarurligiga e'tibor bering.

Eng yaxshi amaliyotlar

• Nomlar makonlarini CSS faylingizning yuqori qismida e'lon qiling: Bu kodingizni o'qilishi oson va qo'llab-quvvatlanadigan qiladi.
• Mazmunli prefikslardan foydalaning: Ta'riflovchi va tushunish oson bo'lgan prefikslarni tanlang. 'ns1' yoki 'ns2' kabi umumiy prefikslardan saqlaning.
• Prefikslaringizda izchil bo'ling: Bir nomlar makoni uchun prefiks tanlaganingizdan so'ng, uni butun CSS fayli davomida izchil ishlating.
• Standart nomlar makonini inobatga oling: Agar XML hujjatingizda standart nomlar makoni bo'lsa, CSS selektorlaringizda prefiks sifatida yulduzcha (*) dan foydalanishni unutmang.
• Turli brauzerlarda sinab ko'ring: CSS nomlar makoni qoidalari keng qo'llab-quvvatlansa-da, brauzerlararo moslashuvchanlikni ta'minlash uchun kodingizni turli brauzerlarda sinab ko'rish har doim yaxshi fikrdir.
• Aniq selektorlardan foydalaning: Haddan tashqari umumiy selektorlardan saqlaning, chunki ular kutilmagan uslublash muammolariga olib kelishi mumkin. Muayyan nomlar makonlaridagi elementlarni nishonga olayotganda iloji boricha aniqroq bo'ling.

Brauzer moslashuvchanligi

CSS nomlar makoni qoidalari odatda zamonaviy brauzerlar, jumladan, Chrome, Firefox, Safari va Edge tomonidan yaxshi qo'llab-quvvatlanadi. Biroq, Internet Explorer'ning eski versiyalarida nomlar makoni qoidalari uchun cheklangan qo'llab-quvvatlash yoki umuman qo'llab-quvvatlanmasligi mumkin. Kodingiz kutilganidek ishlashini ta'minlash uchun uni turli brauzerlarda sinchkovlik bilan sinab ko'rish juda muhim. Eski brauzerlarni qo'llab-quvvatlash uchun polifillar yoki muqobil uslublash usullaridan foydalanishingiz kerak bo'lishi mumkin.

Umumiy muammolarni bartaraf etish

• Uslublar qo'llanilmayapti: Nomlar makonini to'g'ri e'lon qilganingizni va prefikslaringiz izchil ekanligini ikki marta tekshiring. CSS'dagi nomlar makoni URI'si XML hujjatingizdagi nomlar makoni URI'siga mos kelishiga ishonch hosil qiling.
• Kutilmagan uslublash: Agar kutilmagan uslublashni ko'rsangiz, to'g'ri elementlarni nishonga olayotganingizga ishonch hosil qilish uchun CSS selektorlaringizni ko'rib chiqing. Boshqa nomlar makonlaridagi elementlarga bexosdan ta'sir qilishi mumkin bo'lgan haddan tashqari umumiy selektorlardan saqlaning.
• Brauzerlararo moslashuvchanlik muammolari: Har qanday moslashuvchanlik muammolarini aniqlash uchun kodingizni turli brauzerlarda sinab ko'ring. Eski brauzerlarni qo'llab-quvvatlash uchun polifillar yoki muqobil uslublash usullaridan foydalanishni o'ylab ko'ring.

CSS nomlar makonlariga muqobillar

CSS nomlar makonlari XML'ga uslub berish uchun kuchli vosita bo'lsa-da, sizning maxsus ehtiyojlaringizga qarab ko'rib chiqishingiz mumkin bo'lgan muqobil yondashuvlar mavjud:

• XSLT (Kengaytiriladigan Uslublar Jadvali Tili Transformatsiyalari): XSLT - bu XML hujjatlarini boshqa formatlarga, shu jumladan HTML'ga o'zgartirish tili. U XML ma'lumotlarini manipulyatsiya qilish va dinamik tarkib yaratishning yanada moslashuvchan va kuchli usulini taqdim etadi. Biroq, uni o'rganish va ishlatish CSS nomlar makonlariga qaraganda murakkabroq bo'lishi mumkin.
• JavaScript: Siz XML hujjatining DOM (Hujjat Ob'ekt Modeli) ni manipulyatsiya qilish va uslublarni dinamik ravishda qo'llash uchun JavaScript'dan foydalanishingiz mumkin. Bu yondashuv yuqori darajadagi moslashuvchanlikni ta'minlaydi, ammo CSS nomlar makonlaridan foydalanishdan ko'ra ko'proq vaqt talab qilishi mumkin.
• Server tomonida qayta ishlash: Siz XML hujjatini server tomonida qayta ishlashingiz va keyin mijozga yuboriladigan HTML yaratishingiz mumkin. Bu yondashuv hujjat brauzerda ko'rsatilishidan oldin murakkab o'zgartirishlarni amalga oshirish va uslublashni qo'llash imkonini beradi.

Xulosa

CSS nomlar makoni qoidasi XML hujjatlariga CSS yordamida uslub berish uchun qimmatli vositadir. Nomlar makonlarini qanday e'lon qilishni va CSS selektorlaringizda prefikslardan foydalanishni tushunib, siz vizual jozibador va qo'llab-quvvatlanadigan XML asosidagi veb-ilovalarni yaratishingiz mumkin. Brauzer moslashuvchanligini hisobga olish kerak bo'lsa-da, XML uslublash uchun CSS nomlar makonlaridan foydalanishning afzalliklari sezilarlidir. Ushbu qo'llanma CSS nomlar makoni qoidalari, jumladan, sintaksis, amaliy misollar, eng yaxshi amaliyotlar va muammolarni bartaraf etish bo'yicha maslahatlar haqida keng qamrovli ma'lumot berdi. Ushbu ko'rsatmalarga rioya qilish orqali siz XML ma'lumotlaringiz taqdimotini yaxshilash uchun CSS nomlar makonlaridan samarali foydalanishingiz mumkin.

Har doim kodingizni turli brauzerlarda sinab ko'rishni va agar kerak bo'lsa, muqobil yondashuvlarni ko'rib chiqishni unutmang. CSS nomlar makoni qoidalarini puxta tushunish bilan siz foydalanuvchilaringiz uchun jozibali va qulay veb-tajribalar yaratishingiz mumkin.

Qo'shimcha o'qish uchun

• MDN Web Docs: @namespace
• CSS nomlar makonlari moduli 3-daraja