Źródła stylów#

Styl zewnętrzny#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<head>
...
	<link rel="stylesheet" type="text/css" href="ścieżka do pliku CSS">
...
</head>

Każdą stronę HTML i XML można połączyć z zewnętrznym arkuszem stylów (external style sheets), którego reguły znajdować się będą w specjalnym pliku tekstowym. Plik ten musi być wysłany przez serwer z typem MIME w postaci text/css, dzięki czemu przeglądarka wie, że ma do czynienia z arkuszem CSS. Zazwyczaj wystarczy zastosować dla pliku rozszerzenie .css, chociaż nie jest to konieczne i w razie potrzeby może zostać zmodyfikowane w ustawieniach serwera.

Spoiwem łączącym dokument z zewnętrznym arkuszem stylów jest znacznik <link> (tzw. relacja), którego działanie omówiłem w kursie HTML 4.01 (dział "Szkielet dokumentu - Relacja"). Znacznik ten umieszczamy wewnątrz nagłówka dokumentu (<head>...<head>), w dowolnej ilości, przykładowo:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<link rel="stylesheet" href="style.css" title="Domyślny styl" type="text/css">
<link rel="alternate stylesheet" href="styleblue.css" title="Błękitny styl" type="text/css">
<link rel="alternate stylesheet" href="stylered.css" title="Czerwony styl" type="text/css">
<link rel="stylesheet" href="styledruk.css" title="Do druku" media="print" type="text/css">

W HTML5 podawanie atrybutu type="text/css" wewnątrz znacznika <link> nie jest już konieczne.

Zewnętrzne arkusze stylów tak naprawdę dzielą się na trzy rodzaje:

Jest między nimi zauważalna różnica, dlatego ich szczegółową specyfikę omówię nieco niżej.

Należy pamiętać, że zewnętrzny arkusz stylów może zawierać jedynie reguły zgodne ze składnią CSS (bez HTML-a czy XHTML-a). Obecność języka znaczników (lub dowolnej treści niezgodnej ze składnią CSS) może spowodować, że jego część - bądź nawet całość - zostanie zignorowana.

Oto przykładowa prawidłowa zawartość takiego pliku:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
/* Moje reguły */
h1 {color: red;}
h2 {color: green; background: white;}
h3 {font: italic 2em Times, serif;}

Ten sam arkusz stylów można zastosować do wielu różnych mediów, wystarczy w atrybucie media podać ich nazwy rozdzielone przecinkiem. Warto pamiętać, że większość typów mediów podawana w specyfikacji CSS nie jest obsługiwana przez żadną przeglądarkę internetową. Trzema obsługiwanymi najczęściej typami są all, screen i print. Jedynie Opera (wersja 12.x) wspiera również typ projection, co pozwala na prezentowanie dokumentu w formie pokazu slajdów.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="style-extended.css" type="text/css">
<link rel="stylesheet" href="style-print.css" media="print" type="text/css">
<link rel="stylesheet" href="style-visual.css" media="screen, projection" type="text/css">

Deklaracja kilku arkuszy stylów dla tego samego medium spowoduje, że przeglądarka załaduje wszystkie te arkusze i połączy w nich zawarte reguły, a końcowy rezultat zastosuje w dokumencie (zasada tego łączenia opiera się na kaskadowości i dziedziczeniu).

Styl alternatywny#

Pewną odmianę stylów zewnętrznych stanowią alternatywne arkusze stylów # (alternate style sheets). Są one deklarowane poprzez ustawienie wartości atrybutu rel na wartość "alternate stylesheet". Wówczas użytkownik sam decyduje, którą wersję ma zamiar stosować na naszej witrynie (wybór w opcjach przeglądarki).

Jeśli przeglądarka potrafi obsłużyć alternatywne arkusze stylów, to wartości atrybutu title w elementach link posłużą do wygenerowania listy alternatywnych możliwości wyboru. Deklaracja atrybutu title dla alternatywnych arkuszy stylów jest obowiązkowa, warto także nadawać mu sensowne i unikalne opisy - stanowić to będzie ułatwienie dla użytkowników strony przy wyborze/zmianie poszczególnych wersji.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!-- Styl podstawowy (deklaracja title jest zbędna) -->
<link rel="stylesheet" href="style-default.css" type="text/css">

<!-- Style alternatywne -->
<link rel="alternate stylesheet" href="style-blue.css" title="Niebieski styl" type="text/css">
<link rel="alternate stylesheet" href="style-green.css" title="Zielony styl" type="text/css">

Mechanizm alternatywnych arkuszy stylów występuje w przeglądarkach bazujących na silniku Gecko (np. Firefox), jak również w Operze (wersja 12.x). W przypadku pozostałych programów należałoby zaimplementować analogiczne rozwiązanie przy użyciu nowoczesnych technik webowych.

Mechanizm obsługi alternatywnych arkuszy stylów w przeglądarce Firefox i Opera

Rysunek. Mechanizm obsługi alternatywnych arkuszy stylów w przeglądarce Firefox i Opera

