Nowości w CSS - luty 2022

Cześć, dzisiaj przedstawię Ci kilka rzeczy które pojawiły się w CSS w ostatnim czasie i pozwalają mocno uprościć kod.

Cascade Layers

Pozwalają na zmianę specyficzności poszczególnych selektorów bez dodatkowych sztuczek w stylu "aby nadpisać klasę, dodam na jej początku tag html". 

Kaskadowe warstwy pozwalają na zdefiniowanie poszczególnych warstw (a to niespodzianka), które ustawiamy w takiej kolejności, jak chcemy żeby się nadpisywały ignorując specyficzność.

See the Pen Cascade layers by Kamil (@KamilNaja) on CodePen.

Wsparcie jest aktualnie (luty 2022) bardzo słabe, demo zadziała w zaktualizowanym Firefox Developer Edition

Clamp

Wyobraź sobie sytuację, że chcesz nadać obrazkowi szerokość 100%, ale też nie chcesz by był węższy niż 300px i szerszy niż 1080px. Albo tworzysz paragraf z tekstem i nie chcesz by miał on bardzo długie linie na panoramicznych ekranach. Zwykle w takiej sytuacji używało się media queries, jednak powstała alternatywa, czyli funkcja clamp(). Demko z początkiem z Ojca Goriot - polecam

See the Pen Clamp by Kamil (@KamilNaja) on CodePen.

is() i where()

Być może dzięki takim funkcjom już niedługo doczekamy się artykułu "You dont need SASS", ponieważ pozwalają one na uniknięcie duplikacji kodu. 

Funkcje mają taką samą definicję, przyjmują listę selektorów. 

.main :where(h1, h2, h3) {} / /dla wszystkich h1, h2 i h3 zawartych w klasie main...

Różnią się specyficznością - where() ma specyficzność 0, is() ma specyficzność taką, jak przekazany do niej selektor o największej specyficzności. 

See the Pen Untitled by Kamil (@KamilNaja) on CodePen.