Przypadki użycia wskazówek dotyczących nowoczesnej sieci

Opublikowano: 19 maja 2026 r.

Jest to wygenerowana lista wszystkich przypadków użycia dostępnych obecnie w przewodniku po nowoczesnych technologiach internetowych.

accessibility

accessible-error-announcement

Synchronizuj stany ułatwień dostępu (np. aria-invalid) ze stanem wizualnym :user-invalid, aby użytkownicy czytników ekranu otrzymywali informacje o błędach dopiero po interakcji, co odzwierciedla wrażenia wizualne.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

built-in-ai

language-detection

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

language-model

Uruchamiaj na urządzeniu wnioskowanie w języku naturalnym w przeglądarce za pomocą interfejsu Prompt API, z przesyłaniem strumieniowym danych wyjściowych, strukturalnymi odpowiedziami JSON i zarządzaniem sesjami wieloetapowymi.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

summarizer

Podsumowywanie treści tekstowych za pomocą interfejsu Summarizer API na urządzeniu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

translator

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

css

highlight-text-ranges

Wyróżniaj dowolne zakresy tekstu na stronie, np. wyniki wyszukiwania, błędy pisowni lub kursory edycji wspólnej.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

forms

animated-select-picker

Utwórz niestandardowy komponent wyboru z animowanym menu. Na przykład menu pojawia się stopniowo lub wsuwa się na ekran, a opcje animują się po wybraniu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

autofill-address-form

Utwórz formularz adresowy z prawidłowymi atrybutami autouzupełniania i obsługą autouzupełniania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

autofill-highlight-inputs

Użyj CSS, aby wyróżnić pola formularza, które zostały automatycznie wypełnione przez przeglądarkę i nie zostały edytowane przez użytkownika.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

autofill-payment-form

Utwórz formularz płatności, który zbiera dane karty z prawidłowymi wartościami autouzupełniania i obsługą autouzupełniania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

autofill-sign-in-form

Utwórz formularz logowania z prawidłowymi wartościami autouzupełniania i obsługą autowypełniania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

autofill-sign-up-form

Utwórz formularz rejestracji z prawidłowymi wartościami autouzupełniania i obsługą autowypełniania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

brand-consistent-forms

Dopasuj pola wyboru, przyciski opcji, suwaki zakresu i paski postępu do palety kolorów swojej witryny bez zastępowania ich komponentami niestandardowymi.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

branded-select-styling

Twórz niestandardowe elementy wyboru, których przycisk, selektor, ikona strzałki i znacznik wyboru są w pełni zgodne z typografią, kolorami, odstępami i obramowaniem marki lub systemu projektowania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

custom-select-picker-layouts

Twórz niestandardowe selektory wyboru, których opcje są rozmieszczone w unikalny lub interesujący sposób, a nie w tradycyjnej formie listy.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

form-fields-automatically-fit-contents

Zezwalaj na powiększanie i pomniejszanie pól formularza w zależności od danych wejściowych użytkownika, np. podczas wpisywania tekstu lub wybierania innej opcji. Stosuj limity maksymalnego i minimalnego rozmiaru, aby tworzyć dynamiczne i elastyczne pola formularza, które będą pasować do projektu strony.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

required-field-feedback

Wyświetlaj komunikaty o błędach w przypadku wymaganych pól formularza, które zostały pominięte lub pozostawione puste, tylko po interakcji użytkownika, aby uniknąć przedwczesnych błędów i zapewnić, że opinie są aktualne i odpowiednie w kontekście działań użytkownika.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

rich-media-picker

Utwórz niestandardowy komponent wyboru, którego opcje mogą zawierać złożone formatowanie HTML (np. obrazy, ikony i inne formatowanie tekstu) zamiast zwykłego tekstu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

select-menu-interaction

Sprawdzaj, czy w menu wyboru została wybrana opcja inna niż domyślna, dopiero po tym, jak użytkownik wejdzie w interakcję z elementem sterującym.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

validate-input-after-interaction

Wyświetlaj informacje o weryfikacji pól formularza (np. wymagania dotyczące złożoności hasła lub formatu adresu e-mail) dopiero po zakończeniu przez użytkownika wstępnej interakcji, aby uniknąć przedwczesnych błędów podczas wczytywania strony lub w trakcie wpisywania tekstu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

