Edytowalne demonstracje na żywo: natywny nesting CSS, selektor :has(), container queries, subgrid, @layer, :is(), color-mix() i text-wrap: balance, z tabelą wsparcia Baseline.
Zwykły CSS robi dziś to, co kiedyś wymagało Sass lub JavaScript. Natywny nesting grupuje powiązane reguły, :has() styluje rodzica na podstawie jego dzieci, container queries dopasowują komponent do jego własnej szerokości, a subgrid wyrównuje zagnieżdżone elementy z zewnętrzną siatką. Wszystkie cztery osiągnęły Baseline w 2023, więc obecne przeglądarki je obsługują.
Najważniejsze funkcje w skrócie
Funkcja
Zastępuje
Baseline od
Nesting
Zagnieżdżanie w stylu Sass w preprocesorze
:has()
JavaScript przełączający klasę rodzica
Container size queries
Media queries względem viewportu wewnątrz komponentów
Subgrid
Sztywno ustawione wysokości do wyrównania rzędów kart
Każda funkcja poniżej ma demonstrację, którą możesz edytować, a karta z container query reaguje na suwak, więc widzisz zmianę układu bez zmiany rozmiaru okna. Tabela wsparcia podaje rok, w którym każda funkcja stała się Baseline, czyli działa w najnowszych Chrome, Edge, Firefoksie i Safari.
Przeciągnij suwak szerokości w demonstracji container query i zobacz, jak karta przełącza się z układu jeden pod drugim na układ obok siebie.
Edytuj dowolny przykład po lewej. Odizolowany wynik po prawej odświeża się podczas pisania.
Przed wdrożeniem sprawdź tabelę wsparcia. Baseline oznacza wszystkie cztery główne silniki, a nie starsze wersje.
Skopiuj potrzebny fragment. Żaden nie wymaga kroku budowania ani biblioteki.
Zagnieżdżaj płytko. Dwa poziomy zwykle wystarczą, a głębokie zagnieżdżenie tworzy długie selektory o wysokiej specyficzności, tak jak w Sass.
Container queries potrzebują kontenera: najpierw ustaw container-type: inline-size na rodzicu, inaczej reguła @container niczego nie dopasuje.
Otaczaj reguły :has() przez @supports selector(:has(*)), jeśli zależy Ci na starszych przeglądarkach, aby czysto wracały do wersji zapasowej.
Używaj :where() dla stylów bibliotek lub resetów. Dodaje zerową specyficzność, więc każdy może je nadpisać jedną klasą.
Najczęściej zadawane pytania
Czy nadal potrzebuję Sass do zagnieżdżania?
Nie do samego zagnieżdżania. Natywny nesting obejmuje typowy wzorzec reguł w regułach oraz selektor &. Sass nadal oferuje mixiny, pętle i funkcje, choć zmienne CSS i color-mix() przejęły wiele z tego, do czego ludzie go używali.
Czym różnią się container queries od media queries?
Media query pyta o viewport, zwykle o szerokość okna. Container query pyta o wybranego przodka. Dzięki temu jeden komponent karty może pokazać kompaktowy układ w wąskim pasku bocznym i szeroki układ w głównej kolumnie tej samej strony.
Czy :has() jest wolny?
Silniki przeglądarek zoptymalizowały go przed udostępnieniem i zwykłe użycie jest w porządku. Bardzo szerokie selektory, takie jak body:has(*) na ogromnych stronach, wymuszają więcej pracy przy dopasowywaniu, więc gdzie się da, zakotwiczaj :has() do konkretnej klasy komponentu.
Co oznacza Baseline?
Baseline to etykieta społeczności platformy webowej oznaczająca, że funkcja działa w obecnych wersjach Chrome, Edge, Firefoksa i Safari. Newly available to data, w której ostatnia z nich ją wprowadziła. Widely available następuje około trzydziestu miesięcy później.
Kiedy użyć subgrid zamiast zagnieżdżonej siatki?
Użyj subgrid, gdy dzieci elementu siatki muszą być wyrównane do ścieżek zewnętrznej siatki, na przykład tytuły, teksty i przyciski w rzędzie kart. Zwykła zagnieżdżona siatka ma własne niezależne ścieżki, więc treści o różnej długości rozjeżdżają się.
Jak działa selektor & w zagnieżdżaniu
Wewnątrz zagnieżdżonego bloku & oznacza zewnętrzny selektor. &:hover dołącza pseudoklasę do samego rodzica, & + & wskazuje rodzeństwo tego samego rodzaju, a .theme-dark & umieszcza rodzica w innym kontekście.
Zagnieżdżony selektor bez & jest traktowany jako potomek, więc .card { p { } } oznacza .card p. Przeglądarki wydane w 2023 i później akceptują też samą nazwę elementu, taką jak p, na początku zagnieżdżonej reguły.
Warstwy kaskady w praktyce
@layer reset, base, components, utilities; deklaruje kolejność z góry. Późniejsza warstwa wygrywa z wcześniejszą niezależnie od specyficzności, co kończy większość walk między biblioteką komponentów a Twoimi nadpisaniami.
Style poza jakąkolwiek warstwą wygrywają z każdym stylem w warstwie. To przydatne przy wprowadzaniu starego arkusza stylów do układu z warstwami: na początku zostaw stare reguły poza warstwami, a potem przenoś je po jednej.
Co wdrożyć najpierw
Jeśli Twoi użytkownicy korzystają z aktualnych przeglądarek, nesting i :is() to darmowe korzyści, które jedynie skracają arkusz stylów. Container queries opłacają się, gdy masz komponenty wielokrotnego użytku pojawiające się w różnych szerokościach. Subgrid ma największe znaczenie dla siatek kart i formularzy z etykietami.
Natywny nesting CSS
Karta ostylowana zagnieżdżonymi regułami
Hover, tytuł i ciemny wariant siedzą wewnątrz .card. & odnosi się do samego .card.
Selektor rodzica :has()
Wyróżnij pole, gdy jego checkbox jest zaznaczony
W tej ramce nie działa żaden skrypt. Etykieta styluje się sama, bo ma w środku zaznaczony input.
Zmień układ karty tylko wtedy, gdy zawiera obrazek
Karty bez obrazka zachowują układ jednokolumnowy; karty z obrazkiem dostają dwie kolumny.
Container queries
CSS stojący za demonstracją z suwakiem
container-type sprawia, że .shelf można mierzyć; reguła @container przełącza kartę w rząd, gdy półka ma co najmniej 420px szerokości.
Subgrid
Rzędy kart wyrównane niezależnie od długości tekstu
Każda karta zajmuje trzy rzędy zewnętrznej siatki i używa subgrid dla własnych rzędów, więc każdy tytuł, treść i przycisk są w jednej linii.
@layer, :is(), :where(), color-mix() i text-wrap
Warstwy kaskady wyłaniają zwycięzcę według kolejności
Selektor ID jest we wcześniejszej warstwie, więc zwykła klasa w późniejszej warstwie i tak wygrywa.
:is() i :where() skracają listy selektorów
:is() przyjmuje specyficzność swojego najsilniejszego argumentu, :where() zawsze liczy się jako zero.
color-mix() do odcieni i kolorów po najechaniu
Mieszanie z bielą lub czernią w przestrzeni oklab daje równe odcienie z jednego koloru marki.
text-wrap: balance dla nagłówków
Drugi nagłówek rozkłada słowa równo na linie, zamiast zostawiać jedno słowo samotnie. Przeglądarki ograniczają balansowanie do krótkich bloków o kilku liniach.
Wsparcie przeglądarek (Baseline)
Status Baseline (najnowsze Chrome, Edge, Firefox i Safari), sprawdzony w MDN w październiku 2026