1. Wprowadzenie

Technologia CSS ma dwie twarze. Z jednej strony jest bardzo prosta i wystarczy poznać zaledwie kilka podstawowych pojęć, aby całkiem sprawnie się nią posługiwać. Z drugiej strony jest skomplikowana, naszpikowana tajemniczo brzmiącymi pojęciami oraz niesłychanie rozproszona na dziesiątki specyfikacji, przez co trudno jest się w niej połapać.

Podstawy składni CSS zostały opisane w rozdziale Podstawy CSS Kursu HTML i CSS, więc jeśli potrzebujesz odświeżenia wiadomości, zachęcam do jego przeczytania.

Natomiast w tym rozdziale znajdują się objaśnienia niektórych ważnych pojęć używanych w kontekście Kaskadowych arkuszy stylów, których znajomość ułatwi Ci dokładne zrozumienie dalszych rozdziałów tego podręcznika. Nie opisuję to takich podstawowych pojęć, takich jak drzewo dokumentu, czy deklaracja, ponieważ ich objaśnienie znajduje się już w Kursie HTML i CSS.

Ponadto w tym rozdziale dowiesz się, czym jest specyfikacja CSS, jakie są typy specyfikacji CSS oraz jakie są najbardziej autorytatywne źródła wiedzy na temat technologii Kaskadowych arkuszy stylów.

Ważne pojęcia CSS

Poniżej znajduje się lista ważnych pojęć, które warto znać, aby lepiej rozumieć opisy własności i różnych technik związanych z Kaskadowymi arkuszami stylów.

Blokowy kontekst formatowania (ang. block formatting context)

Sposób rozmieszczenia w poziomie pól blokowych na stronie. Pola takie obsługują zarówno poziome jak i pionowe ustawienia marginesów, obramowania i dopełnienia.

Element niezastępowany (ang. non-replaced element)

Element, który nie jest zastępowany, czyli taki, o którego sposobie prezentacji decydują arkusze stylów CSS.

Element zastępowany (ang. replaced element)

Element, którego zawartość nie podlega modelowi formatowania CSS, na przykład obraz graficzny (element img) albo film wideo (element video). Nazwa element zastępowany odnosi się do tego, że dany element zostaje zastąpiony na stronie treścią, którą reprezentuje.

Element źródłowy (ang. originating element)

Pseudoelement, do którego odnosi się inny pseudoelement zwany podpseudoelementem.

Instrukcja (ang. statement)

Instrukcją w CSS może być reguła @ lub zestaw reguły.

Instrukcja (ang. statement)

W CSS instrukcją jest blok określający reguły formatowania. Są dwa rodzaje instrukcji: zwykłe reguły i reguły @.

Konspekt dokumentu (ang. document outline)

Struktura złożona z tytułów ważnych elementów strukturalnych dokumentu, takich jak nagłówki, tytuły tabel, tytuły formularzy i inne ważne składniki treści.

Kontekst formatowania

Zestaw zasad obowiązujących elementy oraz decydujących o sposobie ich zachowania w określonych warunkach. Zobacz także Blokowy kontekst formatowania i Śródliniowy kontekst formatowania.

Kontekst stosowy (ang. stacking context)

Koncepcja rozmieszczenia elementów HTML na wirtualnej osi z określająca, które z nachodzących na siebie elementów są widoczne, a które są przesłonięte. Do określania miejsca elementu w kontekście stosowym służy własność z-index.

Obszar widoku (ang. viewport)

Obszar okna, np. przeglądarki, na którym jest wyrenderowany dokument HTML Jeśli jest mniejszy niż rozmiar dokumentu, przeglądarka wyświetla paski przewijania.

Podpseudoelement (ang. sub-pseudo-element)

Pseudoelement, który odnosi się do innego pseudoelementu.

Pole (ang. box)

Dla każdego elementu obecnego w drzewie dokumentu HTML w CSS jest generowane prostokątne pole (zwane też blokiem albo pudełkiem), którego właściwości określa model blokowy (nazywany też pudełkowym, choć bardziej poprawnie byłoby go nazywać modelem polowym).

Pole blokowe (ang. block box)

Prostokątne pole generowane w CSS dla blokowych elementów obecnych w drzewie dokumentu HTML. Należy do blokowego kontekstu formatowania. Elementy takie są układane jeden nad drugim w kolejnych wierszach na stronie.