passkeys

passkey-authentication

Uwierzytelnianie powracającego użytkownika za pomocą klucza dostępu podczas głównego logowania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

passkey-conditional-create

Ciche rejestrowanie klucza dostępu dla obecnego użytkownika po udanym zalogowaniu się za pomocą hasła.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

passkey-management

Umożliwia użytkownikom wyświetlanie kluczy dostępu zarejestrowanych na ich kontach i zarządzanie nimi.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

passkey-reauthentication

Weryfikuj tożsamość zalogowanego użytkownika za pomocą jego dotychczasowych kluczy dostępu przed wykonaniem działania związanego z poufnymi danymi.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

passkey-registration

zarejestrować klucz dostępu na istniejącym koncie użytkownika;

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

performance

batch-analytics-events

Odrzucaj i grupuj wiele zdarzeń analitycznych w jednym sygnale, aby zminimalizować rywalizację w sieci i zmniejszyć obciążenie serwera, a jednocześnie dostarczać aktualizacje w czasie rzeczywistym.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

break-up-long-tasks

Dziel złożone przetwarzanie synchroniczne (złożone obliczenia lub długie pętle) lub aktualizacje DOM, aby umożliwić przeglądarce obsługę danych wejściowych użytkownika i ponowne rysowanie ekranu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

calculate-total-foreground-time

Obliczanie łącznego czasu, jaki użytkownik spędził na stronie, z wyłączeniem okresów, w których karta była w tle.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

conditional-async-dependencies

Warunkowe wczytywanie lub inicjowanie zależności asynchronicznych (np. importowanie polyfilli dla brakujących funkcji internetowych) bez konieczności złożonej koordynacji wszystkich zależności skryptowych strony.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

defer-rendering-heavy-content

Skróć czas renderowania na stronach internetowych z dużą ilością treści (np. na stronach z długimi kanałami, wieloma artykułami lub złożonymi panelami), odraczając renderowanie treści, które nie są od razu widoczne dla użytkownika.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

defer-work-until-scroll-ends

Odłóż kosztowne operacje, takie jak aktualizacje DOM, pobieranie danych, śledzenie analityczne czy ponowne obliczanie układu, do czasu zakończenia przewijania, aby zachować płynność przewijania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

deprioritize-background-fetches

Obniż priorytet pobierania danych w tle za pomocą interfejsu Fetch API, aby zapobiec konfliktom sieciowym z żądaniami zainicjowanymi przez użytkownika.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

detect-initial-visibility-state

Niezawodne określanie, czy strona została początkowo wczytana w tle, nawet w przypadkach, gdy skrypt jest wczytywany asynchronicznie po tym, jak użytkownik przeniósł stronę na pierwszy plan.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

efficient-background-processing

Oszczędzaj zasoby systemowe i baterię, wstrzymując wykonywanie JavaScriptu w tle (np. <canvas>animacji, renderowania WebGL lub odpytywania danych WebSocket o wysokiej częstotliwości), gdy komponent jest poza ekranem, a następnie wznawiając je w odpowiednim momencie, gdy wraca do widoku.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

faster-spa-view-transitions

Umożliwia szybsze przechodzenie z powrotem do wcześniej odwiedzonych widoków w aplikacji jednostronicowej (SPA) dzięki zachowywaniu ich stanu strukturalnego DOM zamiast niszczenia i ponownego tworzenia ich przy każdej nawigacji.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

full-session-analytics

Niezawodnie śledź dane analityczne, błędy i dane telemetryczne podczas całej wizyty użytkownika na stronie i odkładaj wysyłanie danych do momentu, aż użytkownik opuści stronę.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

identify-heavy-scripts

Określanie skryptów, które w największym stopniu odpowiadają za długie klatki animacji

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

identify-inp-causes

Identyfikowanie powolnego kodu JavaScript, który wpływa na dane INP

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

improve-next-page-load-performance

Zwiększ wydajność wczytywania stron, pobierając z wyprzedzeniem lub renderując wstępnie strony, które użytkownik prawdopodobnie odwiedzi w następnej kolejności.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

interactions-in-complex-layouts

Zwiększ szybkość i reaktywność interakcji (zmniejszając wyniki interakcji do kolejnego wyrenderowania – INP) poprzez unikanie ponownego obliczania układu w przypadku złożonych układów, takich jak panele z dużą ilością danych lub siatki w stylu arkusza kalkulacyjnego.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

