Išsamus CSS vardų sričių aprašymas XML dokumentų stiliavimui, apimantis sintaksę, pritaikymą ir geriausią praktiką žiniatinklio kūrėjams.
CSS vardų sričių taisyklė: XML stiliavimas su tikslumu
Kaskadiniai stilių lapai (CSS) tradiciškai naudojami HTML dokumentų stiliavimui. Tačiau CSS taip pat gali būti taikomas XML (Extensible Markup Language) dokumentams. Čia į pagalbą ateina CSS vardų sritys, suteikiančios mechanizmą, leidžiantį nustatyti konkrečius elementus XML struktūroje pagal jų susietą vardų sritį. CSS vardų sričių supratimas yra labai svarbus kūrėjams, dirbantiems su XHTML, SVG, MathML ir kitomis XML pagrįstomis technologijomis.
Kas yra XML vardų sritys?
XML vardų sritys yra būdas išvengti elementų pavadinimų susidūrimų, kai viename XML dokumente maišomi skirtingų šaltinių žodynai. Vardų sritis identifikuojama naudojant Uniform Resource Identifier (URI), kuris paprastai yra URL. Nors pats URI nebūtinai turi nurodyti galiojantį išteklių, jis naudojamas kaip unikalus vardų srities identifikatorius. Pagalvokite apie tai kaip apie būdą sukurti atskirą "pasaulį" XML dokumente, kuriame elementai yra unikaliai identifikuojami.
Įsivaizduokite dokumentą, kuriame yra ir HTML, ir Scalable Vector Graphics (SVG). Tiek HTML, tiek SVG turi elementus, pavadintus <title>. Be vardų sričių, naršyklė nežinotų, kuriam <title> elementui taikyti stilius.
Štai pavyzdys, kaip vardų sritys deklaruojamos XML:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Dokumentas su vardų sritimis</title>
</head>
<body>
<h1>Sveikas pasauli!</h1>
<svg:svg width="100" height="100">
<svg:circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg:svg>
</body>
</html>
Šiame pavyzdyje:
xmlns="http://www.w3.org/1999/xhtml"deklaruoja numatytąją vardų sritį elementui<html>ir visiems jo palikuonims (nebent ji pakeista). Tai reiškia, kad elementai, tokie kaip<head>,<title>,<body>ir<h1>, priklauso XHTML vardų sričiai.xmlns:svg="http://www.w3.org/2000/svg"deklaruoja vardų sritį su priešdėliu "svg" SVG vardų sričiai. Elementai, tokie kaip<svg:svg>ir<svg:circle>, priklauso SVG vardų sričiai.
Kaip veikia CSS vardų sritys
CSS vardų sritys leidžia taikyti stilius elementams pagal jų vardų sritį. Tai pasiekiama naudojant @namespace at-taisyklę CSS. Taisyklė @namespace susieja vardų srities priešdėlį su konkrečiu vardų srities URI.
Pagrindinė sintaksė yra:
@namespace priešdėlis "vardų-srities-uri";
Kur:
priešdėlisyra vardų srities priešdėlis, kurį norite naudoti CSS."vardų-srities-uri"yra URI, identifikuojantis vardų sritį.
Kai deklaruojate vardų srities priešdėlį, galite jį naudoti CSS selektoriuose, kad nurodytumėte elementus, priklausančius tai vardų sričiai.
CSS vardų sričių taikymas: praktiniai pavyzdžiai
1 pavyzdys: SVG elementų stiliavimas
Tarkime, kad norite stilizuoti SVG apskritimą iš ankstesnio pavyzdžio. Galite naudoti šį CSS:
@namespace svg "http://www.w3.org/2000/svg";
svg|circle {
fill: red;
stroke: blue;
stroke-width: 5px;
}
Šiame CSS:
@namespace svg "http://www.w3.org/2000/svg";deklaruoja SVG vardų sritį su priešdėliu "svg".svg|circleyra kvalifikuoto pavadinimo selektorius. Vamzdžio simbolis (|) atskiria vardų srities priešdėlį nuo elemento pavadinimo. Šis selektorius nukreipia visus<circle>elementus SVG vardų srityje.
Šis CSS pakeis apskritimo užpildo spalvą į raudoną, potėpio spalvą į mėlyną, o potėpio plotį į 5 pikselius.
2 pavyzdys: XHTML elementų stiliavimas su numatytąja vardų sritimi
Kai XML dokumentas turi numatytąją vardų sritį (deklaruojamą be priešdėlio šakniniame elemente), vis tiek galite nurodyti elementus toje vardų srityje naudodami CSS. Turite apibrėžti vardų srities priešdėlį ir tada naudoti universalųjį selektorių (*) su vardų srities priešdėliu.
Apsvarstykite XHTML struktūrą iš ankstesnio pavyzdžio. Norėdami stilizuoti <h1> elementą, galite naudoti šį CSS:
@namespace xhtml "http://www.w3.org/1999/xhtml";
xhtml|h1 {
color: green;
font-size: 2em;
}
Šiame CSS:
@namespace xhtml "http://www.w3.org/1999/xhtml";deklaruoja XHTML vardų sritį su priešdėliu "xhtml".xhtml|h1nukreipia<h1>elementą XHTML vardų srityje.
Šis CSS pakeis <h1> elemento spalvą į žalią, o šrifto dydį – į 2em.
3 pavyzdys: kelių vardų sričių naudojimas
Galite apibrėžti kelias vardų sritis savo CSS, kad stilizuotumėte elementus iš skirtingų žodynų tame pačiame dokumente.
Apsvarstykite XML dokumentą, kuriame derinami XHTML ir MathML:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:mathml="http://www.w3.org/1998/Math/MathML">
<head>
<title>Dokumentas su keliomis vardų sritimis</title>
</head>
<body>
<h1>MathML pavyzdys</h1>
<mathml:math>
<mathml:mrow>
<mathml:mi>x</mathml:mi>
<mathml:mo>+</mathml:mo>
<mathml:mi>y</mathml:mi>
</mathml:mrow>
</mathml:math>
</body>
</html>
Norėdami stilizuoti tiek <h1> elementą (XHTML), tiek <math> elementą (MathML), galite naudoti šį CSS:
@namespace xhtml "http://www.w3.org/1999/xhtml";
@namespace mathml "http://www.w3.org/1998/Math/MathML";
xhtml|h1 {
color: blue;
}
mathml|math {
font-size: 1.5em;
}
Šis CSS stilizuos <h1> elementą mėlynai ir padidins <math> elemento šrifto dydį.
Naršyklių suderinamumas
CSS vardų sričių palaikymas paprastai yra geras šiuolaikinėse naršyklėse. Tačiau senesnės naršyklės gali turėti ribotą arba visai nepalaikyti. Svarbu išbandyti savo CSS su skirtingomis naršyklėmis, kad užtikrintumėte suderinamumą.
Štai bendra naršyklių palaikymo apžvalga:
- Chrome: pilnas palaikymas
- Firefox: pilnas palaikymas
- Safari: pilnas palaikymas
- Edge: pilnas palaikymas
- Internet Explorer: ribotas palaikymas (IE9+ su kai kuriais trūkumais)
Senesnėms Internet Explorer versijoms gali tekti naudoti sąlyginius komentarus arba alternatyvius stiliavimo būdus.
Geriausia CSS vardų sričių naudojimo praktika
- Deklaruokite vardų sritis CSS viršuje: tai padaro jūsų CSS skaitomesnį ir lengviau prižiūrimą.
- Naudokite prasmingus priešdėlius: pasirinkite priešdėlius, kurie aiškiai nurodo susietą vardų sritį (pvz., "svg" SVG, "xhtml" XHTML).
- Būkite nuoseklūs naudojant priešdėlius: kai pasirinksite vardų srities priešdėlį, nuosekliai naudokite jį visame CSS.
- Išbandykite skirtingose naršyklėse: įsitikinkite, kad jūsų CSS veikia taip, kaip tikėtasi, visose tikslinėse naršyklėse.
- Apsvarstykite galimybę naudoti CSS atstatymą: stilių atstatymas gali padėti užtikrinti nuoseklų stilių skirtingose naršyklėse, ypač kai dirbate su XML dokumentais.
- Naudokite kvalifikuotus pavadinimus (priešdėlis|elementas) visiems elementams su vardų sritimi: nors kai kurios naršyklės gali leisti stilizuoti elementus numatytojoje vardų srityje be priešdėlio, geriausia visada naudoti kvalifikuotus pavadinimus, kad būtų aiškiau ir nuosekliau.
Universalus vardų srities selektorius
Universalus vardų srities selektorius, pažymėtas viena žvaigždute (*), gali būti naudojamas elementams nurodyti, neatsižvelgiant į jų vardų sritį. Tai gali būti naudinga tam tikrose situacijose, tačiau turėtumėte būti atsargūs, nes tai taip pat gali sukelti nenumatytą stilių.
Pavyzdžiui, *|h1 nukreiptų bet kurį <h1> elementą, neatsižvelgiant į jo vardų sritį.
default vardų srities naudojimas
CSS 4 lygis pristato raktinį žodį default, skirtą nurodyti numatytąją vardų sritį. Tai leidžia stilizuoti glaustesnį stilių, kai dirbama su dokumentais, kuriuose pagrindinė vardų sritis yra numatytoji.
Sintaksė:
@namespace default "http://www.w3.org/1999/xhtml";
default|h1 {
color: red;
}
Tačiau šios funkcijos palaikymas naršyklėse vis dar vystosi.
Alternatyvūs stiliavimo būdai
Nors CSS vardų sritys yra rekomenduojamas būdas stilizuoti XML dokumentus, yra alternatyvių būdų, kuriuos galite apsvarstyti, ypač jei jums reikia palaikyti senesnes naršykles arba turite sudėtingų stiliavimo reikalavimų.
- JavaScript: galite naudoti JavaScript, kad dinamiškai pridėtumėte arba modifikuotumėte stilius pagal elementų vardų sritį. Tai suteikia daugiau lankstumo, bet taip pat gali būti sudėtingiau.
- XSLT: Extensible Stylesheet Language Transformations (XSLT) gali būti naudojamas XML dokumentams transformuoti į HTML ar kitus formatus, leidžiant stilizuoti transformuotą išvestį naudojant standartinį CSS.
Dažnos klaidos
- Pamirštama deklaruoti vardų sritį: jei nedeklaruojate vardų srities naudodami
@namespace, jūsų CSS taisyklės nebus taikomos numatytiems elementams. - Naudojami neteisingi vardų sričių URI: įsitikinkite, kad naudojate teisingą vardų srities URI kiekvienam žodynui.
- Painiojami vardų sričių priešdėliai: venkite painiavos naudodami skirtingus priešdėlius skirtingoms vardų sritims.
- Nepaisoma naršyklių suderinamumo: išbandykite savo CSS skirtingose naršyklėse, kad įsitikintumėte, jog jis veikia taip, kaip tikėtasi.
- Pernelyg konkretūs selektoriai: venkite naudoti pernelyg konkrečius selektorius, dėl kurių CSS gali būti sunkiau prižiūrėti.
Išvada
CSS vardų sritys suteikia galingą ir lanksčią priemonę XML dokumentams stilizuoti. Suprasdami, kaip veikia vardų sritys ir kaip jas naudoti savo CSS, galite sukurti gerai struktūruotus ir lengvai prižiūrimus stilių lapus sudėtingoms XML pagrįstoms programoms. Nors naršyklių suderinamumas paprastai yra geras, svarbu išbandyti savo CSS skirtingose naršyklėse, kad užtikrintumėte nuoseklią vartotojo patirtį. Laikydamiesi geriausios praktikos ir vengdami dažnų klaidų, galite panaudoti CSS vardų sričių galią, kad sukurtumėte vizualiai patrauklias ir funkcines XML pagrįstas žiniatinklio programas.
Nepamirškite tvarkyti savo CSS, naudokite prasmingus priešdėlius ir visada kruopščiai išbandykite savo kodą. Gerai suprasdami CSS vardų sritis, galite užtikrintai įveikti bet kokį XML stiliavimo iššūkį.