logo-w3c
1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek (nikt jeszcze nie ocenił tego wpisu)
Loading ... Loading ...

Specyfikacja CSS 2.1 — informacje

1.1 CSS 2.1 a CSS 2

Społeczność CSS zgromadziła bogate doświadczenia dotyczące stosowania technologii CSS 2 od chwili, gdy stała się ona rekomendacją w 1998 r. Znalezione błędy zostały poprawione w opublikowanych erratach. Nie było jednak do tej pory okazji do zmiany specyfikacji na podstawie zdobytej wiedzy.

Mimo że wiele z tych problemów zostanie rozwiązanych w mającej się ukazać w przyszłości specyfikacji CSS 3, aktualny stan rzeczy utrudnia implementowanie i negatywnie wpływa na interoperacyjność CSS 2. Specyfikacja CSS 2.1 stanowi próbę wyjścia z tej sytuacji poprzez:

  • Zachowanie zgodności z tymi częściami specyfikacji CSS 2, które są szeroko akceptowane i implementowane.
  • Uwzględnienie wszystkich opublikowanych poprawek do CSS 2.
  • W rażących przypadkach niezgodności implementacji ze specyfikacją, modyfikowanie specyfikacji, aby odpowiadała powszechnie przyjętym praktykom.
  • Usunięcie funkcji CSS 2, które nie doczekały się implementacji, a więc zostały odrzucone przez społeczność CSS. Celem specyfikacji CSS 2.1 jest wskazanie funkcji CSS, które są dość chętnie implementowane dla języka HTML i ogólnie języków z grupy XML (a nie tylko dla konkretnego języka z grupy XML lub tylko języka HTML).
  • Usunięcie funkcji CSS 2, które zostaną odrzucone w CSS 3 zachęcając do przyjmowania proponowanych funkcji CSS 3 w ich miejscu.
  • Dodanie (bardzo) małej liczby nowych wartości własności, gdy implementacja wykazała, że są one potrzebne do zaimplementowania CSS 2.

Zatem, podczas gdy arkusz stylów zgodny z CSS 2 nie musi być zgodny z CSS 2.1, arkusz stylów zawierający tylko funkcje CSS 2.1 ma większe szanse na znalezienie zgodnej aplikacji klienckiej i zachować zgodność z przyszłymi aplikacjami. Mimo że łamanie zasady zgodności z przyszłymi wersjami jest niezalecane, uznaliśmy, że korzyści płynące z poprawek wniesionych w CSS 2.1 są tego warte.

Specyfikacja CSS 2.1 powstała na bazie specyfikacji CSS 2 i zastępuje ją. Niektóre części specyfikacji CSS 2 pozostały w CSS 2.1 niezmienione, niektóre zmodyfikowane a część została usunięta. Usunięte części mogą zostać wykorzystane w przyszłości w CSS 3. Przyszłe specyfikacje powinny odnosić się do CSS 2.1 (jeśli nie dotyczą funkcji z CSS 2, które zostały pominięte w CSS 2.1 - wówczas odwołania do specyfikacji CSS 2 powinny ograniczać się tylko do tych funkcji lub (preferowane rozwiązanie) odwoływać się do takich funkcji w odpowiednim module CSS 3, który je zawiera).

1.2 Czytanie specyfikacji

Ten podrozdział nie jest normatywny.

Niniejsza specyfikacja została napisana pod kątem dwóch rodzajów odbiorców: autorów CSS oraz implementatorów CSS. Mamy nadzieję, że specyfikacja ta dostarczy autorom narzędzi potrzebnych do tworzenia wydajnych, atrakcyjnych oraz szeroko dostępnych dokumentów, bez potrzeby zagłębiania się w szczegóły dotyczące implementacji CSS. Implementatorzy natomiast powinni znaleźć tutaj wszystko, czego potrzebują do tworzenia zgodnych z CSS aplikacji klienckich. Niniejszą specyfikację rozpoczyna ogólna prezentacja CSS. Dalsze rozdziały są coraz bardziej szczegółowe i techniczne. Interesujące informacje można szybko odnaleźć dzięki ułatwiającemu nawigację ogólnemu spisowi treści i szczegółowym spisom treści na początku każdego rozdziału oraz indeksowi, które dostępne są zarówno w wersji elektronicznej jak i drukowanej.