optimize-image-priority

Zoptymalizuj priorytet ładowania obrazów, które mogą być kandydatami do największego wyrenderowania treści (LCP), i obniż priorytet obrazów niekrytycznych, aby skrócić opóźnienia w ładowaniu zasobów krytycznych.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

optimize-preload-priority

Zoptymalizuj względny priorytet wstępnie wczytanych treści, aby skrócić opóźnienia w ładowaniu krytycznych zasobów.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

optimize-script-priority

Zoptymalizuj priorytet wczytywania skryptów, zwiększając priorytet krytycznych skryptów asynchronicznych i zmniejszając priorytet skryptów nieistotnych lub umieszczonych na końcu sekcji body, aby poprawić kolejność i skrócić opóźnienia.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

resolution-optimized-pseudo-elements

Używaj obrazów zoptymalizowanych pod kątem rozdzielczości w pseudoelementach CSS (takich jak ::before i ::after), aby zmniejszyć liczbę węzłów DOM.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

schedule-tasks-by-priority

Planuj zadania o różnych priorytetach, aby zapewnić, że najważniejsze zadania będą wykonywane w pierwszej kolejności, a praca w tle będzie odraczana.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

sequence-distributed-events

Rejestruj i sekwencjonuj operacje w rozproszonych mikroserwisach lub środowiskach śledzenia o wysokiej przepustowości, rejestrując sygnatury czasowe z dokładnością do nanosekundy.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

user-experience

adapt-scrollbar-to-contrast-preferences

Zwiększanie widoczności paska przewijania dla użytkowników, którzy wolą interfejsy o wysokim kontraście

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

anchor-positioning-tab-underline

Płynne przechodzenie elementu między dwoma pozycjami elementu docelowego. Na przykład przeniesienie podkreślenia wybranej karty między wcześniej wybraną a aktualnie wybraną kartą.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

animate-element-entry-exit

Płynne ukrywanie i wyświetlanie elementów podczas dodawania lub usuwania ich z DOM albo przełączania ich wartości wyświetlania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

animate-to-from-top-layer

Animuj elementy, takie jak okna dialogowe, wyskakujące okienka i etykietki, gdy pojawiają się na górnej warstwie lub z niej znikają.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

animate-to-intrinsic-sizes

Płynnie animuj komponenty interaktywne (takie jak akordeony, menu i rozwijane karty) do i z ich naturalnych wymiarów.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

apply-webgl-shaders

Stosowanie niestandardowych efektów wizualnych za pomocą shaderów WebGL do treści HTML.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

calculate-event-differentials

Obliczanie czasu trwania i czasu pozostałego między datami i godzinami.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

calculate-with-intrinsic-sizes

Oblicz rozmiar elementu na podstawie jego rozmiaru wewnętrznego, zapewniając jednocześnie, że mieści się on w ramach podanych ograniczeń projektu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

capture-location-agnostic-data

Rejestruj dane chronologiczne, które nie powinny się zmieniać w zależności od lokalizacji użytkownika, takie jak daty urodzenia, powtarzające się alarmy czy święta państwowe.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

Utwórz karuzelę slajdów z obrazami lub innymi elementami wizualnymi, w której każdy slajd jest animowany podczas wchodzenia do przewijania, centrowania i wychodzenia z niego. Na przykład slajdy mogą się pojawiać i znikać, obracać, powiększać lub pomniejszać itp.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

Wyróżnij wizualnie aktualnie przyciągnięty nieinteraktywny element w karuzelach, galeriach lub pełnoekranowych interakcjach z przesuwaniem, które przyciągają elementy. Na przykład rozwijanie karty po przyciągnięciu lub odkrywanie ukrytych treści.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

child-state-based-styling

Utwórz komponent, który zmienia styl w zależności od stanu jednego z jego elementów podrzędnych. Na przykład komponent, który renderuje się w trybie jasnym lub ciemnym w zależności od tego, czy przełącznik motywu jest zaznaczony.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

complex-shapes

Przycinaj elementy i ich zawartość do dowolnego kształtu, np. symbolu, pociągnięcia pędzla lub organicznej tekstury, aby uzyskać bardziej ekspresyjne projekty.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

