CSS-i nimeruumireegel: XML-i stiilimine CSS-iga

CSS-i nimeruumireegel, mida tähistatakse @namespace abil, pakub mehhanismi CSS-i stiilireeglite sidumiseks konkreetsete XML-i nimeruumidega. See võimas funktsioon võimaldab arendajatel stiilida XML-dokumente CSS-i abil, pakkudes paindlikku ja tõhusat viisi XML-andmete visuaalselt meeldivaks esitamiseks. See juhend annab põhjaliku ülevaate CSS-i nimeruumireeglitest, sealhulgas süntaksist, praktilistest näidetest ja parimatest praktikatest.

XML-i nimeruumide mõistmine

Enne CSS-i nimeruumireeglitesse süvenemist on oluline mõista XML-i nimeruumide kontseptsiooni. XML-i nimeruumid pakuvad viisi nimekonfliktide vältimiseks, kui ühes XML-dokumendis kasutatakse erinevatest allikatest pärit elemente ja atribuute. Nimeruum deklareeritakse tavaliselt xmlns atribuudi abil XML-dokumendi juurelemendil või mis tahes elemendil, kus nimeruumi tuleks rakendada.

Näiteks vaatleme järgmist XML-i koodilõiku:

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

              
                Copy
              
            
          

Selles näites deklareerib xmlns atribuut vaikenimeruumi elemendi book ja selle lastelementide jaoks. Kõik elemendid, millel puudub selgesõnaline nimeruumi eesliide, kuuluvad sellesse nimeruumi. Võiksime kasutada ka eesliidet:

            <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
              
            
          

Siin on eesliide 'bk' seotud nimeruumiga. Kõigil selle nimeruumi elementidel on nüüd see eesliide.

Reegel @namespace

Reegel @namespace CSS-is võimaldab teil siduda nimeruumi URI nimeruumi eesliitega. Seda eesliidet saab seejärel kasutada CSS-i selektorites, et sihtida elemente selles nimeruumis. Reegli @namespace põhisüntaks on järgmine:

            @namespace prefix "namespace-uri";
            

              
                Copy
              
            
          

• eesliide: See on nimeruumi eesliide, mida kasutate oma CSS-i selektorites. See võib olla mis tahes kehtiv CSS-i identifikaator.
• nimeruumi-uri: See on XML-i nimeruumi URI, mida soovite sihtida. See peab olema string, mis on ümbritsetud kas ühekordsete või kahekordsete jutumärkidega.

Näiteks eesliite bk sidumiseks nimeruumiga http://example.com/book kasutaksite järgmist @namespace reeglit:

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

              
                Copy
              
            
          

Nimeruumide kasutamine CSS-i selektorites

Kui olete deklareerinud nimeruumi eesliite, saate seda kasutada oma CSS-i selektorites, et sihtida elemente selles nimeruumis. Selle süntaks on järgmine:

            prefix|element { /* CSS rules */ }
            

              
                Copy
              
            
          

Kus eesliide on nimeruumi eesliide ja element on elemendi nimi, mida soovite sihtida. Vertikaalne kriips (|) eraldab eesliite elemendi nimest.

Näiteks kõigi title elementide stiilimiseks nimeruumis http://example.com/book kasutaksite järgmist CSS-i reeglit:

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

              
                Copy
              
            
          

See reegel rakendab määratud stiile ainult title elementidele, mis kuuluvad nimeruumi http://example.com/book.

Atribuutide sihtimine nimeruumides

Saate CSS-i abil sihtida ka atribuute konkreetsetes nimeruumides. Süntaks sarnaneb elementide sihtimisele:

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

              
                Copy
              
            
          

Näiteks kui teil oleks atribuut nimega id nimeruumis http://example.com/book, saaksite seda sihtida nii:

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

              
                Copy
              
            
          

Vaikenimeruum

Kui XML-dokument deklareerib vaikenimeruumi (ilma eesliiteta), saate selles nimeruumis olevaid elemente sihtida, kasutades eesliitena tärni (*). Näiteks kui teil on järgmine XML:

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

              
                Copy
              
            
          

Võite stiilida title elementi, kasutades järgmist CSS-i:

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

              
                Copy
              
            
          

Pange tähele, et kuigi XML-dokument määratleb vaikenimeruumi, peate *siiski* deklareerima nimeruumi oma CSS-is, kasutades @namespace, isegi kui kasutate selektorit *|.

Selektor |element

Selektor |element sihib elemente, mis on *mis tahes* nimeruumis. See võib olla kasulik stiilide rakendamiseks elementidele, sõltumata nende konkreetsest nimeruumist.

Näiteks:

            |title {
  text-transform: uppercase;
}
            

              
                Copy
              
            
          

See muudaks mis tahes elemendi nimega 'title' suurtäheliseks, olenemata sellest, millises nimeruumis see on.

Praktilised näited

Vaatleme keerukamat näidet mitme nimeruumiga. Oletame, et teil on XML-dokument, mis ühendab elemente raamatu nimeruumist ja metaandmete nimeruumist:

            <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
              
            
          

Selle XML-dokumendi stiilimiseks deklareeriksite mõlemad nimeruumid oma CSS-is:

            @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
              
            
          

See CSS-kood määratleb stiilid elementidele nii http://example.com/book kui ka http://example.com/metadata nimeruumides. Pealkiri on suur ja paksus kirjas, autor kaldkirjas, kirjastaja roheline ja aastaarv hall.

SVG stiilimine CSS-i nimeruumidega

