Start Publikacje Tłumaczenia Książki Słownik programistyczny

Promocje Heliona

Bestsellery Heliona

3. Kaskadowość

W CSS na prezentację dokumentu można wpływać przy pomocy wielu arkuszy stylów naraz. Decydują o tym dwie własności CSS: modularność oraz równowaga autor/odbiorca.

Modularność

Projektant może połączyć kilka arkuszy stylów, aby uniknąć niepotrzebnego pisania:

@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);

H1 { color: red } /* zastępuje importowane arkusze */

Równowaga autor/odbiorca

Zarówno autor jak i odbiorca może wpływać na prezentację dokumentu przy pomocy arkuszy stylów. W tym celu korzystają oni z tego samego języka odzwierciedlając w ten sposób jedną z fundamentalnych cech sieci WWW, że każdy może publikować własne dokumenty. Sposób postępowania z osobistymi arkuszami stylów uzależniony jest od konkretnej aplikacji klienckiej.

Czasami mogą wystąpić konflikty pomiędzy różnymi arkuszami stylów. Problem ten rozwiązuje się za pomocą nadania stylom stopni ważności. Domyślnie, style użytkownika mają mniejszą ważność od stylów autora. To znaczy, że jeżeli w przychodzącym dokumencie wystąpią jakiekolwiek konflikty pomiędzy stylami autora i użytkownika, to zastosowane zostaną style autora dokumentu. Ważność najmniejszą mają style domyślne aplikacji.

Importowane arkusze stylów segregowane są kaskadowo, wg kolejności w jakiej zostały dołączone zgodnie z zasadami opisanymi poniżej. Jeżeli w dokumencie istnieją jakiekolwiek osadzone arkusze, to mają one pierwszeństwo przed arkuszami importowanymi. Mówiąc inaczej, arkusze importowane znajdują się na niższym poziomie w kaskadzie niż style wpisane. Style importowane mogą same importować i nadpisywać inne arkusze stylów w sposób rekurencyjny.

W CSS1, wszystkie polecenia „@import” muszą pojawić się na samym początku arkusza stylów, przed jakimikolwiek deklaracjami. Dzięki temu jasne jest, że style wpisane mają pierwszeństwo przed stylami importowanymi.

3.1 Polecenie „important”

Twórca arkusza stylów może podnieść ważność swoich deklaracji:

H1 { color: black ! important; background: white ! important }
P  { font-size: 12pt ! important; font-style: italic }

W powyższym przykładzie, trzy pierwsze deklaracje mają podwyższoną ważność, natomiast ostatnia deklaracja ma ważność normalną.

Reguła użytkownika z deklaracją opatrzoną poleceniem important ma pierwszeństwo przed regułą autora o normalnej ważności. Natomiast zasada autora z deklaracją opatrzoną poleceniem ważności ma pierwszeństwo przed regułą użytkownika z deklaracją z poleceniem ważności.

3.2 Kolejność w kaskadzie

Konflikty reguł towarzyszą nieodłącznie mechanizmowi CSS. Aby odnaleźć wartość elementu/atrybutu, należy zastosować następującą procedurę postępowania:

Znajdź wszystkie deklaracje, które mają zastosowanie do danego elementu/reguły. Deklaracje mają zastosowanie, gdy selektor pasuje do danego elementu. Jeżeli nie ma żadnych pasujących deklaracji, to dziedziczona jest wartość elementu nadrzędnego. Jeżeli nie ma takiej wartości (dotyczy elementu „HTML” oraz reguł, które nie są dziedziczone), to stosowana jest wartość domyślna.
Posortuj deklaracje wg poziomu ich ważności: deklaracje oznaczone jako „!important” mają podwyższony priorytet w stosunku do zwykłych deklaracji (nieoznaczonych).
Posortuj według pochodzenia: arkusze autora dokumentu mają większą ważność od arkuszy użytkownika. Najniższy priorytet mają domyślne style przeglądarki (aplikacji klienckiej). Importowane arkusze stylów mają taki sam priorytet jak arkusze, z których zostały one pobrane.
Posortuj wg precyzji selektorów: selektory bardziej precyzyjne mają pierwszeństwo przed selektorami ogólniejszymi. Aby obliczyć precyzyjność selektora, należy ustawić w kolejności jedna po drugiej następujące cyfry: liczba atrybutów ID w selektorze (a), liczba atrybutów CLASS w selektorze (b), liczba nazw znaczników HTML w selektorze (c).
```
LI            {...}  /* a=0 b=0 c=1 -> szczegółowość =   1 */
UL LI         {...}  /* a=0 b=0 c=2 -> szczegółowość =   2 */
UL OL LI      {...}  /* a=0 b=0 c=3 -> szczegółowość =   3 */
LI.red        {...}  /* a=0 b=1 c=1 -> szczegółowość =  11 */
UL OL LI.red  {...}  /* a=0 b=1 c=3 -> szczegółowość =  13 */ 
#x34y         {...}  /* a=1 b=0 c=0 -> szczegółowość = 100 */ 
	
```
Pseudoelementy i pseudoklasy traktowane są jak zwykłe elementy i klasy.
Sortuj wg ustalonej kolejności. Jeżeli dwie reguły mają taką samą ważność, pod uwagę brana jest ta druga. Wszelkie importowane reguły, występują przed regułami znajdującymi się bezpośrednio w arkuszu.

Szukanie wartości atrybutu może zostać przerwane jeżeli znajdzie się reguła o większym stopniu ważności niż inne reguły, które odnoszą się do tej samej kombinacji elementu/atrybutu.

Dzięki takiej strategii, arkusze stylów twórcy dokumentu zyskują znaczną przewagę nad stylami użytkownika. Ważne jest więc, aby umożliwić użytkownikowi wyłączenie niektórych arkuszy stylów, np. przy pomocy listy rozwijanej.

Deklaracja w atrybucie „STYLE” elementu HTML ma taką samą ważność jak zawartość atrybutu ID dopisanego na końcu arkusza stylów:

<STYLE TYPE="text/css">
  #x97z { color: blue }
</STYLE>

<P ID=x97z STYLE="color: red">

W powyższym przykładzie, zawartość elementu „P” byłaby wyświetlona na czerwono. Mimo że obie deklaracje posiadają taki sam stopień precyzji, to deklaracja zawarta w atrbucie „STYLE” ma pierwszeństwo przed regułą w elemencie „STYLE” ze względu na 5 zasadę powyżej.

Przeglądarka może także uznawać pewne stylistyczne atrybuty HTML, jak np. atrybut „ALIGN”. W takim przypadku atrybuty te konwertowane są na odpowiadające im reguły CSS i nadawana jest im precyzyjność na poziomie 1. Umieszczane są one umownie na samym początku arkusza stylów i mogą zostać zastąpione przez następujące po nich reguły. W ten sposób łatwiej jest pogodzić współwystępujące ze sobą atrybuty stylistyczne i arkusze stylów w fazie transformacji.

Spis treści

Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.

Copyright © 2004 W3C^® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaku towarowego, używania dokumentu i licencji oprogramowania.