component-specific-light-dark-theme

Wymuszanie wyświetlania niektórych elementów w trybie jasnym lub ciemnym (np.bloków kodu, odtwarzaczy multimediów itp.) niezależnie od schematu kolorów strony.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

consistent-cross-document-transitions

Zanim zainicjujesz przejście między widokami w różnych dokumentach, upewnij się, że stan krytyczny strony jest wczytany i stabilny. Oznacza to, że przed uruchomieniem przejścia wczytywane i stosowane są najważniejsze style CSS, wczytywany i uruchamiany jest najważniejszy kod JavaScript, a kod HTML widoczny dla użytkownika podczas pierwszego wyświetlenia strony został przeanalizowany.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

content-based-styling

Utwórz komponent, który zmienia układ w zależności od tego, czy zawiera określone elementy podrzędne. Jeśli np. komponent zawiera obraz, użyj układu wielokolumnowego, w przeciwnym razie użyj układu jednokolumnowego.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

coordinate-global-events

Planuj przyszłe spotkania lub wydarzenia, wyraźnie przypisując je do strefy czasowej IANA, aby godziny wydarzeń były dokładne niezależnie od zmian czasu letniego, „pominiętych” lub „powtórzonych” godzin podczas zmian czasu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

cross-document-transitions

Twórz płynne przejścia między nawigacjami na pełnej stronie, takie jak przenikanie, niestandardowe efekty odkrywania lub przekształcanie treści z jednej strony na drugą.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

customize-scrollbar-color-and-thickness

Dostosowywanie koloru lub grubości paska przewijania

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

dark-mode

Wdróż obsługę trybu ciemnego w sposób, który uwzględnia preferencje użytkownika dotyczące jasnego lub ciemnego motywu i dostosowuje interfejs przeglądarki (np. paski przewijania, elementy sterujące formularza itp.).

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

declarative-button-actions

Deklaratywnie połącz przycisk z dowolnym elementem, aby wywoływać niestandardowe działania specyficzne dla aplikacji za pomocą deklaratywnych poleceń przycisków, poleceń wywołujących, poleceń przycisków, poleceń niestandardowych lub deklaratywnych działań przełączania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

declarative-dialog-popover-control

Przełączaj widoczność okna dialogowego lub wyskakującego okienka za pomocą przycisku bez pisania kodu JavaScript.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

deliver-optimized-decorative-images

Wyświetlaj zoptymalizowane obrazy dekoracyjne (np. tła, ikony interfejsu lub złożone maski), udostępniając jednocześnie formaty obrazów nowej generacji (np. AVIF lub WebP) oraz różne gęstości pikseli (np. 1x i 2x), aby przeglądarka mogła dynamicznie negocjować najlepsze połączenie rozmiaru pliku i jakości obrazu w zależności od możliwości urządzenia użytkownika.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

design-token-reactivity

Definiuj tokeny projektowe wyższego rzędu, takie jak tryby gęstości (kompaktowy, wygodny, przestronny) lub motywy, i spraw, aby komponenty podrzędne reagowały na zmiany bezpośrednio i w sposób odpowiedni dla danego komponentu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

directional-navigation-transitions

Animuj zmiany stanu wizualnego, aby odzwierciedlać kierunek nawigacji użytkownika, np. przesuwaj nowe treści z prawej strony, gdy użytkownik przechodzi dalej, lub z lewej, gdy wraca do poprzedniego ekranu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

dynamic-sibling-animations

Rozłóż w czasie animację lub przejście między elementami równorzędnymi, tak aby każdy z nich rozpoczynał się po obliczonym opóźnieniu na podstawie jego pozycji na liście elementów równorzędnych.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

dynamic-sibling-styling

Twórz dynamiczne spektrum wizualne lub układy, które automatycznie dostosowują się do liczby elementów w grupie.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

export-html-media-from-canvas

Przechwytuj i eksportuj dynamiczne treści HTML jako obrazy lub klatki wideo z poziomu obszaru roboczego.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

expose-canvas-content-to-browser-features

Udostępniaj treści renderowane w obszarze roboczym funkcjom przeglądarki, takim jak technologie wspomagające, tłumaczenie czy tryb czytania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

flicker-free-client-side-ab-testing

