Kaskadowe arkusze stylów (ang. Cascading Style Sheets ; w skrócie CSS) to jÄ™zyk sÅ‚użący do opisu formy prezentacji (wyÅ›wietlania) stron WWW. CSS zostaÅ‚ opracowany przez organizacjÄ™ W3C w 1996 r. jako potomek jÄ™zyka DSSSL przeznaczony do używania w poÅ‚Ä…czeniu z SGML-em. Pierwszy szkic CSS zaproponowaÅ‚ w 1994 r. HÃ¥kon Wium Lie.

Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML.

CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu. CSS ułatwia także zmiany w renderowaniu strony w zależności od obsługiwanego medium (ekran, palmtop, dokument w druku, czytnik ekranowy). Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron naraz bez ingerowania w sam kod (X)HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.

Historia

Pierwotnie HTML był językiem wyłącznie do opisu struktury dokumentu. Jednak z czasem zrodziła się potrzeba ożywienia wyglądu takich dokumentów. Powoli dodawano nowe znaczniki do HTML pozwalające kontrolować kolory, typografię, dodawać nowe media (np. obrazki). Te niestandardowe rozszerzenia realizowane były przez najpopularniejszych producentów przeglądarek bez porozumienia z drugim. Doprowadziło to do zaimplementowania nowych znaczników działających w konkretnej grupie przeglądarek i nie działających w innych przeglądarkach. Projektanci zostali zmuszeni do wysyłania do klienta różnych wersji tej samej witryny w zależności od użytej przeglądarki, uzyskanie identycznego wyglądu w różnych przeglądarkach było praktycznie niemożliwe. Håkon Wium Lie jako pierwszy zaproponował CHSS (Cascading HTML Style Sheets) w październiku 1994 roku. Później Lie i Bert Bos pracowali wspólnie nad standardem CSS (literka H została usunięta ze względu na możliwość stosowania stylów do innych podobnych do HTML języków).

W tym czasie została utworzona organizacja World Wide Web Consortium, która z Lie'em i Bosem na czele przejęła prace nad CSS. Pod koniec 1996 roku wydano oficjalną dokumentację CSS, Kaskadowe arkusze stylów, poziom 1.

W3C zatwierdziło dwa oficjalne standardy CSS: CSS 1 i CSS 2, a także dnia 7 czerwca 2011 roku standard CSS 2.1.

Trwają również prace nad CSS3. Wersja ta w stosunku do poprzedników wzbogaci się o wiele selektorów oraz właściwości, nowością jest także modułowy charakter języka – nie będzie to już jednolita rekomendacja, lecz kilkadziesiąt osobnych dokumentów, co pozwoli na włączanie lub wyłączanie odpowiednich modułów w przeglądarkach w zależności od chwilowych potrzeb.

Obsługa przez przeglądarki

PoczÄ…tki implementacji CSS1

Specyfikacja CSS1 została opublikowana pod koniec 1996. Kilka miesięcy później pojawiła się przeglądarka Internet Explorer 3 zapewniająca podstawową obsługę CSS1. Była to ważna cecha, która w czasach dominacji Netscape Navigatora, pozwalała przeglądarce Microsoftu wysunąć się na prowadzenie. Obsługa CSS1 była na tyle dobra, że można było porzucić niestandardowy znacznik <font> i rozpocząć eksperymentowanie z marginesami i innymi elementami układu strony. W praktyce projektanci napotkali liczne problemy związane z niekompletną i pełną błędów implementacją CSS1. Dopiero począwszy od IE4 który ukazał się pod koniec 1997 roku CSS1 działało prawidłowo. Netscape w wersji czwartej zaimplementował CSS1 lecz, jak się okazało, z licznymi błędami. Powszechnie uważano że sam CSS jest wadliwy a to skłoniło wielu projektantów do jego zarzucenia. W efekcie powszechne uznanie CSS1 za standard, bardzo się opóźniło. Z dzisiejszej perspektywy jest to język dość prosty a zarazem dający projektantowi wiele możliwości. Pozwala przede wszystkim dokładnie rozmieścić poszczególne elementy strony oraz stosować warstwy. Jedną z podstawowych właściwości CSS 1 jest kaskadowość. Pliki stylów dołączone przez autora dokumentu, mogą zostać podmienione przez odbiorcę w celu dopasowania prezentacji do indywidualnych potrzeb. Najważniejsze że wszystko może być zmodyfikowane w jednym pliku a tym samym odpadło monotonne "gmeranie" oddzielnie, w każdym z plików witryny

CSS 1 we współczesnych przeglądarkach

CSS 1 jest w pełni obsługiwany przez współczesne, popularne przeglądarki tj. oparte na następujących silnikach renderujących stronę:

Jednym z testów sprawdzających CSS 1 jest Acid1.

CSS 2

W CSS 2 zmodyfikowanym do stabilnej wersji 2.1 wprowadzone zostały nowe selektory i właściwości. W nowej wersji właściwościami stylu objęto strukturę dokumentu, oddzielając styl prezentacji dokumentów od ich zawartości. CSS2.1 upraszcza autorskie opracowanie w sieci i konserwację strony. Teoretycznie stało się możliwe wybranie np. elementu HTML, który jest bezpośrednio pod innym elementem (jest dzieckiem danego elementu). W praktyce użycie wielu z nowych elementów języka przez parę lat uniemożliwiała dominacja IE 6 i późniejszego IE 7, którego wsparcie CSS 2.1 jest słabe. Nowsza wersja IE dołączyła jednak do pozostałych przeglądarek i w pełni przechodzi m.in. test Acid2, w którym testowano elementy standardu CSS 2.1. CSS 2.1 opiera się na CSS 1 i z nielicznymi wyjątkami, wszystkie aktualne style wersji pierwszej są też obecne w wersji drugiej. CSS 2.1 obsługuje specyficzne medialne arkusze stylu tak, że autorzy mogą dostosować prezentację swoich dokumentów do wizualnych przeglądarek, urządzeń słuchowych, drukarek, urządzeń Braille’a, urządzeń ręcznych, itd. CSS 2.1 wspomaga ustawienie (pozycjonowanie) treści, obsługuje ściągalne czcionki, wspiera układ graficzny tabeli, internalizację, automatyczne liczniki, numerację i niektóre właściwości dotyczące interfejsu użytkownika.

CSS 3

CSS 3 jest obecnie szczątkowo obsługiwany przez większość najnowszych przeglądarek (np. opacity w Gecko). Właściwości CSS 3 o implementacji znajdującej się w fazie eksperymentalnej opatrzone są prefiksem odpowiednim dla przeglądarki (np. -moz-border-radius dla Gecko, -webkit-border-radius dla WebKit).

Selektory CSS3 są obsługiwane przez wszystkie główne przeglądarki (silniki).