Możliwe jest także grupowanie alternatywnych arkuszy stylów razem poprzez nadanie im tej samej wartości w atrybucie title. Dzięki temu użytkownik może na przykład wybrać inny sposób prezentacji dla atrybutu media ustawionego na screen oraz print.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!-- Pierwsza grupa dla tytułu "Domyślny" -->
<link rel="stylesheet" href="style.css" title="Domyślny" type="text/css">
<link rel="stylesheet" href="style-print.css" title="Domyślny" media="print" type="text/css">

<!-- Druga grupa dla tytułu "Wielki Tekst" -->
<link rel="alternate stylesheet" href="bigtext.css" title="Wielki Tekst" type="text/css">
<link rel="alternate stylesheet" href="bigtext-print.css" title="Wielki Tekst" media="print" type="text/css">

W naszym przykładzie, kiedy czytelnik wybierze opcję "Wielki Test" poprzez mechanizm wyboru alternatywnego arkusza stylów, to plik bigtext.css zostanie zastosowany do ustawienia stylów dokumentu w medium screen, natomiast bigtext-print.css zostanie użyty w medium print. Po przeprowadzonej zmianie ani style.css, ani style-print.css nie zostaną wykorzystane w żadnym medium.

Zachowanie to warto omówić nieco dokładniej. Kiedy w elemencie link z atrybutem rel (posiadającym wartość stylesheet) umieści się atrybut title, to taki arkusz stylów staje się preferowanym arkuszem stylów # (preferred style sheets). Oznacza to, że jego użycie jest preferowane w stosunku do alternatywnych arkuszy stylów i będzie on automatycznie aplikowany, kiedy dokument zostanie wyświetlony pierwszy raz. Po wybraniu alternatywnego arkusza stylów przez użytkownika reguły z arkusza preferowanego nie będą już stosowane.

Co więcej, jeśli określi się kilka arkuszy stylów jako preferowane, to wszystkie z wyjątkiem jednego zostaną zignorowane.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<link rel="stylesheet" href="style1.css" title="Domyślny układ" type="text/css">
<link rel="stylesheet" href="style2.css" title="Domyślny tekst" type="text/css">
<link rel="stylesheet" href="style3.css" title="Domyślne kolory" type="text/css">

Wszystkie trzy deklaracje CSS odnoszą się do preferowanych arkuszy stylów, na skutek użycia atrybutu title, ale tylko jeden z nich zostanie użyty w ten sposób. Pozostałe dwa zostaną całkowicie zignorowane (choć możliwość ręcznego ich wyboru będzie możliwa). Które to będą? Nie można mieć pewności w tej kwestii, zazwyczaj brany pod uwagę jest pierwszy z nich (w naszym przykładzie style1.css), a wszystkie pozostałe są pomijane.

Wreszcie, co się stanie, kiedy nie nada się arkuszowi stylów żadnego tytułu ani alternatywnego charakteru? W takiej sytuacji staje się on trwałym arkuszem stylów # (persistent style sheets) i jest zawsze wykorzystywany do wyświetlania dokumentu, nawet jeśli dołączony jest preferowany arkusz stylów lub kiedy użytkownik wybierze jakiś alternatywny arkusz stylów.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!-- Reguły będą stosowane zawsze (niezależnie od zmiany arkusza CSS na inny) -->
<link rel="stylesheet" href="style1.css"">
<link rel="stylesheet" href="style2.css">

<!-- Reguły będą stosowane w zależności od wyboru arkusza (domyślnie wybrany będzie style3.css) -->
<link rel="stylesheet" href="style3.css" title="Arkusz preferowany" type="text/css">
<link rel="alternate stylesheet" href="style4.css" title="Arkusz alternatywny 1" type="text/css">
<link rel="alternate stylesheet" href="style5.css" title="Arkusz alternatywny 2" type="text/css">

Cały ten opis wyglądać może na bardzo skomplikowany, ale w praktyce najczęściej korzysta się z arkusza trwałego. Mechanizmy alternatywnych skórek zazwyczaj implementuje się samodzielnie, wystarczy podstawowa znajomość JS i DOM, przez co zapewnimy sobie kompatybilność z dowolnymi przeglądarkami.

Podsumowanie#

Style zewnętrzne to najpopularniejsza i najwłaściwsza metoda stosowania reguł CSS. Jeden i ten sam arkusz stylów może być współdzielony przez dowolną liczbę dokumentów, przez co wprowadzane korekty będą odzwierciedlane na wszystkich stronach. Dzięki temu oszczędzamy swój własny czas jak i czas czytelników, gdyż przeglądanie witryny będzie wymagało pobrania mniejszej ilości danych. Pliki CSS zazwyczaj są cache'owane przez przeglądarki, co jeszcze bardziej zwiększa użyteczność omawianego rozwiązania.

W przypadku bardzo rozbudowanego pliku CSS warto rozważyć, czy nie podzielić go na mniejsze części (kolejne pliki CSS). Może to znacznie ułatwić przyszłą rozbudowę takiego formatowania. Oczywiście przed umieszczeniem projektu na docelowym serwerze wypadałoby wszystkie pliki z powrotem połączyć w jeden, co wyeliminuje zbędne żądania HTTP. Cały proces można zautomatyzować gotowymi narzędziami lub własnymi skryptami.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Źródła stylów (H1) Styl zewnętrzny (H2) Styl alternatywny (H3) Podsumowanie (H3)