Przeprowadzaj i renderuj testy A/B, testy wieloczynnikowe lub inne eksperymenty za pomocą JavaScriptu po stronie klienta, aby zmieniać lub wstawiać kod HTML, CSS i JavaScript bez wyświetlania najpierw oryginalnej treści, a potem migotania lub błyskania w celu pokazania treści eksperymentalnej.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

fluid-scaling

Płynne skalowanie elementów, takich jak rozmiar czcionki, odstępy i rozmiary multimediów, na podstawie rozmiaru kontenera nadrzędnego zamiast używania stałych punktów przerwania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

format-human-readable-durations

Wyświetlaj użytkownikom upłynięty czas lub czas trwania w czytelnym, zlokalizowanym formacie, z możliwością wyświetlania szczegółowych podziałów jednostek (np. „1 godzina i 30 minut”) lub łącznej liczby jednostek (np. „90 minut”) w zależności od kontekstu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

group-element-transitions

Przejście grupy podobnych elementów jednocześnie przy użyciu tej samej logiki przejścia, np. usunięcie produktu z koszyka na zakupy i animowanie wszystkich pozostałych produktów do nowych pozycji.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

improve-text-layout-and-legibility

Popraw układ i czytelność krótkich, samodzielnych treści tekstowych, takich jak nagłówki nie dłuższe niż kilka wierszy, umożliwiając przeglądarce stosowanie równomiernie rozłożonych podziałów wierszy podczas zawijania tekstu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

individual-transform-properties

Animuj lub zastępuj poszczególne właściwości przekształceń CSS (np. translate, rotate, scale) niezależnie od innych właściwości przekształceń w jednym elemencie.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

interactive-content-in-3d-scenes

Integrowanie interaktywnych elementów HTML ze sceną 3D.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

interactive-content-reveal

Twórz interaktywne efekty odkrywania, takie jak reflektor, który podąża za wskaźnikiem użytkownika, aby odkrywać szczegóły obrazu lub sekcji interfejsu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

interest-triggered-action-previews

Wyświetlaj podgląd na żywo efektu przycisku, gdy użytkownik wyrazi zainteresowanie (np. najedzie na niego kursorem, ustawi na nim fokus lub przytrzyma go), ale zanim kliknie.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

interest-triggered-tooltips

Wyświetlaj etykietkę lub dodatkowe informacje, gdy użytkownik najedzie myszą na element interaktywny, wybierze go lub przytrzyma, bez konieczności klikania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

light-dismiss-a-dialog

Utwórz okno modalne, które można zamknąć, klikając lub dotykając poza nim.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

manage-recurring-intervals

Obliczaj cykliczne interwały rozliczeń subskrypcji lub cykli płacowych, automatycznie dostosowując je do przypadków granicznych, takich jak przejścia na koniec miesiąca (np. dodanie 1 miesiąca do 31 stycznia), aby zapewnić dokładne obliczenia okresów.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

model-partial-time-concepts

Modeluj koncepcje daty i godziny, które z natury nie mają standardowego komponentu (np. konkretnego roku, dnia lub daty), bez używania dowolnych wartości zastępczych, które powodują błędy obliczeniowe.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

move-dom-element-without-losing-state

Przenoszenie lub zmiana elementu DOM bez utraty ważnego stanu elementu, takiego jak stany interaktywności (:focus/:active), <iframe> stan ładowania, stan animacji/przejścia itp.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

Utwórz komponent panelu nawigacji, który po wywołaniu za pomocą przycisku menu wysuwa się z boku i nakłada na istniejącą treść strony, a po zamknięciu (przez przesunięcie palcem, kliknięcie poza nim lub naciśnięcie klawisza Esc) zasuwa się.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

overflow-clipping-control

Dostosuj widoczną granicę przycinania elementu, aby dopasować ją do krawędzi treści, krawędzi dopełnienia lub krawędzi obramowania albo do określonego przesunięcia względem dowolnej z nich. Zapewnia to większą kontrolę nad sposobem przycinania treści.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

parallax-scroll-effects

Tworzenie efektów opartych na przewijaniu (np. paralaksy), w których warstwy pierwszego planu i tła przesuwają się z różną prędkością, co daje wrażenie głębi podczas przewijania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

persistent-app-tours

Twórz trwałe samouczki wprowadzające, korzystając z przywiązanych nakładek natywnych, które pozostają otwarte podczas interakcji użytkownika.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