SVG (Scalable Vector Graphics) on XML-põhine vektorpildivorming. SVG stiilimine CSS-i nimeruumidega võib olla äärmiselt võimas. Siin on näide:

            <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
              
            
          

Siin on CSS:

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

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

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

            

              
                Copy
              
            
          

See muudaks ringi joone siniseks ja täite oranžiks ning lisaks SVG-elemendile äärise. Pange tähele vajadust deklareerida SVG nimeruum CSS-is.

Parimad praktikad

• Deklareerige nimeruumid oma CSS-faili alguses: See muudab teie koodi loetavamaks ja hooldatavamaks.
• Kasutage tähendusrikkaid eesliiteid: Valige eesliited, mis on kirjeldavad ja kergesti mõistetavad. Vältige üldisi eesliiteid nagu 'ns1' või 'ns2'.
• Olge oma eesliidetega järjepidev: Kui olete nimeruumi jaoks eesliite valinud, kasutage seda järjepidevalt kogu oma CSS-failis.
• Arvestage vaikenimeruumiga: Kui teie XML-dokumendil on vaikenimeruum, pidage meeles kasutada tärni (*) eesliitena oma CSS-i selektorites.
• Testige erinevates brauserites: Kuigi CSS-i nimeruumireeglid on laialdaselt toetatud, on alati hea mõte testida oma koodi erinevates brauserites, et tagada brauseriteülene ühilduvus.
• Kasutage spetsiifilisi selektoreid: Vältige liiga üldisi selektoreid, kuna need võivad põhjustada ootamatuid stiiliprobleeme. Olge konkreetsetes nimeruumides elemente sihtides võimalikult täpne.

Brauseriühilduvus

CSS-i nimeruumireeglid on üldiselt hästi toetatud kaasaegsete brauserite poolt, sealhulgas Chrome, Firefox, Safari ja Edge. Kuid vanematel Internet Exploreri versioonidel võib nimeruumireeglite tugi olla piiratud või puududa. On oluline testida oma koodi põhjalikult erinevates brauserites, et tagada selle ootuspärane toimimine. Vanemate brauserite toetamiseks peate võib-olla kasutama polüfille või alternatiivseid stiilimistehnikaid.

Levinumate probleemide tõrkeotsing

• Stiile ei rakendata: Kontrollige hoolikalt, kas olete nimeruumi õigesti deklareerinud ja kas teie eesliited on järjepidevad. Veenduge, et nimeruumi URI teie CSS-is vastaks nimeruumi URI-le teie XML-dokumendis.
• Ootamatu stiil: Kui näete ootamatut stiili, vaadake üle oma CSS-i selektorid, et veenduda, et need sihivad õigeid elemente. Vältige liiga üldisi selektoreid, mis võivad tahtmatult mõjutada elemente teistes nimeruumides.
• Brauseriteülese ühilduvuse probleemid: Testige oma koodi erinevates brauserites, et tuvastada ühilduvusprobleeme. Kaaluge polüfillide või alternatiivsete stiilimistehnikate kasutamist vanemate brauserite toetamiseks.

Alternatiivid CSS-i nimeruumidele

Kuigi CSS-i nimeruumid on võimas tööriist XML-i stiilimiseks, on olemas alternatiivseid lähenemisviise, mida võite kaaluda sõltuvalt teie konkreetsetest vajadustest:

• XSLT (Extensible Stylesheet Language Transformations): XSLT on keel XML-dokumentide teisendamiseks teistesse vormingutesse, sealhulgas HTML-i. See pakub paindlikumat ja võimsamat viisi XML-andmete manipuleerimiseks ja dünaamilise sisu genereerimiseks. Kuid selle õppimine ja kasutamine võib olla keerulisem kui CSS-i nimeruumide puhul.
• JavaScript: Saate kasutada JavaScripti XML-dokumendi DOM-i (Document Object Model) manipuleerimiseks ja stiilide dünaamiliseks rakendamiseks. See lähenemine pakub suurt paindlikkust, kuid võib olla aeganõudvam kui CSS-i nimeruumide kasutamine.
• Serveripoolne töötlemine: Saate XML-dokumenti töödelda serveripoolel ja genereerida HTML-i, mis seejärel saadetakse kliendile. See lähenemine võimaldab teil teha keerulisi teisendusi ja rakendada stiile enne dokumendi renderdamist brauseris.

Kokkuvõte

CSS-i nimeruumireegel on väärtuslik tööriist XML-dokumentide stiilimiseks CSS-iga. Mõistes, kuidas deklareerida nimeruume ja kasutada eesliiteid oma CSS-i selektorites, saate luua visuaalselt meeldivaid ja hooldatavaid XML-põhiseid veebirakendusi. Kuigi brauseriühilduvust tuleks arvesse võtta, on CSS-i nimeruumide kasutamise eelised XML-i stiilimisel märkimisväärsed. See juhend on andnud põhjaliku ülevaate CSS-i nimeruumireeglitest, sealhulgas süntaksist, praktilistest näidetest, parimatest praktikatest ja tõrkeotsingu näpunäidetest. Neid juhiseid järgides saate tõhusalt kasutada CSS-i nimeruume oma XML-andmete esitluse parandamiseks.

Pidage meeles, et peate alati oma koodi testima erinevates brauserites ja vajadusel kaaluma alternatiivseid lähenemisviise. Tugeva arusaamaga CSS-i nimeruumireeglitest saate luua oma kasutajatele köitvaid ja ligipääsetavaid veebikogemusi.

Lisalugemist

• MDN Web Docs: @namespace
• CSS Namespaces Module Level 3