CSS hrou CSS3, experimenty, svet v kaskádových štýloch

Formálne pravidlá kaskádovania

Tento výňatok textu je z knihy xCSS – referenční příručka, ktorú vydáva Zoner Press.

Ďakujem Jurajovi za doplnenie.

Kaskádovanie je klúčová vlastnosť CSS – určuje postup, ktorým sa prehliadač musí riadiť pri zpracovaní všetkých existujúcich štýlov platných pre zpracovavaný dokument a pre použité médium.

Štýlové predpisy môžu pochádzať z troch rôznych zdrojov: od autora, uživateľa alebo agenta a môžu sa rôzne prekrývať. Dôsledok je ten, že na rovnaký prvok sa uplatní niekoľko štýlových pravidiel z rôznych zdrojov. Preto su stanovené pravidlá určujúce, ktorý z konfliktných CSS pravidiel sa uplatní.


body div#nieco p {color red;}
div#nieco p {color: blue;}
#nieco p {color: pink;}
p {color: navy;}
<div id="nieco"><p>Akú farbu má tento odstavec?</p></div>


Pravidlá CSS priradujú každému štýlovému pravidlu určitú váhu a v prípadoch, kedy sa štýlové pravidlá dostanú do kolízie, zvíťazí CSS pravidlo s näjvyššou váhou. Pri určovaní tejto váhy sa postupuje tak, že sa pre daný prvok vyhľadajú všetky použitelné deklarácie a uplatnia sa na nich kritéria kaskádovania.

Prvým kritériom je pôvod zdroja

1. 1. implicitne majú pravidlá v CSS predpise autora vyššiu váhu než CSS pravidla uživatela; prioritu možno zmeniť direktivou !important. pri jej použití platí opačné poradie – CSS pravidlá uživateľa majú vyššiu váhu, než CSS pravidlá autora.
2. 2. ako autorské, tak aj uživateľské pravidlá majú vyššiu váhu, než CSS predpis agenta.
3. 3. importované CSS predpisy takisto kaskádujú a ich váha je daná ich poradím dôležitosti – pravidlá definované v určitom CSS predpise majú prednosť (tj. prepisujú) pravidlá importované z iného CSS predpisu; importované CSS predpisy môžu samé importovať ďaľšie CSS predpisy – v tom prípade sa kaskádovanie vyhodnocuje rekurzívne.

Druhým kritériom je konkrétnosť selektoru

1. 1. Najprv sa určia tri základne hodnoty a, b, c a to takto:
   • a = vlastnosť priradená pomocou atributu style
   • b = počet ID atributov v selektore
   • c = počet ostatných atributov a pseudotried v selektore
   • d = počet názvov prvkov v selektore
   • - pseudoprvky sa pri výpočte ignorujú
2. 2. získané čísla sa v poradí a-b-c spoja do súvislého reťazca a výsledkom je hodnota abc konkrétnosti selektoru.

Tretím kritériom je poradie výskytu

1. 1. ak je váha pôvodu a konkretnosť dvoch pravidiel rovnaká, zvíťazí to pravidlo, ktoré je v štýlovom predpise definované neskôr.


p {color: red;}
p {color: blue;}
<p>Akú farbu má tento odstavec?</p>


Ilustračný príklad stanovenia konkrétnosti selektoru [je vynechaný atribut style (a)]

zdroje:

• xCSS – referenční příručka
• Tvorba webových stránok | Peter Druska