Nowe funkcje CSS, na które czekamy w 2022 roku

Oto kilka aktualizacji kaskadowych arkuszy stylów, których nie możesz przegapić, począwszy od mało znanych właściwości przewijania-snap po oszałamiające nowe palety kolorów.

CSS (Cascading Style Sheets) zadebiutował w 1996 roku i nadal jest ważnym, ewoluującym elementem stosu programistycznego. CSS, podobnie jak inne żywe języki, zawsze dodaje nowe funkcje w odpowiedzi na praktyki w świecie rzeczywistym. Ze względu na szybką ewolucję, nawet oddani programiści mogą przegapić nowe funkcje. Sprawdź niektóre z najbardziej przydatnych funkcji, które pojawią się w CSS w najbliższej przyszłości.

Podsiatka

CSS od samego początku był krytykowany za szereg rażących błędów. Niektóre proste zadania, takie jak wyśrodkowanie czegoś w CSS, wymagają nadmiernie skomplikowanych obejść i drobiazgów.
Inną istotną kwestią było osiągnięcie rozsądnego układu siatki, przynajmniej do czasu, gdy wkroczył moduł CSS Grid Layout.

Układ siatki jest wskazywany przez wyświetlacz: deklaracja siatki i jest podobny do Flexbox, ponieważ umożliwia zdefiniowanie prostokątnych układów, jednocześnie kontrolując siatkę w dwóch wymiarach.
Według badań większość programistów CSS jest świadoma Grid Layout i wielu z nas go używa. (Nie zapomnij go wypróbować, jeśli jeszcze tego nie zrobiłeś!)

Subgrid to zupełnie nowa i niezwykle użyteczna funkcja modułu Grid Layout. Funkcja subgrid umożliwia utworzenie siatki podrzędnej, która odziedziczy układ siatki macierzystej.

W przeciwieństwie do zagnieżdżania siatki w innej, siatka podrzędna definiuje własne wymiary i odstępy. Układ nadrzędny jest stosowany do podsiatki podczas korzystania z podsiatki, ale podsiatka może nadal zastępować aspekty układu, jeśli to konieczne.

Subgrid jest obecnie dostępny tylko w Firefoksie 71 i nowszych, ale jest planowany dla Safari WebKit, Google Chrome i Microsoft Edge. Subgrid będzie w przyszłości bardzo przydatną funkcją układu.

Akcent-kolor

Mimo swojej popularności, niektóre elementy wyświetlacza są bardzo trudne do stylizacji. Na przykład pola wyboru i przyciski radiowe są często zastępowane niestandardowym widżetem, który naśladuje ich zachowanie, jednocześnie ukrywając implementację przeglądarki. Możesz kierować te elementy za pomocą nowej opcji akcentu koloru CSS.

Na przykład, jak pokazano na Listingu 1, możesz zastosować kolor magenta do wszystkich przycisków opcji na swojej stronie (zobacz także ten przykład na żywo).

Listing 1: Kontrola kolorów CSS dla przycisków radiowych

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

Przewiń przyciąganie

CSS oferuje przydatny zestaw właściwości do kontrolowania przyciągania przewijania w przeglądarce internetowej. Wiele z tych funkcji jest już dostępnych w najnowszych wersjach przeglądarek, podczas gdy inne wciąż są wprowadzane.

Warto zauważyć, że ponad jedna trzecia użytkowników CSS nadal nie zdaje sobie sprawy z przyciągania przewijania.

Polecenie scroll-snap-* properties udostępnia kilka opcji dostrajania sposobu działania pozycji przewijania w kontenerze. Programiści czerpią korzyści ze zwiększonej precyzji, a użytkownicy końcowi korzystają z płynniejszego, bardziej kontrolowanego doświadczenia użytkownika.

Listing 2 pokazuje prosty przykład, jak kontrolować przyciąganie przewijania w div (zobacz także ten przykład na żywo).

Listing 2 jest przykładem prostego przyciągania przewijania.

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

Pozycja przewijania y na liście 3 automatycznie przesuwa się do elementu potomnego bez względu na to, gdzie zwolnisz ruch przewijania. Wynika to z tego, że właściwość scroll-snap-type kontenera przewijania jest ustawiona na y, a elementy potomne mają deklarację scroll-snap-align: start.

To zachowanie można również zmienić. Możesz na przykład ustawić właściwość scroll-snap-type na bliskość y. Działa to zgodnie z oczekiwaniami, przyciąganie tylko wtedy, gdy zwój znajduje się blisko elementu.

