thumb|upright=0.5 Kaskadowe arkusze stylów (, w skrócie ) – język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 roku 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 resztą. 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ł () 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 trzy oficjalne standardy CSS: CSS1, CSS2 (12 maja 1998) oraz CSS2.1 (7 czerwca 2011).
W ciągu następnych lat rozwijano tzw. CSS3. Wersja ta w stosunku do poprzedników wzbogaciła się o wiele selektorów oraz właściwości, nowością jest także modułowy charakter języka – nie jest to już jednolita rekomendacja, lecz kilkadziesiąt osobnych dokumentów, co pozwala na włączanie lub wyłączanie odpowiednich modułów w przeglądarkach w zależności od chwilowych potrzeb.
Cele Przed pojawieniem się CSS wszystkie informacje dotyczące wyglądu dokumentów HTML (między innymi rodzaj i kolor czcionki, ułożenie, marginesy) zawarte były w znacznikach HTML. Język CSS umożliwia przeniesienie tych informacji do osobnego pliku. Skutkuje to uproszczeniem i zwiększeniem przejrzystości samego dokumentu HTML. Bez użycia CSS w przypadku definiowania stylu dla nagłówka () lub podtytułu () jego definicja musiałaby zostać powtórzona w każdym miejscu, w którym pojawia się dana struktura. Efektem takiego działania byłoby zmniejszenie czytelności dokumentu i jego odporności na błędy oraz trudność w utrzymaniu. Dodatkowo, zmiany stylu w jednym z miejsc wiązałyby się z koniecznością wprowadzania zmian w każdym miejscu wystąpienia. CSS pozwala na rozgraniczenie warstwy prezentacji od struktury. Język ten umożliwia definicję kolorów, czcionek, układu, rozmiarów, marginesów oraz wielu innych cech związanych z warstwą prezentacji.
Wsparcie przeglądarek Ponieważ nie wszystkie przeglądarki poprawnie tłumaczą kod CSS, niektóre techniki deweloperskie umożliwiają filtrowanie specyficznych przeglądarek albo kierunkowanie definicji stylów dla wybranych. Obydwa sposoby umożliwiają wyłączanie lub włączanie niektórych definicji stylów dla konkretnych przeglądarek internetowych. Wykorzystując filtry CSS można nawet osiągnąć różne style dla różnych przeglądarek. Początkowo przeglądarki albo całkowicie nie radziły sobie z plikami CSS, albo poziom renderowania był bardzo niski. Wsparcie Internet Explorera dla CSS zostało zapoczątkowane w wersji 3.0 i z każdą kolejną wersją wsparcie ulegało poprawie. Przykładem historycznego problemu związanego z implementacją kaskadowych arkuszy stylów był błąd Internet Explorera w interpretacji modelu pudełkowego. Błędem dotknięte były przeglądarki Internet Explorer dla Windows aż do wersji 6. Efektem tego problemu były różnice w szerokościach elementów blokowych między przeglądarkami internetowymi. Obejściem problemu było zawarcie odpowiedniej Deklaracji Typu Dokumentu (DOCTYPE). Pomimo faktu, że wiele przeglądarek internetowych poprzez wsparcie CSS wpłynęło pozytywnie na rozwój tego języka to niepoprawna interpretacja kaskadowych arkuszy stylów przez niektóre z nich ciągle ogranicza projektantów. Nawet w dzisiejszych czasach problemy te skutecznie utrudniają projektowanie stylów, a testowanie na maksymalnie wielu przeglądarkach jest nieodłączną częścią pracy.
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 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 i uciążliwe modyfikowanie każdego pliku witryny oddzielnie.
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ę: Gecko np. Firefox, Camino, SeaMonkey. Trident głównie Internet Explorer. Presto (Opera). WebKit/ np. Safari, Google Chrome. KHTML m.in. Konqueror. Jednym z testów sprawdzających CSS 1 jest Acid1.
CSS 2 W CSS 2 rozwiniętym do poziomu 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. CSS 2.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 8 – 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 pierwszego poziomu są też obecne w jego następcy. 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 Inaczej niż CSS 2, który jest jedną wielką specyfikacją definiującą różne właściwości, CSS 3 podzielony jest na niezależne dokumenty zwane modułami. Każdy moduł zawiera nowe możliwości i rozszerza elementy zdefiniowane w CSS 2, tak, żeby zachowywały kompatybilność z wersjami wcześniejszymi. Prace nad trzecim poziomem CSS rozpoczęły się krótko po oficjalnej publikacji specyfikacji CSS 2. Najwcześniejsza robocza wersja CSS 3 pojawiła się w czerwcu 1999 roku.
W wyniku podziału na moduły poszczególne elementy CSS 3 mają różny status czy poziom stabilności, ale dzięki podziałowi mogą być opublikowane jako obowiązujące niezależnie od etapu pracy nad pozostałymi elementami. Dodano także nowe znaczniki i właściwości. W czerwcu 2012 roku CSS Working Group miało opublikowanych ponad 50 różnych modułów, a kilka z nich zostało oficjalnie zarekomendowanych jako standard przez W3C, np.: 2012-06-19: typy mediów () 2011-09-29: przestrzenie nazw () 2011-09-29: selektory () 2011-06-07: kolory
Niektóre z modułów, np. tła i obramowania czy układ wielokolumnowy (), mają nadany status (), który uważany jest za raczej stabilny. Dostawcy przeglądarek internetowych powinni zatem poprawić dotychczasowe implementacje w celu usuwania tzw. prefiksów dostawców (ang. ) w nazwach właściwości. Czyli np. zamiast -moz-border-radius dla Gecko, -webkit-border-radius dla WebKit, powinno być już zaimplementowane border-radius. W środowisku programistów sieciowych jest także dyskusja, czy prefiksy, które początkowo miały umożliwiać wprowadzanie eksperymentalnych właściwości, w ogóle są potrzebne. Wielu sugeruje, że powinny być używane jedynie w bardzo wczesnej fazie implementacji, gdy żaden standard de facto jeszcze nie istnieje i dostawcy nie mogą się zgodzić co do kolejności czy możliwych jednostek w wartościach właściwości.
CSS 4 CSS 4 nie istnieje już jako jedna specyfikacja. Odkąd CSS 3 został podzielony na moduły, każdy z nich rozwija się niezależnie. Większość z nich jest na poziomie 3, który bazuje na wcześniejszym CSS 2.1. Kilka z nich osiągnęło poziom 4 np. własności grafiki (), tła i obramowania () czy selektory, które oparto na sprawdzonych modułach poziomu 3. Jednym z modułów, który doczekał się rozwoju w CSS 4, jest . Jedną z najważniejszych nowości w czwartej wersji tego modułu jest dodanie parametru font-display pozwalającego na kontrolowanie sposobu, w jaki przeglądarka internetowa wyświetla czcionki w zależności od tego, czy zostały pobrane i są gotowe do użytku. Są też całkiem nowe elementy, nad którymi dopiero rozpoczęto prace oznaczone jako poziom 1, np. flexbox, który jest swego rodzaju „dynamiczną” tabelą (we wrześniu 2012 oznaczony symbolem ).
Zalety i ograniczenia