Pod koniec września świat ujrzał pierwszy szkic kaskadowych arkuszy stylów nowego, czwartego poziomu. Przeglądając ten dokument możemy zobaczyć jakie możliwości zaoferuje nam CSS za kilka lat. Poniżej znajduje się zapis mojej prezentacji o CSS4 pokazanej podczas spotkania meet.js.

Dlaczego CSS4?

CSS4 logoNowy szkic kolejnego poziomu kaskadowych arkuszy stylów został stworzony głównie z dwóch powodów: zaproponowania nowych elementów potencjalnie przydatnych web developerom, które być może pojawią się w specyfikacji i będą używane w ciągu najbliższych lat, a także odciążenia CSS3 elementami, które z różnych względów opóźniają zamknięcie specyfikacji i opublikowanie jej jako rekomendacji. Dzięki tym zabiegom zespoły zajmujące się dokumentacjami będą miały ułatwione zadanie.

CSS3 vs CSS4

Oba te poziomy są i będą rozwijane niezależnie. Rozpoczęcie prac nad CSS4 nie oznacza porzucenia CSS3, jak niektórym mogłoby się błędnie wydawać. Niektóre elementy mogą być oczywiście dowolnie modyfikowane, a nawet przenoszone w całości między specyfikacjami.

Pierwszy szkic CSS4

W opublikowanym 29 września dokumencie znalazło się kilka ciekawych elementów, które opiszę poniżej - są to głównie nowe, ułatwiające życie i pracę pseudoklasy. Zobaczmy więc co może pojawić się w użyciu w przyszłości.

Pseudoklasy logiczne

:matches to pseudoklasa, dzięki której możemy dopasować kilka elementów do wzorca, zamiast wypisywać je po kolei. Zamiast li a:link, li a:hover, li a:visited, li a:focus możemy napisać li a:matches(:link, :hover, :visited, :focus) i dostać ten sam rezultat. Pierwowzorem tej pseudoklasy było :-moz-any() znane z przeglądarki Mozilli.
:not to klasyczna negacja występująca w CSS3. Dzięki tej pseudoklasie możemy odwoływać się do elementów, które na przykład nie zawierają pewnych klas lub elementów: p:not(.active, .visible). W specyfikacji CSS4 pseudoklasa :not() może przyjmować nie tylko proste selektory, ale także ich listy.

Pseudoklasy adresu

Dzięki :any-link możemy odnieść się do linka nie martwiąc się o jego stan. Normalnie należałoby zdefiniować styl dla a:link oraz a:visited, ale zamiast tego możemy użyć a:any-link, dzięki czemu będziemy mogli ostylować każdy stan linka.
Pseudoklasa :local-link odpowiada za lokalny, aktualny adres na stronie. Parametrem może być liczba, jeśli użyjemy :local-link(0), to odniesiemy się do strony głównej, natomiast kolejne liczby całkowite będą odwoływać się do poszczególnych poziomów w strukturze. Dla adresu http://end3r.com/portfolio/client/gtech/ użycie a:local-link(2) poskutkuje wybraniem wszystkich linków na stronie kierujących do adresu http://end3r.com/portfolio/client/.

Pseudoklasy czasu

:past, :current i :future - te trzy wymienione pseudoklasy dotyczą elementów, które na przykład są odczytywane ze strony i prezentowane niewidomemu w formie ścieżki audio (tzw. text-to-speech). Dzięki nim możemy zorientować się które elementy zostały już przeczytane, jaki element jest aktywny, oraz ile elementów jest jeszcze w kolejce. Tak samo możemy odwoływać się na przykład do elementów wyświetlanego nagrania z obsługą WebVTT (Web Video Text Track) i odpowiedniego renderowania oraz stylowania napisów.

Pseudoklasy formularza

Pseudoklas formularza jest wiele, jednak najciekawszą nowością jest :indeterminate. Dotyczy ona elementów, które mogą być w stanie nieokreślonym - głównie elementów formularza, jak checkboxy i radio buttony. Działa na podobnej zasadzie do :checked, dzięki tej pseudoklasie możemy ostylować dowolny wygląd elementów znajdujących się w stanie nieokreślonym - takich, które nie są ani zaznaczone, ani odznaczone.

Pseudoklasy struktury drzewa

:nth-match i :nth-last-match to pseudoklasy przydatne do przeszukiwania elementów DOM. Pseudoklasa :nth-match działa na podobnej zasadzie do :nth-child z tą różnicą, iż dodatkowo oferuje możliwość dopasowywania wyników do wzorca, tak jak czyni to :matches. Z połączenia tych dwóch elementów powstało :nth-match, dzięki któremu dostajemy jeszcze większą kontrolę nad kodem i tym, co chcemy zaznaczyć. Na przykład kod li a:nth-match(even of .active) wybierze tylko parzyste linki z tych zawierających klasę active.

Pseudoklasy struktury siatki