Niniejsza specyfikacja została napisana pod kątem dwóch rodzajów prezentacji: elektroniczna i drukowana. Mimo wielu podobieństw pomiędzy obiema wersjami, dokumenty te nie są identyczne. Na przykład, w wersji drukowanej oczywiście nie działają odnośniki hipertekstowe, a w wersji elektronicznej brak numerowania stron. W przypadku rozbieżności jako wersję ostateczną traktuje się wersję elektroniczną dokumentu.

1.3 Organizacja specyfikacji

Ten podrozdział nie jest normatywny.

Specyfikacja została podzielona na następujące części:

Rozdział 2: Wprowadzenie do CSS 2.1
Wprowadzenie zawiera krótki kurs CSS 2.1 oraz opis zasad projektowych zastosowanych w CSS 2.1.
Rozdziały 3 - 18: Podręcznik CSS 2.1.
Większość tego podręcznika zajmuje specyfikacja języka CSS 2.1. Opisane w nim są zasady tworzenia arkuszy stylów w CSS 2.1 (składnia, własności, wartości przyjmowane przez własności) oraz sposób, w jaki muszą je interpretować zgodne aplikacje klienckie.
Dodatki:
Dodatki zawierają informacje o własnościach słuchowych (nienormatywne), przykładowy arkusz stylów dla HTML 4, informacje o zmianach w stosunku do wersji CSS 2, gramatykę CSS 2.1, listę normatywnych i informacyjnych źródeł oraz dwa indeksy: własności i ogólny.

1.4 Konwencje

1.4.1 Elementy i atrybuty języka dokumentu

  • Nazwy własności i pseudoklas CSS zostały ujęte w pojedyncze cudzysłowy.
  • Wartości CSS są ujęte w pojedyncze cudzysłowy.
  • Nazwy atrybutów języka dokumentu zostały napisane małymi literami i ujęte w podwójne cudzysłowy.

1.4.2 Definicje własności CSS

Definicja każdej właściwości CSS rozpoczyna się od krótkiego przedstawienia najważniejszych informacji, które wygląda następująco:

‚nazwa-własności’
Wartość:  dozwolone wartości i składnia
Wartość domyślna:  wartość domyślna (początkowa)
Zastosowanie:  elementy, do których odnosi się dana własność
Dziedziczenie:  informacja czy dana własność jest dziedziczona
Wartości procentowe:  sposób interpretacji wartości procentowych
Media:  informacja o tym, dla których grup mediów dana własność jest przeznaczona
Wartość obliczana:  sposób wyznaczania wartości obliczanej

1.4.2.1 Wartość

Ta część zawiera informację o zbiorze wartości dozwolonych dla własności o nazwie ‚nazwa-własności’. Typy wartości można określać na kilka sposobów:

  1. słowa kluczowe (np. auto, disc itp.)
  2. podstawowe typy danych zapisane między znakami "<" i ">" (np. <length>, <percentage> itp.). W elektronicznej wersji dokumentu podstawowe typy danych są łączami do swoich definicji.
  3. typy o takim samym zakresie wartości, co własność o takiej samej nazwie (np. <’border-width’> <’background-attachment’> itp.). W takim przypadku nazwa typu jest nazwą własności (wraz z cudzysłowami) znajdującą się między znakami "<" i ">" (np. <’border-width’>). Taki typ nie zawiera wartości ‚inherit’. W elektronicznej wersji dokumentu każde wystąpienie tego typu symbolu nieterminalnego jest łączem do odpowiedniej definicji własności.
  4. symbole nieterminalne nie mające takiej samej nazwy, co własność. W takim przypadku nazwa symbolu nieterminalnego znajduje się między znakami "<" i ">", np.: <border-width>. Należy zwrócić uwagę na różnicę między zapisami <border-width> i <’border-width’>. Ten drugi jest zdefiniowany w odniesieniu do pierwszego. Definicja symbolu nieterminalnego znajduje się w pobliżu jego pierwszego wystąpienia w specyfikacji. W elektronicznej wersji dokumentu każde wystąpienie tego typu wartości jest łączem do odpowiedniej definicji wartości.

Pozostałe słowa w tych definicjach są słowami kluczowymi i muszą być pisane dosłownie — bez cudzysłowów (np. red). Znak ukośnika (/) oraz przecinek również muszą być pisane dosłownie.

