Opublikowano: 3 czerwca 2026 r.
Witamy w miesięcznym podsumowaniu Baseline. W maju 2026 r. kilka nowych funkcji CSS, właściwości zdarzeń i dodatków do interfejsu API stało się dostępnych w ramach Baseline Newly available, a jednostki CSS, właściwości interakcji użytkownika i pseudoklasy osiągnęły poziom Baseline Widely available. Wprowadziliśmy też ważne aktualizacje od społeczności deweloperów.
Ankieta State of CSS 2026
Coroczne badanie opinii społeczności internetowej: ankieta State of CSS 2026 jest już dostępna. W tym roku organizatorzy starannie dopracowali ankietę, koncentrując się na funkcjach, które są najważniejsze dla programistów w erze kodowania wspomaganego przez AI. Producenci przeglądarek uważnie śledzą te wyniki, aby ustalać priorytety w swoich planach rozwoju i rozwiązywać problemy deweloperów. Podziel się swoją opinią i doświadczeniami związanymi z rozwijającym się środowiskiem CSS, zanim 1 lipca zamkniemy ankietę.
Nowo dostępne funkcje podstawowe
Funkcje w tej sekcji są obsługiwane od maja 2026 r. w podstawowym zestawie przeglądarek i są teraz dostępne w ramach Baseline Newly Available.
Zapytania dotyczące stylu kontenera
Zapytania o kontenery nie są już ograniczone do rozmiaru. Dzięki zapytaniom o style możesz teraz stosować style do elementów na podstawie właściwości niestandardowych kontenera nadrzędnego. Umożliwia to tworzenie wysoce modułowych komponentów, które mogą dostosowywać motyw lub styl na podstawie umiejscowienia kontekstowego bez polegania na złożonych strukturach klas.
Więcej informacji znajdziesz na stronie referencyjnej MDN dotyczącej @container.
:open pseudoklasa
Elementy stylów, które mają stany otwarty i zamknięty, np. <dialog> i <details>, wcześniej wymagały sprawdzania atrybutów lub zarządzania klasami. Pseudoklasa :open upraszcza to zadanie, dopasowując te elementy tylko wtedy, gdy są one obecnie otwarte, co pozwala na tworzenie bardziej przejrzystego i deklaratywnego kodu CSS.
Więcej informacji znajdziesz na stronie MDN poświęconej pseudoklasie :open.
ToggleEvent.source
Podczas pracy z interfejsem Popover API kluczowe jest reagowanie na zmiany stanu. Właściwość source interfejsu ToggleEvent zwraca element sterujący, który wywołał działanie przełączania wyskakującego okienka. Dzięki temu możesz określić źródło zdarzenia i koordynować złożone interakcje interfejsu.
Więcej informacji znajdziesz w dokumentacji MDN dotyczącej właściwości ToggleEvent.source.
image-rendering miejsce zakwaterowania
Właściwość CSS image-rendering umożliwia kontrolowanie algorytmu skalowania używanego podczas zmiany rozmiaru obrazów. Jest to szczególnie przydatne w przypadku pixel art, obrazów o niskiej rozdzielczości lub kodów QR, w których ważne jest, aby uniknąć rozmytej interpolacji i zachować ostre i pikselowe skalowanie.
Dowiedz się, jak go używać, na stronie MDN poświęconej właściwości image-rendering.
text-decoration-skip-ink: all
Podkreślenia przechodzące przez znaki z wydłużeniem dolnym mogą czasami wyglądać niechlujnie. Podczas gdy opcja text-decoration-skip-ink: auto pomija tusz tylko w miejscach przecięcia, ustawienie all wymusza pomijanie wszystkich glifów niezależnie od przecięcia, co daje większą kontrolę nad estetyką typografii.
Szczegółowe informacje znajdziesz w przewodniku MDN dotyczącym właściwości text-decoration-skip-ink.
SharedWorker
Interfejs SharedWorker API udostępnia specjalny proces działający w tle, do którego można uzyskać dostęp z wielu kontekstów przeglądania, takich jak różne okna, karty lub elementy iframe w tej samej domenie. Jest to przydatne do udostępniania stanu, zarządzania połączeniami lub koordynowania zadań w tle na różnych kartach.
Zapoznaj się z dokumentacją MDN dotyczącą SharedWorker.
Funkcje podstawowe powszechnie dostępne
Te funkcje stały się powszechnie dostępne w Baseline, co oznacza, że są teraz w dużej mierze kompatybilne i można ich używać w projektach.
lh jednostka długości
Jednostka względna lh odpowiada obliczonej wysokości wiersza elementu, w którym jest używana. Ułatwia to dopasowywanie rozmiaru elementów, takich jak plakietki ikon czy wyróżnienia tła, do wysokości wiersza tekstu.
Więcej informacji znajdziesz w dokumentacji MDN dotyczącej jednostek długości.
rlh jednostka długości
Podobnie jak lh, jednostka rlh reprezentuje wysokość wiersza, ale konkretnie elementu głównego (<html>). Dzięki temu możesz zachować spójny rytm pionowy na całej stronie, niezależnie od lokalnego rozmiaru czcionki lub zastąpień wysokości wiersza.
Więcej informacji znajdziesz w dokumentacji MDN dotyczącej jednostek długości.
Navigator.userActivation
Wiele interfejsów API sieci (np. odtwarzanie wideo, wyskakujące okienka czy dostęp do schowka) wymaga interakcji użytkownika, zanim będzie można je wywołać. Właściwość Navigator.userActivation zwraca obiekt zawierający informacje o bieżącym i historycznym stanie aktywacji użytkownika w oknie, co umożliwia skryptom sprawdzenie, czy nastąpił gest użytkownika.
Dowiedz się, jak z niej korzystać, na stronie MDN poświęconej właściwości Navigator.userActivation.
clip-path
Właściwość clip-path CSS umożliwia utworzenie obszaru przycinania, który określa, która część elementu powinna być widoczna. Używając podstawowych kształtów (takich jak koła, elipsy czy wielokąty) lub ścieżek SVG, możesz tworzyć atrakcyjne projekty układów i przejść bez ukrywania przepełnienia.
Szczegóły implementacji znajdziesz na stronie MDN poświęconej właściwości clip-path.
:user-invalid pseudoklasa
W przeciwieństwie do :invalid, które stosuje style natychmiast po załadowaniu strony (co często prowadzi do słabego UX), pseudoklasa :user-invalid pasuje tylko do nieprawidłowych elementów formularza po interakcji użytkownika z nimi. Oznacza to, że możesz wyświetlać informacje o weryfikacji formularza po opuszczeniu pola przez użytkownika.
Więcej informacji znajdziesz w dokumentacji MDN dotyczącej selektora :user-invalid.
I to już koniec
Daj nam znać, jeśli pominęliśmy coś związanego z Baseline. Zadbamy o to, aby w przyszłości uwzględnić to w naszym podsumowaniu. Jeśli masz pytania lub chcesz przekazać nam opinię na temat Baseline, możesz zgłosić problem w naszym systemie śledzenia problemów.