Pole liniowe (ang. line box)

Prostokątne pole generowane w CSS dla każdego wiersza treści śródliniowej w dokumencie HTML. Należy do śródliniowego kontekstu formatowania. Poniższa ilustracja przedstawia różnicę między polem śródliniowym i liniowym.

Pole śródliniowe (ang. inline box)

Prostokątne pole generowane w CSS dla śródliniowych elementów obecnych w drzewie dokumentu HTML. Należy do śródliniowego kontekstu formatowania. Elementy takie są układane obok siebie w kolejnych wierszach na stronie.

Położenie statyczne (ang. static position)

Normalne położenie elementu wśród innych elementów, czyli niezmienione za pomocą jakichkolwiek własności pozycjonowania.

Reguła @ (ang. at rule lub @ rule)

Specjalny rodzaj instrukcji określający sposób zachowania CSS w określonej sytuacji.

Rozmiar pochodzenia wewnętrznego (ang. intrinsic size)

Rozmiar ustalony głównie na podstawie wymiarów treści elementu, bez względu na jakiekolwiek czynniki zewnętrzne. W przypadku obrazów graficznych na przykład rozmiarem wewnętrznym są wymiary naturalne obrazu.

Rozmiar pochodzenia zewnętrznego (ang. extrinsic size)

Rozmiar ustalony na podstawie zewnętrznego kontekstu elementu. Jeśli na przykład szerokość elementu div zostanie ustawiona na 50%, to szerokość tego elementu będzie uzależniona od szerokości jego bloku zawierającego, a więc będzie miała pochodzenie zewnętrzne.

Słowa kluczowe kierunków fizycznych (ang. physical directions keywords)

Słowa kluczowe określające kierunki w odniesieniu do krawędzi okna przeglądarki: top, right, bottom i left.

Słowa kluczowe kierunków logicznych (ang. logical directions keywords)

Słowa kluczowe określające kierunki w odniesieniu do kierunku i orientacji tekstu: inline-end, inline-start, block-end, block-start.

Słowo kluczowe (ang. keyword)

Słowa kluczowe w CSS to specjalne wartości, które można przypisywać własnościom, np. green jest słowem kluczowym oznaczającym kolor zielony. Słowa kluczowe wpisuje się bez jakichkolwiek cudzysłowów.

Specyfikacja CSS (ang. CSS specification)

Dokument opisujący technologię CSS. Specyfikacje CSS 1 i CSS 2 były pojedynczymi dokumentami. Później specyfikację CSS podzielono na mniejsze moduły, którym są nadawane kolejne numery, np. „Selektory CSS3”, „Kolory CSS3” itd.

Śródliniowy kontekst formatowania (ang. inline formatting context)

Sposób rozmieszczenia w poziomie pól śródliniowych na stronie. Pola takie obsługują tylko poziome ustawienia marginesów, obramowania i dopełnienia.

Treść (ang. content)

Zawartość elementu w stanie obecnym w dokumencie HTML. Nie wszystkie elementy mają treść, np. element img jest tzw. elementem pustym, czyli nie posiadającym treści w dokumencie.

Treść wyrenderowana (ang. rendered content)

Treść elementu po zastosowaniu do niej arkuszy stylów i zaprezentowaniu jej w środowisku docelowym, np. na ekranie monitora komputerowego.

Tryb rozmieszczenia elementów (ang. layout mode)

Sposób rozmieszczenia elementów na stronie internetowej według określonego zestawu reguł. Wyróżnia się następujące tryby rozmieszczenia elementów:

• Układ normalny (ang. normal flow)
• Układ tabelaryczny (ang. table layout)
• Układ pozycjonowany (ang. positioned layout)
• Układ wielokolumnowy (ang. multi-column layout)
• Układ elastyczny (ang. flexible layout, flexbox)
• Układ siatkowy (ang. grid layout)

Układ normalny (ang. normal flow)

Układ normalny elementów na stronie internetowej to ich rozmieszczenie zgodnie z ogólnymi zasadami rządzącymi elementami blokowymi i śródliniowymi. Umiejscowienie każdego elementu w odniesieniu do sąsiednich elementów jest określane na podstawie jego położenia w kodzie źródłowym.

Wartość globalna (ang. global value)

Wartość, która może być przypisana każdej własności CSS.

Własność dziedziczona (ang. inherited property)

