6 Przypisywanie własnościom wartości, kaskadowość i dziedziczenie
Spis treści
6.1 Wartości określone, obliczone oraz rzeczywiste
Po przeanalizowaniu składni dokumentu i utworzeniu drzewa dokumentu aplikacja kliencka musi przypisać, dla każdego elementu w drzewie dokumentu, wartość każdej własności mającej zastosowanie do docelowego typu mediów.
Ostateczna wartość własności jest wynikiem czterostopniowej kalkulacji: najpierw wartość zostaje określona ("wartość określona"), następnie jest wyliczana wartość, która podlega dziedziczeniu ("wartość obliczona"), później w razie potrzeby następuje konwersja wartości na wartość bezwzględną ("wartość używana"), a na koniec następuje przekształcenie zgodnie z ograniczeniami lokalnego środowiska ("wartość rzeczywista").
6.1.1 Wartości określone
Aplikacje klienckie muszą najpierw przypisać wartość określoną każdej własności na podstawie następującego mechanizmu (w kolejności):
- Jeśli z kaskady wynika wartość, należy jej użyć.
- W przeciwnym przypadku, jeśli własność jest dziedziczona i element nie jest korzeniem drzewa dokumentu, należy użyć wartości obliczonej elementu rodzica.
- W przeciwnym przypadku należy użyć wartości początkowej własności. Wartość początkowa każdej własności jest podana w jej definicji.
6.1.2 Wartości obliczone
Wartości określone są w ramach kaskady dedukowane do postaci wartości obliczonych. Na przykład identyfikatory URI są zamieniane na bezwzględne, a jednostki ‚em’ i ‚ex’ są przeliczane na piksele i jednostki bezwzględne. Obliczenie wartości nigdy nie oznacza, że aplikacja kliencka musi zaprezentować dokument.
Wartość obliczona identyfikatorów URI, których aplikacja kliencka nie może zamienić na bezwzględne jest wartością określoną.
Gdy wartością określoną nie jest ‚inherit’, wartością obliczoną własności jest wartość zdefiniowana w polu Wartość obliczona w definicji tej własności. Definicja wartości obliczonych, gdy wartością określoną jest ‚inherit’ znajduje się w podrozdziale o dziedziczeniu.
Wartość obliczona istnieje nawet wówczas, gdy własność nie ma zastosowania według zasad wymienionych w polu Zastosowanie. Jednak niektóre własności mogą uzależniać wartość obliczoną własności elementu od tego, czy własność ta ma zastosowanie do tego elementu.
6.1.3 Wartości używane
Wartości obliczone są przetwarzane tak długo, jak to możliwe bez formatowania dokumentu. Jednak niektóre wartości można obliczyć dopiero po rozłożeniu elementów w dokumencie. Jeśli na przykład szerokość jakiegoś elementu jest ustawiona na określony procent szerokości zawierającego go bloku, szerokość tę można obliczyć dopiero po określeniu szerokości bloku zawierającego. Wartość używana to wartość obliczona, w której wszystkie pozostałe zależności zostały zamienione na wartości bezwzględne.
6.1.4 Wartości rzeczywiste
Wartość używana to zasadniczo wartość wykorzystywana do prezentacji, ale niektóre aplikacje klienckie mogą nie być w stanie wykorzystać niektórych wartości w pewnych środowiskach. Na przykład niektóre aplikacje nie potrafią zaprezentować obramowań o ułamkowej grubości. Muszą one zaokrąglić obliczoną wartość lub zostać zmuszone do użycia tylko odcieni kolorów białego i czarnego zamiast pełnej palety barw. Wartość rzeczywista to wartość powstała w wyniku zaokrąglenia wartości używanej.
6.2 Dziedziczenie
Niektóre wartości są dziedziczone przez elementy potomne w drzewie dokumentu, jak opisano wyżej. W definicji każdej własności jest napisane czy jest ona dziedziczona, czy nie.
Załóżmy, że mamy element H1 zawierający element EM:
<H1>Ten nagłówek <EM>jest</EM> ważny!</H1>
Jeśli elementowi EM nie zostanie przypisany żaden kolor, słowo "jest" odziedziczy kolor elementu rodzica. Zatem, jeśli element H1 ma kolor niebieski, zawartość elementu EM również będzie niebieska.
W wyniku dziedziczenia elementy dziedziczą wartości obliczone. Wartość obliczona elementu rodzica staje się wartością określoną i obliczoną elementu dziecka.
Spójrzmy na następujący arkusz stylów:
body { font-size: 10pt }
h1 { font-size: 130% }
Mamy również następujący fragment dokumentu:
<BODY> <H1>Jakiś <EM>duży</EM> nagłówek</H1> </BODY>
Własność ‚font-size’ elementu H1 będzie miała obliczoną wartość ’13pt’ (130% razy 10 punktów — wartość rodzica). Ponieważ wartość obliczona własności ‚font-size’ jest dziedziczna, element EM również będzie miał wartość ’13pt’. Jeśli aplikacja kliencka nie dysponuje fontem o wysokości 13 punktów, rzeczywista wartość własności ‚font-size’ zarówno elementu H1 jak i EM może wynieść np. 12 punktów.
6.2.1 Wartość ‚inherit’
Każda własność może również przyjąć wartość ‚inherit’. Oznacza to, że dla danego elementu własność ta przyjmuje taką samą wartość, co ta sama własność jego elementu rodzica. Wartości ‚inherit’ można używać do wzmacniania dziedziczenia wartości lub z własnościami, które normalnie nie są dziedziczne.
Jeśli wartość ‚inherit’ zostanie ustawiona dla własności elementu głównego, zostanie jej przypisana wartość początkowa.
W poniższym przykładzie ustawiono własności ‚color’ i ‚background’ elementu BODY. Wszystkie pozostałe elementy odziedziczą wartość własności ‚color’ a tło będzie przezroczyste. Gdyby reguły te były w arkuszu stylów użytkownika, czarny kolor tekstu na białym tle zostałby wymuszony w całym dokumencie.
body {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent !important;
}
6.3 Reguła @import
Reguła ‚@import’ umożliwia importowanie reguł stylistycznych z innych arkuszy stylów. W CSS 2.1 reguły ‚@import’ muszą znajdować się na samym początku arkusza stylów (wyjątkiem jest reguła ‚@charset’). W podrozdziale o analizie składniowej opisano sytuacje, w których aplikacje klienckie muszą ignorować reguły ‚@import’. Za słowem kluczowym ‚@import’ musi znajdować się identyfikator URI arkusza stylów, który jest dołączany. Dozwolony też jest łańcuch. Zostanie on zinterpretowany tak, jakby znajdował się w strukturze url(…).
Poniższe dwa wiersze kodu są równoznaczne. Ilustrują one dwa rodzaje składni reguły ‚@import’ (z notacją "url()’ i w postaci łańcucha).
@import "mystyle.css";
@import url("mystyle.css");
Aby aplikacje klienckie nie pobierały zasobów przeznaczonych dla nieobsługiwanych typów mediów, można tworzyć reguły @import zależne od mediów. W tym celu należy za identyfikatorem URI wstawić listę obsługiwanych typów mediów oddzielonych przecinkami (jest to tzw. import warunkowy).
Poniżej znajdują się przykładowe reguły @import zależne od mediów:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
Jeśli brak jakichkolwiek typów mediów, import jest bezwarunkowy. Taki sam efekt wywoła wartość ‚all’ określająca rodzaj medium. Arkusze stylów zostaną zaimportowane tylko wówczas, jeśli medium docelowe pasuje do listy.
Medium docelowe pasuje do listy, gdy jeden z elementów tej listy określa to medium docelowe lub jest wartością ‚all’.
Rozszerzeniem składni list mediów i definicji ich dopasowania są tzw. Zapytania o media (Media Queries) [MEDIAQ].
Jeśli ten sam arkusz stylów zostanie zaimportowany lub dołączony do dokumentu w kilku miejscach, aplikacje klienckie muszą każde łącze przetwarzać (lub zachowywać się tak, jakby to robiły) tak, jakby prowadziło ono do innego arkusza stylów.
6.4 Kaskada
Arkusze stylów mogą pochodzić z trzech różnych źródeł: autor, użytkownik oraz aplikacja kliencka.
- Autor: Autor definiuje arkusze stylów dla dokumentu źródłowego zgodnie z konwencjami języka użytego do budowy dokumentu. Na przykład w przypadku języka HTML arkusze stylów mogą być wstawiane wewnątrz dokumentu lub dołączane z zewnątrz.
- Użytkownik: Użytkownik może mieć możliwość zdefiniowania stylów dla określonego dokumentu. Użytkownik może na przykład określić plik zawierający arkusz stylów lub aplikacja kliencka może udostępniać interfejs do generowania arkuszy stylów użytkownika (albo zachowujący się tak, jakby to robił).
- Aplikacja kliencka: Zgodne aplikacje klienckie muszą stosować domyślny arkusz stylów (lub zachowywać się tak, jakby to robiły). Domyślny arkusz stylów aplikacji klienckiej powinien prezentować elementy języka dokumentu w sposób satysfakcjonujący ogólne oczekiwania względem tego języka (np. w przeglądarkach wizualnych zawartość tekstowa elementu EM języka HTML jest prezentowana kursywą). Zobacz Przykładowy arkusz stylów dla HTML — zalecany domyślny arkusz stylów dla dokumentów HTML.
Należy zauważyć, że użytkownik może zmieniać ustawienia systemowe (np. kolory systemowe) mające wpływ na domyślny arkusz stylów. Niektóre aplikacje klienckie nie pozwalają jednak na modyfikowanie domyślnego arkusza stylów.
Zakresy arkuszy stylów z tych źródeł nakładają się i wówczas zastosowanie mają zasady kaskadowości.
Kaskada CSS przypisuje każdej regule stylistycznej określony współczynnik ważności. W sytuacji, gdy zastosowanie ma kilka reguł, pierwszeństwo ma reguła o najwyższym współczynniku ważności (wadze).
Domyślnie reguły arkusza stylów autora mają wyższy współczynnik ważności niż reguły w arkuszu stylów użytkownika. Kolejność ta jest jednak odwrotna w przypadku reguł oznaczonych jako "!important". Wszystkie reguły autora i użytkownika mają wyższy współczynnik ważności niż reguły w domyślnym arkuszu stylów aplikacji klienckiej.
6.4.1 Kolejność w kaskadzie
W celu znalezienia wartości kombinacji element/własność aplikacja kliencka musi zastosować następującą kolejność sortowania:
- Znalezienie wszystkich deklaracji mających zastosowanie do danego elementu i własności w docelowym typie mediów. Deklaracja ma zastosowanie, gdy jej selektor pasuje do danego elementu a medium docelowe pasuje do listy mediów we wszystkich regułach @media zawierających tę deklarację i wszystkich łączach, poprzez które arkusz stylów został uzyskany.
- Sortowanie według ważności (normalna lub ważna) i pochodzenia (autor, użytkownik lub aplikacja kliencka). W kolejności rosnącej:
- deklaracje aplikacji klienckiej,
- normalne deklaracje użytkownika,
- normalne deklaracje autora,
- ważne deklaracje autora,
- ważne deklaracje użytkownika.
- Sortowanie reguł o tym samym stopniu ważności i pochodzeniu według precyzji selektora: bardziej precyzyjne selektory mają pierwszeństwo przed selektorami bardziej ogólnymi. Pseudoelementy i pseudoklasy są liczone jako odpowiednio normalne elementy i klasy.
- Sortowanie według kolejności występowania: jeśli dwie deklaracje mają taką samą wagę i takie same pochodzenie i precyzję, zastosowana zostanie ta, której definicja znajduje się dalej. Deklaracje pochodzące z zaimportowanych arkuszy stylów są umieszczane na samym początku.
Zasady te nadają arkuszom stylów autora wyższą wagę niż arkuszom stylów czytelnika (wyjątkiem są deklaracje oznaczone jako "!important"). Aplikacje klienckie muszą umożliwiać wyłączenie wybranych autorskich arkuszy stylów, np. za pomocą menu rozwijanego. Spełnienie tego warunku oznacza zgodność punktem 4.14 rekomendacji UAAG 1.0, [UAAG10].
6.4.2 Reguły !important
Specyfikacja CSS tworzy swego rodzaju równowagę sił między autorem a użytkownikiem arkuszy stylów. Domyślnie reguły autorskiego arkusza stylów przesłaniają reguły arkusza stylów użytkownika (zobacz 3. zasadę kaskadowości).
Jednak dla równowagi można tworzyć deklaracje typu "!important" (token oddzielający "!" i słowo kluczowe "important" wpisuje się za deklaracją), które są ważniejsze od normalnych deklaracji. Deklaracje tego typu mogą zawierać zarówno arkusze stylów użytkownika jak i autora. Reguły "!important" użytkownika są ważniejsze od reguł "!important" autora. Ta funkcja CSS podnosi stopień dostępności dokumentów poprzez umożliwienie użytkownikom o specjalnych wymaganiach (duże litery, określone kombinacje kolorów itp.) kontrolowania prezentacji.
Zadeklarowanie własności zbiorczej (np. ‚background’) jako "!important" jest równoznaczne z zadeklarowaniem wszystkich jej "podwłasności" jako "!important".
Pierwsza reguła w poniższym arkuszu stylów użytkownika zawiera deklarację "!important", która przesłania odpowiadającą jej deklarację w arkuszu stylów autora. Druga deklaracja również zostanie zastosowana dzięki oznaczeniu jako "!important". Natomiast trzecia reguła w arkuszu stylów użytkownika nie jest typu "!important", a więc zostanie przesłonięta przez drugą regułę arkusza stylów autora (która ustawia styl za pomocą własności zbiorczej). Ponadto trzecia reguła autora przegra z drugą regułą autora, ponieważ druga reguła jest typu "!important". To pokazuje, że deklaracje "!important" działają także wewnątrz autorskich arkuszy stylów.
/* Arkusz stylów użytkownika */
p { text-indent: 1em ! important }
p { font-style: italic ! important }
p { font-size: 18pt }
/* Arkusz stylów autora */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }
6.4.3 Obliczanie precyzji selektora
Precyzja selektora jest obliczana w następujący sposób:
- a = 1, jeśli deklaracja pochodzi z atrybutu ‚style’, a nie z reguły z selektorem. W przeciwnym przypadku a = 0 (w języku HTML wartości atrybutu "style" elementów są regułami arkuszy stylów; reguły te nie mają selektorów, a więc a=1, b=0, c=0 i d=0).
- b = liczba atrybutów identyfikatora w selektorze.
- c = liczba innych atrybutów i pseudoklas w selektorze.
- d = liczba nazw elementów i pseudoelementów w selektorze.
Precyzja jest określana tylko na podstawie formatu selektora. W szczególności selektor w postaci "[id=p33]" jest traktowany jako selektor atrybutu (a=0, b=0, c=1, d=0), nawet jeśli atrybut identyfikatora w DTD dokumentu źródłowego jest zdefiniowany jako "ID".
Połączenie tych czterech liczb a-b-c-d (w systemie liczbowym o dużej podstawie) stanowi precyzję selektora.
Kilka przykładów:
* {} /* a=0 b=0 c=0 d=0 -> precyzja = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> precyzja = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> precyzja = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> precyzja = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> precyzja = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> precyzja = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> precyzja = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> precyzja = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> precyzja = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> precyzja = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
W powyższym dokumencie tekst w elemencie P miałby kolor zielony. Deklaracja znajdująca się w atrybucie "style" przesłoniłaby deklarację z elementu STYLE zgodnie z 3. zasadą kaskadowości — ma wyższy stopień precyzji.
6.4.4 Priorytetowość obiektów prezentacyjnych nie należących do CSS
Aplikacja kliencka może honorować atrybuty prezentacyjne znajdujące się w dokumencie źródłowym HTML. W takim przypadku atrybuty te są przekształcane w odpowiednie reguły CSS o precyzji 0 i są traktowane tak, jakby zostały wstawione na początku autorskiego arkusza stylów. Mogą zatem zostać przesłonięte przez dalsze reguły arkusza stylów. W fazie przejściowej zasada ta ułatwia współistnienie atrybutów stylistycznych z arkuszami stylów.
Każdy atrybut języka HTML nie wymieniony na tej liście powinien być uważany za prezentacyjny: abbr, accept-charset, accept, accesskey, action, alt, archive, axis, charset, checked, cite, class, classid, code, codebase, codetype, colspan, coords, data, datetime, declare, defer, dir, disabled, enctype, for, headers, href, hreflang, http-equiv, id, ismap, label, lang, language, longdesc, maxlength, media, method, multiple, name, nohref, object, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload, onunload, profile, prompt, readonly, rel, rev, rowspan, scheme, scope, selected, shape, span, src, standby, start, style, summary, title, type (z wyjątkiem, gdy dotyczy elementów LI, OL i UL), usemap, value, valuetype, version.
W przypadku pozostałych języków style wszystkich elementów języka dokumentu powinny być określane za pomocą arkusza stylów aplikacji klienckiej.
Poniższy arkusz stylów użytkownika przesłoniłby grubość pisma elementów ‚b’ we wszystkich dokumentach i kolor elementów ‚font’ z atrybutem koloru w dokumentach XML. Nie zmieniłby koloru elementów ‚font’ z atrybutem koloru w dokumentach HTML:
b { font-weight: normal; }
font[color] { color: orange; }
Poniższa reguła natomiast zmieniłaby kolor elementów ‚font’ we wszystkich dokumentach:
font[color] { color: orange ! important; }
Dodaj komentarz