Pseudoklasy :column, :nth-column, :nth-last-column przydadzą się podczas manipulacji strukturami tabelarycznymi. Za pomocą column możemy odnosić się do... kolumn w tabeli. Jest to pomocne uzupełnienie <tr>, czyli table row. Dzięki :nth-column(even) będzie można ostylować tylko parzyste kolumny danej tabeli.

Selektor rodzica

Dzięki selektorowi rodzica będzie można odwoływać się do dowolnego elementu, nie tylko tego, który jest ostatni (licząc od lewej do prawej). Jeśli mamy listę z linkami: ul li a.active i chcemy ostylować element li, ale tylko ten, który zawiera link z klasą active, wtedy zastosujemy selektor rodzica: ul ?li a.active. Selektor ten był najbardziej oczekiwaną nowością CSS4, dzięki niemu będzie można stylować dowolny element w zależności od tego jakie będzie zawierać klasy i inne elementy.

Przyszłość CSS

Poniższe elementy znajdują się aktualnie w specyfikacji CSS3, ale to na tyle odległa przyszłość, że równie dobrze mogą trafić do specyfikacji CSS4. Dzięki nim uzyskamy jeszcze większą kontrolę nad kodem z poziomu samego CSSa, ułatwią i zmniejszą potrzebę na wykorzystanie Javascriptu.

Filtry

Dzięki filtrom będziemy mieli większy wpływ na wygląd obrazków na stronie. Będzie można zastosować takie efekty, jak odcienie szarości, rozmycie, czy sepia: img { filter: grayscale(0.25) blur(5,2) sepia(1); }

Shadery

Shadery znane są z grafiki komputerowej, pojawiają się w grafice 3D w przeglądarce jako WebGL, niedługo będzie można z nich także korzystać w CSSie: img { filter: custom(url(foo.fs), 20 20, phase 90); }

Wartości

Przyszłość przyniesie nam także możliwość obliczania wartości wewnątrz stylów operując na różnych jednostkach: width: calc((12em * 3) + 10px);, height: min(3em, 30px);.

Zmienne

Kolejną ciekawą propozycją są zmienne: @var $kolorTekstu #FF0000; h1 { color: $kolorTekstu; }, dzięki którym będzie można zdefiniować na początku kilka wartości, a później korzystać z nich w kodzie. Jeśli zajdzie potrzeba zmiany danego koloru, to dokonamy jej tylko w jednym miejscu, a nie kilkunastu.

Detekcja funkcjonalności

Funkcjonalność wzięta żywcem z Modernizr - sprawdzamy, czy przeglądarka wspiera dane rozwiązania. Użycie @supports pozwoli określić nam oddzielne style w obu przypadkach: jeśli strona będzie lub nie będzie obsługiwała potrzebnych nam rozwiązań. Przykładowe użycie może wyglądać następująco: @supports (display: grid) {} lub @supports (background: linear-gradient) and (transform: rotate3d) {}. Słuszna uwaga pojawiła się podczas prezentacji: a co, jeśli przeglądarka nie wspiera samego @supports? Jak sprawdzić wsparcie wsparcia? W tym przypadku trzeba będzie pewnie polegać jeszcze na Modernizr.

Powtarzalne fragmenty

Fragmenty kodu CSS, z którego możemy dowolnie korzystać. Definicja: @mixin fragment { color: #F00; font-size: 14px; }, oraz użycie: h1 { @mix fragment; margin: 10px; }. Możliwe jest także użycie parametrów, dzięki którym nasz tzn. mixin będzie bardziej uniwersalny: @mixin innyFragment($kolor #F00) { color: $kolor; font-size: 14px; } oraz h1 { @mix innyFragment(#00F); margin: 10px; }.

Zagnieżdżanie

Dla niektórych przydatnym rozwiązaniem może okazać się zagnieżdżanie definicji, dzięki czemu wewnętrzne elementy będą korzystać ze zdefiniowanych wcześniej stylów: h1 { border: 1px solid #F00; & a { color: #00F; & :hover { color: #FF0; } } }.

Podsumowanie

Należy pamiętać, że jest to dopiero pierwszy szkic - wszystko może i będzie się zmieniać, w miarę jak prace będą iść do przodu. Implementacji większości tych elementów nie znajdziemy w żadnej przeglądarce, nawet tej developerskiej. Jest to bardziej ciekawostka, wgląd w przyszłość, ale z drugiej strony nie ma lepszego momentu, by wziąć w tym udział i samemu kształtować wygląd sieci za parę lat. Kto wie, być może to właśnie Ty zaproponujesz jakieś ciekawe rozwiązanie, które zostanie zatwierdzone, a po kilku latach będzie częścią specyfikacji i będzie używane przez miliony młodych webmasterów.

Więcej materiałów i informacji o CSS4 będzie można znaleźć na stronie CSS4.pl, tak po polsku, jak i po angielsku. Na razie znajduje się tam tylko splash screen, ale wkrótce strona zapełni się informacjami. Przypomnę też adres do prezentacji: end3r.com/slides/css4/.