Data publikacji: 11 czerwca 2025 r.
Zapomnij o hackach z użyciem obramowania i pseudoelementów. Zamiast nich możesz stosować dekoratory luk w CSS.
Zespół Microsoft Edge z przyjemnością informuje, że ozdoby CSS, czyli nowy sposób stylizowania przerw między elementami w układach elastycznych, kratowych i wielokolumnowych, jest teraz dostępny w wersji próbnej dla deweloperów w Chrome i Edge 139.
Wypróbuj i podziel się opinią, aby pomóc kształtować przyszłość tego interfejsu API.
Przydatne linki
Problem
Stylizowanie przerw w elementach interfejsu, takich jak kalendarze, karty czy siatki danych, może znacznie poprawić czytelność i dodać ogólnej estetyki. Jednak uzyskanie tego efektu w układówce siatki i flexboxa wymagało do tej pory niewygodne obejścia z użyciem obramowań, pseudoelementów lub sztuczek z tłem. Te obejścia mogą być problematyczne z kilku powodów.
- Nieintuicyjne: wprowadzają zależności strukturalne do stylizacji wizualnej, co jest niezgodne z zasadami semantycznego HTML.
- Nieprzyjazne dla osób z niepełnosprawnością: często wymagają dodatkowych elementów DOM, które mogą zakłócać działanie technologii wspomagających, takich jak czytniki ekranu.
- Trudności z utrzymaniem: wymagają skomplikowanej logiki układu i utrudniają spójne stylizowanie komponentów.
- Wpływ na wydajność: te obejścia mogą dodawać do DOM niepotrzebne elementy, co może powodować problemy z wydajnością.
Platforma internetowa obsługuje już stylizowanie przerw za pomocą właściwości column-rule, ale obecnie jest to ograniczone tylko do układów wielokolumnowych. Deweloperzy stron internetowych od dawna prosili o spójny sposób stylizowania przerw w innych odpowiednich typach układu, takich jak siatka czy flexbox.
Rozwiązanie: ozdoby w postaci przerw w kodzie CSS
Dekoracje przerw rozszerzają usługę column-rule, aby działała z innymi typami układu, takimi jak siatka i flexbox, oraz wprowadzają nową usługę row-rule, która ją uzupełnia. Dzięki temu można uzyskać spójność i nowe możliwości dostosowywania sposobu stylizowania przerw w różnych typach układów.
Dekoracje przerw w kodzie CSS zapewniają te korzyści:
- Brak wpływu na układ: dekoracje są czysto wizualne. Nie wpływają one na układ ani odstępy, więc możesz je stosować bez obaw o uszkodzenie dotychczasowych projektów.
- Składnia powtórzenia: podobnie jak w przypadku siatki CSS, możesz użyć składni
repeat(), aby tworzyć wzory ozdób w różnych częściach kontenera. Pozwala to tworzyć bogate, spójne projekty przy minimalnym wykorzystaniu kodu CSS. - Czystszy kod: nie trzeba stosować dodatkowych elementów ani pseudoelementów – wystarczy stylizowanie przerw.
- Możliwość dostosowania: nowe właściwości CSS, takie jak
*rule-break,*rule-outsetigap-rule-paint-order, zapewniają więcej opcji dostosowywania niż tradycyjne reguły stylizacji dotyczące szerokości, stylu i koloru.
Dzięki elementom dekoracyjnym z CSS tworzenie przejrzystych i łatwych w utrzymaniu układów stron jest łatwiejsze niż kiedykolwiek.
Dekoracje w przestrzeniach
Aby już teraz korzystać z dekoracji luk w CSS, użyj przeglądarki, która je obsługuje: Edge lub Chrome (od wersji 139). Przejdź do opcji edge://flags lub chrome://flags i włącz flagę Włącz eksperymentalne funkcje platformy internetowej.
Interaktywne środowisko deweloperskie
Aby wypróbować różne typy układów, w których obsługiwane są dekoracje przerw w arkuszu CSS, a także wszystkie nowe właściwości, skorzystaj z naszego interaktywnego placu zabaw dla deweloperów.
Menu z burgerem
Demo menu hamburgera pokazuje, jak za pomocą właściwości column-rule-break: intersection przerwać dekorację przerwy w kolumnie w każdym widocznym miejscu przecięcia z przerwami w wierszach.
W tym przykładzie do dostosowania długości dekoracji i ich odsunięcia od krawędzi każdego skrzyżowania służy też parametr column-rule-offset: -15px.
Notatnik
W demonstracji zeszytu funkcja row-rule-break: none zapewnia, że dekoracje wierszy nie są przerywane na skrzyżowaniach – biegną one nieprzerwanie od lewej do prawej strony kontenera.
Z drugiej strony, column-rule-break: spanning-item sprawia, że elementy dekoracyjne kolumn nie są wyświetlane za elementami rozciągającymi się na kilka kolumn – zaczynają się i kończą na elementach rozciągających się na kilka kolumn, tworząc widoczne skrzyżowanie w kształcie litery T.
Właściwość row-rule używa funkcji repeat(), aby umożliwić dokładne kontrolowanie sposobu stosowania dekoracji przerw w różnych sekcjach układu.
Umożliwia to zastosowanie wzoru stylizacji, w którym reguły wiersza są ukryte w nagłówku i stopce, są grubsze wokół głównej treści, a w pozostałych miejscach są subtelniejsze.
Codzienne wiadomości dotyczące usługi porównywania cen
Demo aplikacji Daily CSS News korzysta z układu w stylu magazynu i definiuje elementy dekoracyjne w CSS w wielu kontenerach siatki i flexboxa.
Zwróć uwagę na grę Sudoku po prawej stronie, która wykorzystuje siatkę 9 x 9 i powtarzający się wzór do rysowania cienkich i grubych linii między wierszami i kolumnami:
.sudoku {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 6px;
column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
column-rule-style: solid;
column-rule-color: var(--secondary);
row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
row-rule-style: solid;
row-rule-color: var(--secondary);
}
Zadzwoń, aby przekazać opinię
Cieszymy się, że chcesz wypróbować dekoracje przerw w CSS. Uważamy, że rozwiązuje ono typowy problem. Chętnie poznamy Twoją opinię na ten temat, aby dostosować tę funkcję do Twoich potrzeb.
Funkcja dekoracji przerw w kodzie CSS jest nadal implementowana w Chromium. Jeśli zdecydujesz się na testowanie, pamiętaj, że nadal nad tym pracujemy i możesz napotkać przypadki, w których funkcja nie działa zgodnie z oczekiwaniami. Niektóre z obecnych ograniczeń dotyczą animowania dekoracji przerw i używania bardzo dużej liczby ścieżek siatki.
Jeśli znajdziesz błąd lub masz jakieś uwagi na temat funkcji, podziel się nimi, otwierając nowy błąd Chromium.