persistent-toast-notifications

Twórz nieinwazyjne powiadomienia typu toast i nakładki, aby przekazywać trwałe, możliwe do ułożenia w stos wiadomości i informacje o stanie.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

persistent-top-layer-ui

Utrzymanie widoczności i aktywności okna modalnego, elementu pełnoekranowego lub natywnego wyskakującego okienka, gdy jego podstawowy węzeł DOM jest przenoszony lub zmieniany w DOM.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

physics-based-easing

Twórz niestandardowe efekty animacji i przejść oparte na fizyce, takie jak odbijanie i sprężynowanie, które są bardziej naturalne i angażujące niż tradycyjne krzywe łagodzenia.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

platform-controls-dismiss-dialog

Utwórz okno modalne, które można zamknąć za pomocą standardowych działań użytkownika na danej platformie, np. naciśnięcia klawisza Esc na platformach desktopowych lub gestu „wstecz” lub „zamknij” na platformach mobilnych.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

position-aware-tooltips

Twórz etykietki i wyskakujące okienka ze strzałkami kierunkowymi (lub innymi elementami wizualnymi), które automatycznie wskazują właściwy kierunek, gdy element przełącza się na pozycję rezerwową.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

precise-text-alignment

Uzyskaj precyzyjne wyrównanie w pionie w przypadku tekstu o dowolnej czcionce. Na przykład równe dopełnienie wizualne nad i pod tekstem lub idealne wyrównanie tekstu z sąsiadującymi ikonami lub obrazami.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

prevent-text-wrapping

Upewnij się, że przeglądarka nie wstawia znaków podziału wiersza w tekście i pozwala na przepełnienie kontenera.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

pull-to-reveal

Utwórz funkcję „przeciągnij, aby wyświetlić”, która umożliwi użytkownikowi przeciągnięcie ekranu w dół, aby wyświetlić więcej treści, np. pasek wyszukiwania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

reduce-style-repetition

Ogranicz nadmierne powtarzanie stylów, umieszczając złożoną lub dynamiczną logikę stylizacji w funkcjach wielokrotnego użytku (np. w funkcji, która oblicza gradient na podstawie zestawu parametrów wejściowych).

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

resilient-context-menus-and-nested-dropdowns

Twórz dostępne, elastyczne menu, etykietki, menu rozwijane lub nakładki kontekstowe, które muszą być powiązane z określonymi elementami interfejsu, co gwarantuje, że nakładka automatycznie zmieni położenie (np. odwróci osie), gdy napotka krawędzie obszaru wyświetlania, dzięki czemu nigdy nie zostanie ucięta.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

same-document-transitions

Wizualnie połącz elementy, które pozostają na stronie w różnych stanach lub podczas nawigacji w aplikacji jednostronicowej (SPA) (np. rozszerzanie miniatury produktu do pełnoekranowego banera powitalnego) poprzez płynne przekształcanie ich rozmiaru, pozycji lub innych właściwości stylu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

scroll-entry-exit-effects

Twórz efekty pojawiania się, powiększania lub inne złożone efekty ujawniania elementów, gdy wchodzą one do obszaru przewijania (lub widocznego obszaru) i z niego wychodzą podczas przewijania przez użytkownika.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

scroll-position-aware-elements

Twórz pływające przyciski lub widżety (powrót na górę, przewijanie na dół, uruchamianie czatu itp.), które pojawiają się i znikają w zależności od tego, czy użytkownik przewinął stronę.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

scroll-progress-indicator

Utwórz pasek postępu przewijania, stopniowy tracker postępu lub dowolny element wizualny, który informuje o tym, jak daleko użytkownik przewinął stronę lub sekcję.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

scroll-snap-realtime-feedback

Podczas przewijania treści wyrównanych do punktu przyciągania przez użytkownika, zanim gest przewijania zostanie zakończony, w połączonych elementach interfejsu wyświetlaj wizualne informacje zwrotne w czasie rzeczywistym.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

scroll-snap-state-sync

Synchronizuj wskaźniki nawigacji, połączone panele treści i śledzenie analityczne z aktywnym przyciągniętym elementem w kontenerze z możliwością przewijania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

scroll-target-on-load

