7 nowych funkcji CSS

Przeglądamy najciekawsze funkcje CSS, które pojawiły się w 2022 i 2023.

Pracując na co dzień w branży IT może zabraknąć czasu na ciągłe sprawdzanie pojawiających się nowości. CSS jest pod tym względem o tyle ciekawy, że nowości pojawiają się systematycznie, natomiast każda przeglądarka wprowadza je we własnym tempie. W takim środowisku, łatwo jest przeoczyć nawet te ważne zmiany.

Dlatego postanowiliśmy zebrać i przedstawić najważniejsze nowości, które zagościły w CSS w ostatnim czasie. Niezależnie od tego, czy jesteś ekspertem w tej dziedzinie, czy dopiero zaczynasz swoją przygodę, paczka tych informacji powinna pomóc zaktualizować Twoją wiedzę.

Container queries

No to doczekaliśmy się czegoś jak media query, ale dla kontenerów. Oznacza to, że w zależności od rozmiaru kontenera możemy zmieniać styl elementów wewnątrz! Taka funkcja ma sporo sensu, szczególnie, że do tej pory taką magię trzeba było robić z poziomu JavaScript.

Załóżmy, że mamy taki html:

<div class="container">
  <div class="card">
    <p>Card content</p>
  </div>
</div>

Żeby stworzyć tu zapytanie kontenerowe trzeba:

1. Stworzyć tzw. “Containment context”, który mówi przeglądarce, że będziemy się odwoływać do rozmiaru tego elementu. Jest kilka typów takiego kontekstu, ale przykładowo może on wyglądać tak:

.container {
  container-type: inline-size
  container-name: sidebar; // opcjonalnie możemy nadać nazwę kontenera
}

2. Stworzyć container query:

@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}

Przy okazji dostajemy też jednostki odnoszące się do wielkości kontenera:

cqw: 1% szerokości kontenera
cqh: 1% wysokości kontenera
cqi: 1% wielkości inline kontenera
cqb: 1% wielkości block kontenera

Działa to na wszystkich najważniejszych przeglądarkach. Warto sobie poczytać więcej na temat container queries.

Selektor :has()

Gdyby ten selektor działał w 2006, to nie powstała by połowa kodu w jQuery. :has() potrafi sprawdzić czy element zawiera dzieci pasujące do selektrora i w zależności od tego zaaplikować style. Można więc powiedzieć, że w końcu dostaliśmy selektor rodzica w CSS.

Oczywiście selektor :has() można łączyć ze wszystkimi innymi współczesnymi funkcjami CSS. Oto kilka przykładów:

.container:has(.child) { ... } // podstawowy przykład

.container:has(.child) .child { ... } // stylowanie dziecka

.container:has(+ sybling) { ... } // kontener, który ma obok rodzeństwo

figure:not(:has(figcaption)) + p { ... } // paragraf po obrazku bez podpisu

Jak widzicie możliwości są spore. Nowa funkcja nie działa w Firefoxie, chyba że włączy się ją wprost poprzez odpowiednią flagę.

Nowe jednostki viewportu

Od dawna mamy dostępne jednostki vw i vh, które są relatywne do dostępnego viewportu. Niestety na urządzeniach mobilnych ich obsługa nie jest zbyt prosta, bo nie biorą pod uwagę widoczności różnego rodzaju pasków narzędzi czy adresu.