Ponadto powiązana właściwość overscroll-behavior steruje zachowaniem kontenerów zagnieżdżonych przewijania.

Logiczne właściwości CSS

Prawdopodobnie doświadczyłeś irytacji związanej z koniecznością dosłownego zapisywania właściwości border-left i border-right lub border-top, border-bottom, jeśli kiedykolwiek chciałeś ustawić granicę kontenera po lewej i prawej stronie lub na dole i Top. Problem polega na tym, że nie ma możliwości użycia właściwości skrótu bez wpływu na granice, których nie chcesz zmieniać. Dotyczy to również elementów takich jak dopełnienie i marginesy.

Moduł CSS Logical Properties pozwala na odwoływanie się do rzeczy w sposób abstrakcyjny za pomocą wbudowanych i blokowych słów kluczowych. Odnosząc się do lewej i prawej strony, użyj inline; odnosząc się do góry i dołu, użyj bloku. Na przykład, aby dodać obramowanie po lewej i prawej stronie elementu div, użyj kodu z Listingu 3. (zobacz także przykład na żywo tutaj).

Listing 3: Lewy i prawy dopełnienie z logiką inline

 div { border- inline : 10px dashed seagreen; }

Są to przydatne skróty do granic, ale logiczne słowa kluczowe wbudowane i blokowe można również znaleźć w wielu innych właściwościach.

Większość programistów używa tych skrótów do rozwiązywania problemów związanych z kierunkiem tekstu i trybem pisania. W takich przypadkach właściwość taka jak padding-inline-end umożliwia kierowanie dopełnienia końcowego niezależnie od kierunku tekstu.

Zasadniczo abstrakcja do wstawiania i blokowania pozwala na tworzenie uogólnionych stylów, które można zastosować w różnych sytuacjach. Więcej informacji można znaleźć na stronie, Logiczne właściwości i wartości CSS.

Wyszukiwanie kontenerów

Zapytania kontenerowe nie są jeszcze w pełni stabilne w CSS, ale wkrótce będą. Będą miały znaczący wpływ na sposób, w jaki myślimy o responsywnym designie. Podstawową ideą jest to, że będziesz mógł ustawić punkt przerwania na podstawie rozmiaru kontenera nadrzędnego, a nie tylko widoku i mediów.

Nie ma jasnej definicji składni, ale prawdopodobnie będzie ona przypominać Listing 4.

@Lista kontenerów 4.

 @container (max-width: 650px){ … }

Zastanów się, jak wydajne będzie dostosowywanie układu na podstawie rozmiaru różnych kontenerów, które pojawiają się w zagnieżdżonych warstwach interfejsu użytkownika. To dość znacząca zmiana, która prawie na pewno wywoła falę innowacji interfejsu.

Trzy nowe schematy kolorów

Praktycy CSS od niepamiętnych czasów używali kolorów RGB, HEX i nazwanych kolorów do upiększania i ożywiania wyświetlaczy urządzeń. Deklaracja koloru w stylu HSL została wprowadzona niedawno. Specyfikacja CSS wprowadza teraz nowe deskryptory kolorów, a mianowicie hwb, lab i lch.

HWB to skrót od odcienia, bieli i czerni. To miły akcent, który wyróżnia się czytelnością dla człowieka — wybierasz kolor, a następnie dodajesz biel i czerń. Jest zgodny z najnowszymi wersjami przeglądarek Chrome, Firefox i Safari. (Odniesienie do funkcji Microsoft Edge jest dziwnie ogłuszająco milczące na ten temat.) Aby dowiedzieć się więcej o HWB, zobacz hwb() – notację kolorów dla ludzi? Podobnie jak RGB i HWL ma kanał alfa dla przezroczystości.

LCH, co oznacza lekkość, nasycenie i odcień, wyróżnia się rozszerzeniem dostępnej palety kolorów. Co, dlaczego i w jaki sposób kolory LCH są używane w CSS? To dobry przegląd, który zawiera otwierającą oczy dyskusję na temat teorii kolorów w CSS. Obecnie tylko Safari obsługuje LCH.

Najbardziej teoretyczną z nowych przestrzeni barwnych jest LAB, wywodząca się z teorii barw CIE LAB. Laboratoryjny deskryptor kolorów twierdzi, że obejmuje całe spektrum kolorów dostrzegalnych przez człowieka, co jest śmiałym stwierdzeniem. Podobnie jak LCH, jest obecnie obsługiwany tylko przez Safari. Więcej informacji o LAB for CSS można znaleźć w dokumentacji Mozilli CSS.