Wyliczenia wartości mogą mieć następującą postać:

  • Zestaw słów oznacza, że wszystkie te słowa muszą zostać użyte w podanej kolejności.
  • Pionowa kreska (|) oddziela wartości alternatywne: musi zostać użyta dokładnie jedna z nich.
  • Dwie pionowe kreski (||) oddzielają wartości opcjonalne: musi wystąpić przynajmniej jedna z nich w dowolnej kolejności.
  • Dwa znaki && oddzielają wartości, które muszą zostać użyte w dowolnej kolejności.
  • Nawiasy kwadratowe ([ ]) służą do grupowania.

Zestawienie słów ma wyższy priorytet od dwóch znaków &&. Dwa znaki && mają wyższy priorytet niż dwie pionowe kreski. Dwie pionowe kreski mają wyższy priorytet niż pojedyncza pionowa kreska. W związku z tym poniższe wiersze są równoważne:

    a b   |   c ||   d &&   e f
  [ a b ] | [ c || [ d && [ e f ]]]

Po każdym typie, słowie kluczowym lub grupie w nawiasach kwadratowych może wystąpić jeden z poniższych modyfikatorów:

  • Gwiazdka (*) oznacza, że znajdujący się przed nią typ, słowo lub grupa może wystąpić zero lub więcej razy.
  • Znak plus (+) oznacza, że znajdujący się przed nim typ, słowo lub grupa może wystąpić jeden lub więcej razy.
  • Znak zapytania (?) oznacza, że użycie znajdującego się przed nim typu, słowa lub grupy jest opcjonalne.
  • Para liczb w nawiasach klamrowych ({A,B}) oznacza, że znajdujący się przed nią typ, słowo lub grupa występuje przynajmniej A razy i maksymalnie B razy.

Poniżej znajdują się przykłady ilustrujące różne typy wartości:

Wartość: N | NW | NE
Wartość: [ <length> | thick | thin ]{1,4}
Wartość: [<family-name> , ]* <family-name>
Wartość: <uri>? <color> [ / <color> ]?
Wartość: <uri> || <color>
Wartość: inset? && [ <length>{2,4} && <color>? ]

Typy wartościowe zostały zdefiniowane w kategoriach tokenów (zobacz dodatek Appendix G.2). Ponieważ gramatyka dopuszcza spacje między tokenami w składnikach produkcji expr, spacje mogą pojawiać się między tokenami w wartościach.

Uwaga: W wielu przypadkach spacje między tokenami są konieczne, aby dało się je odróżnić. Na przykład wartość ’1em2em’ zostałaby potraktowana jako jeden token DIMEN z liczbą ’1′ i identyfikatorem ‚em2em’, który nie określa żadnej prawidłowej jednostki. W tym przypadku przed liczbą ’2′ powinna znajdować się spacja, dzięki której analizator składni potraktowałby ten tekst jako dwie wartości: ’1em’ i ’2em’.

1.4.2.2 Wartość domyślna

Ta część określa wartość domyślną własności. Informacje dotyczące interakcji pomiędzy wartościami określonymi w arkuszu stylów, dziedziczonymi oraz domyślnymi można znaleźć w podrozdziale Kaskada.

1.4.2.3 Zastosowanie

W tej części znajduje się lista elementów, do których ma zastosowanie dana własność. Przyjmuje się, że wszystkie elementy mają wszystkie własności. Chociaż niektóre z tych własności nie mają wpływu na prezentację niektórych elementów. Na przykład własność ‚clear’ działa tylko na elementy blokowe.

1.4.2.4 Dziedziczenie

Ta część określa, czy dana wartość własności może być dziedziczona po elemencie nadrzędnym. Informacje dotyczące interakcji pomiędzy wartościami określonymi w arkuszu stylów, dziedziczonymi oraz domyślnymi można znaleźć w podrozdziale Kaskada.

1.4.2.5 Wartości procentowe

Ta część określa sposób interpretacji wartości procentowych. Zapis "nie dotyczy" oznacza, że dana własność nie przyjmuje wartości procentowych.

1.4.2.6 Grupy mediów

W tej części znajduje się lista grup mediów, do których ma zastosowanie dana własność. Informacje na temat grup mediów są nienormatywne.

1.4.2.7 Wartość obliczona

Ta część zawiera opis wartości obliczanej własności. Informacje na temat sposobu korzystania z tej definicji znajdują się w podrozdziale Wartości obliczone.