Problem z jednostkami viewportu
Problem z jednostką vh na urządzeniach mobilnych (źródło: https://developer.chrome.com/)

Nowe jednostki rozwiązują ten problem i każda z jednostek dotyczących viewportu dostała 3 nowe przedrostki:

s- oznaczający najmniejszy możliwy viewport
l- oznaczający największy możliwy viewport
d- który określa dynamicznie zmieniający się viewport - w zależności od wyświetlania różnego rodzaju pasków w przeglądarce.

Tak więc mamy teraz nie nie tylko vh, ale też svh, lvh i dvh. Oczywiście tak samo jest dla innych jednostek viewportu. Wszystkie najważniejsze przeglądarki mają wsparcie dla nowych jednostek.

Zagnieżdżony CSS

Jeżeli używasz SASS czy LESS to zagnieżdżanie właściwości CSS nie jest dla Ciebie niczym nowym. Jednak zwykły CSS nie posiadał takiej możliwości.

To się zmienia i teraz:

.card {
  &:hover {
    color: pink;
  }
}

Jest prawiłowym kodem CSS. Ta nowość również jest wspierana przez wszystkie popularne przeglądarki.

Kaskadowe warstwy

To ciekawa funkcja, która jest trochę jak miecz obosieczny - może zrobić dużo dobrego, ale może też wprowadzić więcej chaosu do świata CSS.

CSS praktycznie od zawsze miał problem z jedną ze swoich najważniejszych reguł - specyficznością selektorów. Deweloperzy w dużych projektach często mieli z tym problem, co prowadziło do dziwnego wymuszania pewnych stylów przez użycie !important. Lekarstwem miały być tu konwencje takie jak BEM, innym rozwiązaniem było dynamiczne stylowanie przez frameworki i tworzenie nazw klas unikalnych dla komponentów w locie. Jednak to nie rozwiązuje problemu, a go omija.

Dlatego CSS wprowadza nowe warstwy do kaskady stylów. Dosłownie, bo nowe słowo kluczowe nazywa się @layer. W warstwie deklaruje się style, a potem można je dowolnie ułożyć.

@layer base {
  a {
    color: red;
  }
}

@layer typography {
  a {
    color: green;
  }
}

I jeżeli to jedyne style na stronie, to wygląd linków będzie zależeć od kolejności zaaplikowania warstw.

@layer typography, base;

W tym przypadku linki będą czerwone, a jeżeli zamienimy miejscami base i typography to będą zielone. To potężne narzędzie, bo warstwy mają pierwszeństwo przed specyficznością selektorów i to wymaga też pewnego przestawienia myślenia o CSS. Problemy mogą się zacząć w przypadku zagniedżonych warstw oraz gdy znowu zaczniemy używać słowa kluczowego !important.

@layer działa we wszystkich ważniejszych przeglądarkach od jakiegoś czasu.

Funkcje trygonometryczne

CSS od dłuższego czasu pozwala na obliczanie wyrażeń matematycznych. Od tego roku w tych obliczeniach można wykorzystywać funkcje trygonometryczne sin(), cos(), tan(), asin(), acos(), atan() i atan2(). Otwiera to możliwość do m.in. przesuwania obiektów po okręgu. Wszystkie najważniejsze przeglądarki pozwalają na takie obliczenia.

Oddzielene transformacje

Transformacje w CSS to jedna z ciekawszych funkcji, ale trzeba przyznać, że do tej pory składnia nie była zbyt przyjazna. Pisanie wszystkich transformacji w jednej linii zmniejszało czytelność.

Na szczęście twórcy przeglądarek stwierdzili, że dobrze by było je oddzielić. Dzięki temu zamiast pisać:

.target {
  transform: rotate(30deg) scale(1.2);
}

.target:hover {
  transform: rotate(30deg) scale(2); // trzeba było powtórzyć rotate, mimo, że się nie zmianiało
}

Można teraz pisać tak:

.target {
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

Nowości w CSS pojawiają się cały czas, a te, które pojawiły się ostatnio, wprowadziły dużo dobrych i potrzebnych zmian. Mamy nadzieję, że ten artykuł pomógł Ci zaktualizować wiedzę i zainspirował do częstszego sprawdzania statusu rozwoju CSS. A jest co sprawdzać, bo np. Niektóre przeglądarki pozwalaja na ograniczanie zasięgu stylów dzięki @scope, albo tworzenie natywnych popoverów w pozomu HTML i efektywne stylowanie ich przez CSS.