Utwórz przewijaną listę elementów (np. karuzelę obrazów lub wątek rozmowy na czacie), które mogą być wyświetlane z określonym elementem przewiniętym do widoku podczas początkowego renderowania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

scrollability-affordance-hints

Twórz nakładki z cieniem przewijania, gradientowe przejścia lub wskaźniki strzałek kierunkowych, które pojawiają się tylko wtedy, gdy w danym kierunku jest więcej treści do przewijania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

scrollytelling

Animuj właściwości wizualne elementu docelowego – takie jak zanikanie tła, zmiana koloru tła lub tworzenie efektów scrollytellingu – w całości na podstawie pozycji obszaru przewijania zupełnie innego elementu.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

search-hidden-content

Ukrywaj treści za pomocą wzorców takich jak akordeony, karty i sekcje „Czytaj dalej”, ale zadbaj o to, aby ukryty tekst był widoczny podczas wyszukiwania w ramach strony, aby można było go indeksować w wyszukiwarce, aby obsługiwał fragmenty adresu URL i aby zachowywał ułatwienia dostępu ARIA.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

shaped-cutouts

Łącz wiele kształtów, aby tworzyć złożone wycięcia lub efekty „knockout” w elementach, np. dodawać wycięcia w elementach.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

shrinking-header-on-scroll

Płynnie animuj stały nagłówek lub okładkę na pełnym ekranie podczas przewijania, aby dynamicznie zmniejszać, dodawać cienie i przekształcać układ na określonej odległości przewijania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

size-aware-styling

Utwórz komponent, którego style mogą być warunkowo zależne od jego własnej szerokości lub wysokości, a nie od szerokości lub wysokości widocznego obszaru. Może to być np. komponent karty, który może zmieniać układ w zależności od rozmiaru, lub przycisk wezwania do działania, który może warunkowo wyświetlać tekst pomocy w zależności od szerokości.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

soft-edge-content-fade

Zastosuj gradient przezroczystości na krawędziach treści, aby wskazać obszary, które można przewijać, lub zamaskować tekst za paywallem.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

stabilize-reactive-state

Zarządzaj terminami lub harmonogramami zadań w widokach opartych na danych bez nieoczekiwanych skutków ubocznych wynikających z udostępnionego stanu modyfikowalnego.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

stack-drill-down

Twórz pełnoekranową nawigację hierarchiczną, która umożliwia użytkownikom przechodzenie do bardziej szczegółowego widoku widoków zagnieżdżonych i przesuwanie lub przewijanie w celu powrotu, przy jednoczesnym zachowaniu synchronizacji historii przeglądania.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

style-parent-with-has

Stylizowanie elementów nadrzędnych pola formularza (np. etykiet lub zestawów pól), gdy pole jest nieprawidłowe.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

support-global-calendar-systems

Wyświetlanie i obliczanie dat w systemach kalendarzowych innych niż gregoriański (np. islamskim, hebrajskim lub chińskim) z dokładnością odpowiednią dla użytkowników z różnych krajów.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

swipe-to-remove

Umożliw użytkownikom wykonywanie działań na elementach listy (usuwanie, archiwizowanie, oznaczanie jako przeczytane itp.) za pomocą gestu przesuwania w poziomie, aby mogli szybko przetwarzać wpisy bez klikania osobnego elementu sterującego.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

visually-stable-font-fallbacks

Zdefiniuj style czcionek tak, aby tekst pozostał czytelny i wizualnie spójny w przypadku zamiany preferowanej czcionki na jedną z czcionek zastępczych (lub odwrotnie).

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

visually-stable-mixed-fonts

Określ style czcionek tak, aby tekst był czytelny i wizualnie spójny w sytuacjach, gdy do renderowania jednego bloku tekstu używa się wielu czcionek.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

visually-texture-content

Stosuj realistyczne wzory zużycia i tekstury do elementów, aby nadać im wygląd organiczny, postarzany lub fizyczny.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

webmcp

agentic-forms

Udostępniaj funkcje po stronie klienta jako narzędzia dla agentów AI, dodając do standardowych formularzy HTML atrybuty WebMCP.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie

agentic-javascript-tools

Programowo rejestruj funkcje JavaScript po stronie klienta jako narzędzia dla agentów AI za pomocą interfejsu WebMCP Imperative API.

Wykorzystywane funkcje:

Wyświetl przypadek użycia w GitHubie