Własność CSS, której ustawienia dla danego elementu są przejmowane także przez jego elementy potomne.

Własność indywidualna (ang. longhand property)

Własność CSS umożliwiająca ustawienie tylko jednej właściwości, np. padding-left ustawia szerokość dopełnienia tylko z lewej strony.

Własność niedziedziczona (ang. non-inherited property)

Własność CSS, której ustawienia dla danego elementu nie są przejmowane przez jego elementy potomne.

Wartość początkowa (ang. initial value)

Wartość nadawana własności automatycznie, kiedy nie zostanie zdefiniowana przez autora arkusza stylów. Inaczej można ją nazwać wartością domyślną.

Własność zbiorcza lub własność skrótowa (ang. shorthand rule)

Własność CSS umożliwiająca zdefiniowanie ustawień dla kilku innych własności na raz, np. padding pozwala na ustawienie szerokości dopełnienia z wszystkich czterech stron jednocześnie.

Zestaw reguły lub reguła (ang. rule set lub rule)

Zestaw reguły składa się z selektora i bloku deklaracji.

Fizyczne i logiczne własności CSS

Wszystkie własności CSS związane z kierunkami (takie jak marginesy, dopełnienie czy obramowanie) zdefiniowane w dwóch pierwszych specyfikacjach CSS (CSS 1 i CSS 2.1) to tzw. własności fizyczne (ang. physical properties), a więc odnoszące się do fizycznych właściwości strony internetowej oraz niezależne od kierunku i orientacji pisma dokumentu.

We własnościach tych posługujemy się kierunkowymi słowami kluczowymi top, right, bottom i left, oznaczającymi odpowiednio górną, prawą, dolną i lewą krawędź elementu, strony, okna przeglądarki itd.

Kiedy piszemy np. border-top, to odnosimy się do górnej krawędzi obramowania w sensie fizycznym, czyli w kontekście okna naszej przeglądarki. Górna krawędź obramowania elementu to ta, która znajduje się najbliżej górnej krawędzi okna, prawy margines elementu znajduje się najbliżej prawej krawędzi okna, w którym ten element się znajduje itd.

Na świecie jednak istnieją różne systemy pisma, na przykład w kierunku od lewej do prawej, w którym tekst jest uporządkowany w linie ułożone jedna nad drugą (obowiązujący m.in. w języku polskim, angielskim, francuskim i wielu innych), system pisma w kierunku od prawej do lewej, w którym tekst jest uporządkowany w linie ułożone jedna nad drugą (obowiązujący m.in. w języku hebrajskim), czy pionowy system pisma z góry na dół, w którym kolumny są ułożone od prawej do lewej (obowiązujący m.in. w języku japońskim).

W efekcie takie pojęcia, jak początek elementu, początek tekstu, początek wiersza, koniec strony, koniec wiersza itd. mają różne znaczenie w zależności od kierunku i orientacji tekstu. Na przykład, w polskim tekście początek elementu znajduje się przy jego lewej krawędzi fizycznej, natomiast w tekście arabskim początek elementu znajduje się przy jego prawej krawędzi fizycznej.

Jeśli więc przykładowo zdefiniujemy lewą krawędź obramowania akapitów za pomocą deklaracji CSS border-left: 5px solid red;, to w tekście polskim będzie się ona znajdowała „z przodu” akapitów, natomiast w tekście hebrajskim będzie się znajdowała „z tyłu” akapitów.

Dlatego oprócz własności fizycznych wprowadzono także tzw. własności logiczne (ang. logical properties lub flow-relative properties), które nie odnoszą się do kierunków fizycznych, tylko do logicznych właściwości tekstu, czyli jego kierunku i orientacji (określanych przez własności CSS writing-mode, direction i text-orientation).

Za pomocą tych własności także możemy ustawiać właściwości elementów ze wszystkich stron, ale ich znaczenie może się zmieniać zależnie od właściwości pisma dokumentu, tzn. czy jest to tekst pisany od góry, czy od dołu oraz czy jest pisany od prawej strony, czy od lewej itd.

We własnościach tych nie posługujemy się słowami kluczowymi kierunków fizycznych top, right, bottom i left, tylko pojęciami orientacji blokowej (ang. block direction) i orientacji śródliniowej (ang. inline direction). Są to pojęcia logiczne, a więc zmieniające znaczenie w zależności od kierunku i orientacji tekstu. Spójrz na poniższy rysunek.

