Źródła stylów#
Import stylów#
@import "ścieżka do pliku CSS";
lub
@import url(ścieżka do pliku CSS);
Reguły stylów można importować bezpośrednio z jednego arkusza CSS do drugiego. Służy do tego specjalna reguła @import, która może występować w dowolnej ilości w arkuszach zewnętrznych, wewnętrznych i użytkownika. W pewnym sensie przypomina ona znacznik <link>, z tą jednak różnicą, że tworzenie za jej pomocą stylów alternatywnych nie jest możliwe.
Wszystkie deklaracje @import muszą poprzedzać pozostałe reguły małp i reguły stylów danego arkusza (z wyjątkiem dyrektywy @charset, która jeśli się pojawia, to musi być pierwszą rzeczą w arkuszu stylów). Bez spełnienia tych warunków importowanie stylów nie zadziała.
Z akademickiego punktu widzenia składnia reguły @import wygląda następująco:
<import-rule> = @import [ <url> | <string> ] <media-query-list>? ;
W przypadku stosowania wariantu z wartością <string> musi ona zostać zinterpretowana jak adres URL o tej samej wartości.
Prosty przykład:
<head>
<style type="text/css">
/* Adresy względne (komentarz w tym miejscu jest dopuszczalny) */
@import "mystyle1.css";
@import url("mystyle1.css");
/* Adresy bezwzględne */
@import "http://www.test.com/mystyle2.css";
@import url("http://www.test.com/mystyle2.css");
body: {color: blue;}
h1: {background: white;}
</style>
<head>Jeśli reguła @import odwołuje się do błędnego arkusza CSS, to aplikacje klienckie muszą traktować zawartość tego arkusza tak, jakby była ona umieszczona w miejscu reguły @import. Każda nieprawidłowość w regule potraktowana zostanie zgodnie z mechanizmem obsługi błędów CSS. Także deklaracje z zaimportowanych arkuszy stylów oddziałują z kaskadą tak, jakby zostały dosłownie wpisane do arkusza w punkcie @import.
Reguła @import może być zależna od typu docelowego medium; zależność ta wyrażana jest za pomocą listy oddzielonych przecinkami zapytań medialnych (media queries), umieszczanych za URI, określających dla których mediów import arkuszy stylów zostanie wykonany. W przypadku braku jakiegokolwiek zapytania medialnego, import jest bezwarunkowy (unconditional) - ten sam efekt daje deklaracja all.
Przetwarzanie i pełna składnia wyrażeń umieszczanych za adresem URL jest definiowana przez specyfikację "Media Queries". Jeśli zapytanie o media pozostaje niedopasowane, to reguły z importowanego arkusza stylów nie są aplikowane - odbywa się to na podobnej zasadzie, jak umieszczenie importowanego arkusza w bloku @media z podanymi typami mediów. Aplikacje klienckie mogą zatem uniknąć pobierania importowanych arkuszy CSS zależnych od mediów tak długo, jak zapytanie o media jest niepasujące.
Prosty przykład:
<head>
<style type="text/css">
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
</style>
<head>Kiedy ten sam arkusz stylów jest importowany lub dołączany do dokumentu w wielu miejscach, to aplikacje klienckie muszą przetworzyć każdy link tak, jakby wskazywał na osobny arkusz stylów. To nie stawia żadnych wymagań względem pobierania zasobów, definiuje jedynie, jak arkusz stylów będzie odzwierciedlany w strukturze obiektowej (CSSOM). Programy używające buforowania mogłyby pobrać arkusz stylów tylko raz, nawet jeśli zostałby on dołączony lub zaimportowany wiele razy.
Pochodzenie importowanego arkusza stylów (wskazywanego przez regułę @import) jest takie samo, jak pochodzenie importującego arkusza stylów (zawierającego regułę @import).
Typ zawartości#
Przetwarzanie importowanych arkuszy stylów zależy od aktualnego typu zawartości (Content-Type) linkowanego zasobu, czyli od potocznie zwanego typu MIME. Jeśli źródło nie posiada metadanych o typie zawartości (Content-Type metadata), lub też host dokumentu jest w trybie Quirks i ma identyczne pochodzenie (same origin) jak importowany arkusz stylów, to typem dla linkowanego zasobu jest text/css. W przeciwnym razie typ jest określany za pomocą metadanych o typie zawartości.
Jeśli typem linkowanego zasobu jest text/css, to musi on zostać zinterpretowany jak arkuszy stylów CSS. W przeciwnym razie musi być traktowany jak błąd sieciowy (network error).
Podsumowanie#
W większości przypadków import arkuszy stylów jest niezalecany. Każda reguła @import tworzy dodatkowe żądanie HTTP, które negatywnie wpływa na szybkość wczytywanej strony. Raczej dąży się do jak najmniejszej liczby połączeń HTTP, dlatego w przypadku kodu produkcyjnego z dużą liczbą importowanych arkuszy CSS najlepiej połączyć je w jeden większy plik.
Z praktycznego punktu widzenia import arkuszy stylów był wykorzystywany do omijania problemów w starszych przeglądarkach. Wiele z nich nie potrafiło przetwarzać różnych wariantów dyrektywy @import, co można było wykorzystać do ukrycia stylów przed takimi programami (więcej). Odsetek wiekowych programów z każdym rokiem staje się mniejszy, dlatego większość podobnych tricków traci już na znaczeniu.