1.4.3 Własności zbiorcze

Niektóre własności to własności zbiorcze, co oznacza, że za pomocą jednej własności można ustawić wartości kilku własności.

Na przykład własność ‚font’ jest własnością zbiorczą do ustawiania własności ‚font-style’, ‚font-variant’, ‚font-weight’, ‚font-size’, ‚line-height’ oraz ‚font-family’ na raz.

W przypadku pominięcia wartości którejś z własności we własności zbiorczej, stosowana jest jej wartość domyślna (zobacz podrozdział Kaskadowość).

Przykłady:

Poniższa reguła składa się z kilku deklaracji:

h1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal;
}

Można ją zapisać krócej przy użyciu jednej własności zbiorczej:

h1 { font: bold 12pt/14pt Helvetica }

W tym przypadku własnościom ‚font-variant’ i ‚font-style’ zostaną nadane wartości domyślne.

1.4.4 Uwagi i przykłady

Wszystkie przykłady ilustrujące nieprawidłowe użycie CSS są wyraźnie oznaczone słowem "ŹLE".

Przykłady HTML bez deklaracji DOCTYPE są encjami tekstowymi SGML zgodnymi z DTD HTML 4.01 Strict [HTML4]. Pozostałe przykłady kodu HTML są zgodne z zadeklarowanymi DTD.

Wszystkie uwagi mają wyłącznie charakter informacyjny.

Przykłady i uwagi są odpowiednio oznaczone za pomocą kodu HTML, dzięki czemu aplikacje klienckie CSS będą je interpretować w specjalny sposób.

1.4.5 Obrazy i długie opisy

Większości rysunków w elektronicznej wersji tej specyfikacji towarzyszą "długie opisy" tego, co jest na nich przedstawione. Odnośnik do długiego opisu oznaczony jest literą "[O]" znajdującą się za rysunkiem.

Rysunki i długie opisy mają charakter wyłącznie informacyjny.

1.5 Podziękowania

Ten podrozdział nie jest normatywny.

Specyfikacja CSS 2.1 została oparta na CSS 2. Lista osób, które przyczyniły się do powstania specyfikacji CSS 2 znajduje się w podziękowaniach w specyfikacji CSS 2.

Poniżej znajduje się lista osób, którym chcemy podziękować za wkład w prace nad specyfikacją i komentarze wnoszone za pośrednictwem listy www-style: Andrew Clover, Bernd Mielke, C. Bottelier, Christian Roth, Christoph Päper, Claus Färber, Coises, Craig Saila, Darren Ferguson, Dylan Schiemann, Etan Wexler, George Lund, James Craig, Jan Eirik Olufsen, Jan Roland Eriksson, Joris Huizer, Joshua Prowse, Kai Lahmann, Kevin Smith, Lachlan Cannon, Lars Knoll, Lauri Raittila, Mark Gallagher, Michael Day, Peter Sheerin, Rijk van Geijtenbeek, Robin Berjon, Scott Montgomery, Shelby Moore, Stuart Ballard, Tom Gilder, Vadim Plessky oraz redaktorzy Open eBook Publication Structure Working Group. Ponadto dziękujemy Garyemu Schnablowi, Glennowi Adamsowi i Susan Lesch za wykonanie korekty tego dokumentu.

Specjalne podziękowania należą się fantasai, Adzie Chan i Borisowi Zbarskyemu za poświęcenie dużej ilości czasu na pracę nad specyfikacją CSS 2.1 oraz Kimberly Blessing za pomoc przy redagowaniu tekstu.

Inne artykuły poruszające podobny temat

Animowane menu - ikona

Tworzenie animowanego menu za pomocą jQuery

Ikona lornetki

Narzędzie csscss do wyszukiwania duplikatów kodu CSS

Ikona siatki

Szkic specyfikacji układów siatkowych CSS

Logo HTML5

HTML5 i Canvas 2D przechodzą w fazę rekomendacji kandydujących

Chłopiec z gazetą oznaczający newsa

CSS Writing Modes Module Level 3 i CSS Masking

Chłopiec z gazetą oznaczający newsa

Moduły tekstu i dekoracji tekstu CSS3

Dodaj komentarz









Newsletter

Subskrybując nasz newsletter masz pewność, że nie ominie Cię żadna nowość w serwisie!