Jak widać na tej ilustracji, w tekście pisanym od lewej do prawej i od góry do dołu, początek tekstu (początek w orientacji śródliniowej) znajduje się po lewej stronie. Natomiast w tekście pionowym, pisanym od prawej do lewej, początek tekstu znajduje się przy krawędzi górnej elementu, a jego koniec – przy krawędzi dolnej elementu.

Własności logiczne mają własny zestaw kierunkowych słów kluczowych – block-start (początek w orientacji blokowej) block-end (koniec w orientacji blokowej), inline-start (początek w orientacji śródliniowej) oraz inline-end (koniec w orientacji śródliniowej) – które zastępują słowa kluczowe kierunków fizycznych top, right, bottom i left.

Jeśli więc na przykład chcemy zdefiniować szerokość, styl i kolor krawędzi obramowania na początku elementu w orientacji blokowej (która jest krawędzią górną w przypadku tekstu w języku polskim), napiszemy następujące deklaracje CSS (można też użyć własności skrótowej border-block-start):

border-block-start-width: 10px;
border-block-start-style: solid;
border-block-start-color: green;

Interpretacja tych deklaracji przez przeglądarkę będzie różna w zależności od kierunku i orientacji tekstu, do którego je zastosujemy, np.:

#polski {
  border-block-start-width: 10px;
  border-block-start-style: solid;
  border-block-start-color: green;
  writing-mode: horizontal-lr;
}
#japonski {
  border-block-start-width: 10px;
  border-block-start-style: solid;
  border-block-start-color: green;
  writing-mode: vertical-rl;
}
...
<span id="polski">Lorem ipsum dolor sit amet.</span>
<span id="japonski">Lorem ipsum dolor sit amet.</span>

Deklaracja własności writing-mode w pierwszej regule definiuje tekst poziomy pisany od lewej do prawej, a jej deklaracja w drugiej regule definiuje tekst pionowy pisany od prawej do lewej. Mimo że wszystkie pozostałe ustawienia są w obu przypadkach identyczne, w pierwszym zielona krawędź obramowania pojawiła się na górze, a w drugim – po prawej stronie elementu. Spójrz na poniższe zrzuty ekranu.

Innymi słowy, kiedy na przykład piszemy border-block-start, to odnosimy się do krawędzi obramowania znajdującej się na początku elementu w orientacji blokowej. W przypadku języków pisanych od lewej strony i od góry (takich jak polski), własność ta odpowiada własności border-top. A w przypadku języków pisanych od dołu i od prawej odpowiada ona własności border-right.

W analogiczny sposób można utworzyć nazwy wszystkich pozostałych własności logicznych, tzn. przez zastąpienie słów kluczowych kierunków fizycznych słowami kluczowymi kierunków logicznych. W poniższej tabeli znajduje się przykładowe zestawienie indywidualnych fizycznych i logicznych własności do definiowania szerokości obramowania (własności znajdujące się w tych samych wierszach nie odpowiadają sobie w sposób ścisły – pamiętaj, że znaczenie własności logicznych zależy od kierunku i orientacji tekstu).

Bardziej szczegółowe informacje na temat konkretnych własności fizycznych i logicznych znajdują się na poświęconych im stronach.

Specyfikacje CSS

Ciałem zajmującym się opracowywaniem specyfikacji CSS jest organizacja W3C, która publikuje je wszystkie na swoich stronach internetowych.

W przeszłości specyfikacje CSS stanowiły pojedyncze dokumenty. Tak było w przypadku CSS 1 i CSS 2. Później technologia rozrosła się na tyle, że postanowiono podzielić ją na wiele modułów opisujących jej określone wycinki. W ten sposób powstały specyfikacje oznaczane numerami CSS3, CSS4, CSS5 itd.

Na przykład w specyfikacji CSS 2.1 opis selektorów znajdował się w rozdziale 5, a opis modelu polowego można było znaleźć w rozdziale 8. Obecnie te elementy technologii CSS są opisane w samodzielnych modułach CSS – odpowiednio Selectors Level 3 i CSS Box Model Module Level 3.

Sam język CSS nie ma już określonego numeru powyżej 3. Kolejne numery nadawane są tylko coraz to nowszym specyfikacjom opisującym wybrany aspekt. Trwają na przykład prace nad specyfikacjami Media Queries Level 4 i Media Queries Level 5, ale są jeszcze we wczesnej fazie rozwoju.

Stopnie dojrzałości specyfikacji

Przede wszystkim należy podkreślić, że specyfikacje publikowane na stronach W3C są przeznaczone przede wszystkim dla twórców przeglądarek, nie dla twórców stron internetowych. Dlatego zawarte w nich opisy są bardzo szczegółowe i wyczerpujące. Korzystając z nich, należy uważać, ponieważ nie opisują one aktualnego stanu implementacji technik w przeglądarkach, a jedynie to, jak te techniki powinny poprawnie działać.

W3C stosuje specjalny proces tworzenia specyfikacji CSS, oparty na kilku etapach „dojrzewania” dokumentu. Poniżej są one wymienione od najwcześniejszego. Rekomendacja (ang. Reccomendation) to ukończony i zatwierdzony przez odpowiednie ciała i członków W3C dokument, który już nie podlega dalszym modyfikacjom. Natomiast Zastąpiona rekomendacja (ang. Superseded Recommendation) to dokument, który zastąpiono nowszą wersją.

• First Public Working Draft (FPWD) – pierwszy publiczny szkic roboczy
• Working Draft (WD) – Szkic roboczy
• Candidate Recommendation (CR) – Kandydat do rekomendacji
• Candidate Recommendation Draft (CRD) – Szkic kandydata do rekomendacji
• Proposed Recommendation (PR) – Propozycja rekomendacji
• Recommendation (REC) – Rekomendacja
• Superseded Recommendation (SPSD) – Zastąpiona rekomendacja

Migawki

Jeśli chcesz poznać aktualny stan wszystkich specyfikacji składających się na technologię Kaskadowych arkuszy stylów, najlepiej jest przeczytać najnowszy dokument zwany Migawką (ang. Snapshot), który można znaleźć na stronie https://www.w3.org/Style/CSS/current-work, która dodatkowo zawiera także listę wszystkich specyfikacji CSS, nad którymi obecnie trwają prace.

Ponadto pod adresem https://www.w3.org/Style/CSS/all-properties.en.html znajduje się lista prawie wszystkich istniejących własności CSS. Na stronie jest napisane, że może brakować niektórych własności ze szkiców edytorskich, a więc takich, nad którymi prace są na bardzo wczesnym etapie.

Obsługa błędów w CSS

W CSS obowiązuje ogólna zasada, która polega na tym, że nieprawidłowe lub nieznane fragmenty kodu są ignorowane. Dzięki temu, jeśli w przyszłości zostaną dodane jakieś własności lub wartości do CSS, starsze przeglądarki po prostu zignorują tylko te fragmenty, których nie będą rozpoznawać, a resztę zinterpretują poprawnie. Spójrz na poniższe przykłady:

p {duration: 15seconds; padding: 10px;} /* Pierwsza deklaracja zostanie zignorowana, ponieważ jest nieznana, druga zostanie normalnie zastosowana */

p {font-size: 10pixels; padding: 10px;} /* Nieznana jednostka – pierwsza deklaracja zostanie zignorowana, następna zostanie zinterpretowana normalnie

p {color: "green"} /* Słowa kluczowe nie mogą znajdować się w cudzysłowie – deklaracja zostanie zignorowana */

p { padding: 10px; padding; } /* Druga deklaracja zostanie zignorowana i dopełnienie będzie wynosiło 10 pikseli */

Inaczej dzieje się w przypadku, gdy nie zostanie dokończona ostatnia reguła w arkuszu stylów. Wówczas przeglądarka powinna sama ją dokończyć i poprawnie zinterpretować, np.:

p {color: red

p {color: red}

A teraz spójrz na poniższy przypadek:

p {color: red
p {color: green}

Ponieważ niedokończona reguła nie jest ostatnia, przeglądarka zignoruje je obie – zignorowane zostałyby wszystkie reguły do końca arkusza.

Ponadto, jeśli w arkuszu stylów znajdzie się niezamknięty łańcuch (wartość w cudzysłowie pojedynczym lub podwójnym), przeglądarka zignoruje deklarację zawierającą ten łańcuch i następną, np.:

p {
  margin: 20px;
  font-family: 'Times New Roman
  margin: 30px;
}

W tym przypadku elementy p będą miały margines o szerokości 20 pikseli, ponieważ druga deklaracja własności margin zostanie zignorowana jako „część” błędnej deklaracji font-family.