Przewodniki po współczesnych technologiach internetowych

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

Zastosuj niestandardowe efekty wizualne z programami do cieniowania WebGL do treści HTML.

Wskazówki dotyczące kolorów w internecie, w tym wymagania dotyczące kontrastu, jasne i ciemne schematy kolorów, tryb wymuszonych kolorów oraz generowanie odcieni i cieni z koloru podstawowego.

Przycinaj elementy i ich zawartość do dowolnego kształtu, takiego jak symbol, pociągnięcie pędzla lub tekstura, aby uzyskać bardziej wyraziste projekty.

Dodawaj dekoracje tekstu, takie jak podkreślenia, nadkreślenia, przekreślenia lub całkowicie niestandardowe kształty, z animacjami odkrywania, niestandardowymi przesunięciami i końcowymi wcięciami oraz elastycznym pomijaniem atramentu.

Dostosowywanie koloru lub grubości paska przewijania

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

Zintegruj interaktywne elementy HTML ze sceną 3D.

Wybierz czytelny kolor tekstu z wystarczającym kontrastem na dynamicznym kolorze tła.

Spraw, aby każdy wiersz wielowierszowego nagłówka lub kompozycji miał tę samą szerokość, jak w przypadku typografii w stylu plakatu lub nagłówka wielowierszowego. W przeciwieństwie do tekstu wyjustowanego, tekst jest dopasowywany do szerokości, a nie rozciągany.

Przechwytywanie i eksportowanie dynamicznych treści HTML jako obrazów lub klatek wideo z poziomu elementu canvas.

Udostępniaj treści renderowane w elemencie canvas funkcjom przeglądarki, takim jak technologie wspomagające osoby z niepełnosprawnością, tłumaczenie czy tryb czytania.

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

Precyzyjne wyrównanie w pionie tekstu o dowolnej czcionce. Na przykład dokładnie takie samo dopełnienie wizualne nad i pod tekstem lub wyrównanie tekstu idealnie do sąsiadujących ikon lub obrazów.

Możesz łączyć kilka kształtów, aby tworzyć złożone wycięcia lub efekty „wycinania” w elementach, np. dodawać do nich wycięcia.

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

Zamiast odtwarzać elementy interfejsu generowane przez przeglądarkę, takie jak zaznaczanie tekstu, paski przewijania, elementy sterujące formularzy i selektory, za pomocą elementów niestandardowych, możesz je stylizować za pomocą CSS.

Sprawdzone metody dotyczące typografii w internecie, w tym jednostki rozmiaru czcionki, wysokość wiersza, zawijanie i równoważenie tekstu oraz płynny typ, który skaluje się wraz z obszarem widocznym na ekranie.

efekty wizualne z CSS, takie jak warstwowe cienie, tryby mieszania, gradienty z przewidywalną interpolacją kolorów oraz wzory, takie jak paski, szachownice, kropki i wykresy kołowe utworzone wyłącznie z gradientów;

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

Zdefiniuj style czcionek tak, aby tekst był czytelny i spójny wizualnie w sytuacjach, gdy do renderowania pojedynczego bloku tekstu używanych jest kilka czcionek.

Zastosuj realistyczne wzory tekstur i efekty starzenia, aby nadać elementom wygląd naturalnych, starych lub fizycznych materiałów.

Utwórz pasek postępu przewijania, krokowy moduł śledzenia postępów lub dowolny wizualny element, który informuje, jak daleko użytkownik przewinął stronę lub sekcję.

Utwórz karuzelę slajdów z obrazami lub innymi elementami wizualnymi, w której każdy slajd jest animowany, gdy pojawia się na środku lub znika z obszaru przewijania. Slajdy mogą na przykład pojawiać się i znikać, obracać się, powiększać lub zmniejszać itp.

Wymuszanie trybu jasnego lub ciemnego w przypadku niektórych elementów (np.bloków kodu, odtwarzaczy multimedialnych itp.) niezależnie od schematu kolorów strony.

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 przechodzi do pozycji zastępczej.

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

Utwórz tabelę danych, która przedstawia dane w formie tabeli z odpowiednią semantyką nagłówków i pozostaje czytelna oraz łatwa w nawigacji na małych ekranach i przy użyciu technologii wspomagających osoby z niepełnosprawnością.

tworzyć 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 przewija stronę.

Utwórz nakładki z cieniem przewijania, gradienty lub strzałki kierunkowe, które pojawiają się tylko wtedy, gdy w danym kierunku jest więcej treści do przewinięcia.

Płynnie animuj stały nagłówek lub okładkę na całą stronę podczas przewijania, aby dynamicznie zmniejszać, dodawać cienie i przekształcać układ na wstępnie zdefiniowanym dystansie przewijania.

Twórz przyklejone nagłówki sekcji lub paski nawigacyjne, które zmieniają się wizualnie, gdy są „przyklejone” u góry, np. zmieniają schemat kolorów lub zyskują cień.

Wyświetlanie ikon i zarządzanie nimi. Ikony można ustawiać i parametryzować za pomocą CSS. Szybko się wczytują, są wyraźne w każdej rozdzielczości i są odpowiednio widoczne dla technologii wspomagających osoby z niepełnosprawnością (lub są przed nimi ukryte).

Umieść menu, wyskakujące okienka lub panele czynności kontekstowych powiązane z przyciskiem aktywującym, aby automatycznie odwracały osie na krawędziach widocznego obszaru, zamiast się przycinać.

Utwórz komponent karty, który dostosowuje swoją prezentację do dostępnego miejsca i zawartości.

Utwórz komponent menu, który wyświetla listę opcji lub działań, z obsługą zagnieżdżonych podmenu.

Wyróżnianie aktualnie widocznej sekcji strony w menu nawigacyjnym

Utwórz stylizowany pasek postępu, który informuje o zakończeniu zadania lub procesu, zarówno w stanach określonych, jak i nieokreślonych.

Utwórz komponent karty informacyjnej, który wyświetla interaktywny, uporządkowany podgląd strony, do której prowadzi link określonego typu (np. profil użytkownika), gdy użytkownik najeżdża na niego kursorem.

Twórz trwałe przewodniki wprowadzające za pomocą powiązanych nakładek natywnych, które pozostają otwarte podczas interakcji z użytkownikiem.

Twórz nieinwazyjne powiadomienia wyskakujące i nakładki, aby wyświetlać trwałe, możliwe do układania w stos wiadomości i komunikaty o stanie.

Utwórz komponent przełącznika trybu ciemnego, który umożliwia użytkownikom zastąpienie preferencji schematu kolorów systemu dla bieżącej witryny.

Utwórz komponent okna modalnego lub niemodalnego, który jest dostępny, odpowiednio zarządza fokusem i można go zamknąć w sposób, jakiego użytkownicy oczekują na każdej platformie.

Utwórz wskaźnik oczekiwania, który informuje wszystkich użytkowników o stanie zajętości, uwzględnia preferencje dotyczące ograniczenia ruchu i efektywnie animuje.

Utwórz komponent panelu nawigacji, który po uruchomieniu przyciskiem menu wysuwa się z boku i nakłada na istniejącą treść strony, a po zamknięciu (przez przesunięcie, kliknięcie poza nim lub naciśnięcie klawisza Escape) wysuwa się z powrotem.

Utwórz komponent okręgu postępu, który wizualnie przedstawia stan ukończenia zadania lub procesu, z obsługą treści w środku i stylem zgodnym z marką.

Twórz pełnoekranową nawigację hierarchiczną, która umożliwia użytkownikom przechodzenie do widoków zagnieżdżonych i powrót przez przesunięcie palcem lub nawigację, przy zachowaniu synchronizacji historii przeglądarki.

Stylizuj pola wyboru, w tym ikony niestandardowe, układ, kolory i animacje zaznaczania/odznaczania, zachowując przy tym natywne funkcje i ułatwienia dostępu.

Twórz efekty stopniowego pojawiania się, powiększania lub inne złożone efekty odkrywania elementów, gdy pojawiają się one w obszarze przewijania (lub widocznym obszarze) i znikają z niego podczas przewijania przez użytkownika.

Płynne przejście elementu między 2 pozycjami elementu docelowego. Na przykład przeniesienie podkreślenia wybranej karty między wcześniej wybraną kartą a obecnie wybraną kartą.

Płynnie ukrywaj i pokazuj elementy, gdy są dodawane do DOM lub z niego usuwane albo gdy przełączane są ich wartości wyświetlania.

Animowanie elementów takich jak okna, wyskakujące okienka i etykietki, gdy pojawiają się w górnej warstwie lub z niej znikają.

Obsługa przeciągania, aby przesuwać pływający element po stronie.

Twórz efekty oparte na przewijaniu (takie jak paralaksa), w których warstwy pierwszego planu i tła poruszają się z różną szybkością, co daje wrażenie głębi, gdy użytkownik przewija stronę.

Wyróżniaj wizualnie aktualnie przyciągnięty element nieinteraktywny w karuzelach, galeriach lub pełnoekranowych widokach z przewijaniem z przyciąganiem. Może to być na przykład rozwinięcie karty po przyciągnięciu lub wyświetlenie ukrytych treści.

Przed rozpoczęciem przejścia widoku między dokumentami upewnij się, że stan strony o kluczowym znaczeniu jest wczytany i stabilny. Oznacza to, że przed przejściem wczytywane i stosowane są krytyczne style CSS, wczytywany i uruchamiany jest krytyczny kod JavaScript, a kod HTML widoczny w początkowym widoku strony jest analizowany.

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

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

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.

Przełączanie widoczności okna lub wyskakującego okienka za pomocą przycisku bez konieczności pisania kodu JavaScript.

Animuj zmiany stanu wizualnego, aby odzwierciedlić kierunek nawigacji użytkownika, np. wysuwanie nowych treści z prawej strony podczas przechodzenia do przodu lub z lewej strony podczas powrotu do poprzedniego ekranu.

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

Zaznaczaj dowolne zakresy tekstu na stronie, takie jak wyniki wyszukiwania, błędy pisowni lub kursory do wspólnej edycji.

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

Wyświetlaj podgląd na żywo efektu kliknięcia przycisku, gdy użytkownik wykaże zainteresowanie (np. najeżdżając kursorem, zaznaczając lub przytrzymując), ale zanim kliknie.

Utwórz okno modalne, które można zamknąć przez kliknięcie lub dotknięcie obszaru poza nim.

Animuj interfejs za pomocą przejść CSS, animacji, animacji sterowanych przewijaniem i przejść widoku, zachowując ruch w kompozytorze i uwzględniając ustawienia dotyczące ograniczenia ruchu.

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

Utrzymuj okno modalne, element pełnoekranowy lub natywne wyskakujące okienko w stanie widocznym i aktywnym, gdy jego podstawowy węzeł DOM zostanie przeniesiony lub zmieni się jego element nadrzędny w DOM.

Twórz niestandardowe, oparte na fizyce efekty animacji i przejść, takie jak odbicie i sprężyna, które wyglądają bardziej naturalnie i atrakcyjnie niż tradycyjne krzywe wygładzania.

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

Zapobiegaj przewijaniu strony pod spodem, gdy otwarte jest okno modalne.

Wizualnie łącz trwałe elementy w różnych stanach strony lub nawigacjach w aplikacji jednostronicowej (SPA) (np. rozwijanie miniatury produktu do pełnowymiarowego banera powitalnego), płynnie zmieniając ich rozmiar, pozycję lub inne właściwości stylizacji.

Animuj zmiany stanu w pojedynczym komponencie (karcie, liście, panelu lub innym poddrzewie), podczas gdy reszta strony pozostaje interaktywna, a inne przejścia są wykonywane jednocześnie.

Zapewnij wizualne informacje zwrotne w czasie rzeczywistym w połączonych elementach interfejsu, gdy użytkownik przewija treści wyrównane do przyciągania, zanim gest przewijania zostanie zakończony.

Synchronizuj wskaźniki nawigacji, połączone panele treści i śledzenie statystyk z aktywnie przyciąganym elementem w kontenerze z możliwością przewijania.

animowanie właściwości wizualnych elementu docelowego, takich jak zanikanie tła, zmiana koloru tła lub tworzenie efektów scrollytellingu, które są całkowicie zależne od pozycji scrollportu zupełnie innego elementu;

Ukrywaj treści za pomocą wzorców takich jak akordeony, karty i sekcje „Czytaj więcej”, upewniając się, że ukryty tekst pojawia się podczas natywnego wyszukiwania „Znajdź na stronie”, umożliwia indeksowanie przez wyszukiwarki, obsługuje precyzyjne linki do fragmentów adresów URL i zachowuje dostępność ARIA.

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

Wyświetlaj etykietkę lub dodatkowe informacje, gdy użytkownik najeżdża kursorem na element interaktywny, zaznacza go lub przytrzymuje, bez konieczności klikania.

Wdrażanie dostępnej nawigacji przestrzennej za pomocą klawiszy strzałek, która działa prawidłowo w różnych trybach układu (siatka itp.)

Pozwól użytkownikom wykonywać działania na elementach listy (usuwać, archiwizować, oznaczać jako przeczytane itp.) za pomocą gestu przesunięcia w poziomie, aby mogli szybko przetwarzać wpisy bez konieczności klikania osobnego elementu sterującego.

Umożliwiaj użytkownikom przesunięcie palcem w poziomie po elemencie listy lub panelu treści, aby wyświetlić przyciski czynności kontekstowych lub menu boczne bez automatycznego wywoływania działania.

Uruchamiaj efekty wizualne, animacje lub zmiany fokusu na elemencie docelowym dopiero po zakończeniu płynnego przewijania programowego do tego elementu.

Zezwalaj użytkownikom na swobodne przesuwanie lub przewijanie dwuwymiarowych powierzchni, takich jak mapy, powiększone obrazy, nieskończone obszary robocze lub duże siatki danych, w obu kierunkach (po przekątnej lub ze zmianą kierunku w trakcie gestu) bez blokowania gestu na jednej osi poziomej lub pionowej.

Utwórz niestandardowy komponent wyboru z animowanym menu. Na przykład menu może się pojawiać lub wysuwać, a opcje mogą być animowane po wybraniu.

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

Stylizuj natywny suwak zakresu z niestandardowymi stanami ścieżki, kciuka, wypełnienia i aktywności, zachowując natywne funkcje i ułatwienia dostępu.

Twórz niestandardowe elementy wyboru, których przycisk, selektor, ikona strzałki i znacznik wyboru idealnie pasują do typografii, kolorów, odstępów i obramowań Twojej marki lub systemu projektowania.

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

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

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

Utwórz dostępny przełącznik z atrybutem przełącznika natywnego HTML, który w przypadku braku obsługi będzie zastępowany stylizowanym polem wyboru.

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

Twórz niestandardowe selektory, których opcje są rozmieszczone w unikalny lub interesujący sposób, a nie w tradycyjnej liście opcji.

Zezwalaj na powiększanie i zmniejszanie pól formularza, aby dopasować je do danych wprowadzanych przez użytkownika, np. podczas wpisywania tekstu lub wybierania innej opcji. Zastosuj maksymalne i minimalne limity rozmiaru, aby utworzyć dynamiczne i elastyczne pola formularza, które pasują do projektu strony.

Sprawdzone metody tworzenia dostępnych, bezpiecznych i przyjaznych dla użytkownika formularzy internetowych. Skorzystaj z tego przewodnika podczas tworzenia lub modyfikowania formularzy, danych wejściowych i procesów przesyłania.

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

Zaimplementuj bezpieczne przesyłanie za pomocą klawisza Enter w polach tekstowych i jednowierszowych polach wprowadzania (czat, wyszukiwanie, zmiana nazwy w wierszu) dla użytkowników edytora IME (edytora metody wprowadzania), aby zapobiec przesyłaniu niekompletnego tekstu.

Komunikat o błędzie dotyczący pominiętych lub pustych wymaganych pól formularza wyświetlaj tylko po interakcji użytkownika, aby uniknąć przedwczesnych błędów i zapewnić, że informacje zwrotne będą przekazywane w odpowiednim czasie i będą istotne w kontekście działań użytkownika.

Utwórz niestandardowy komponent wyboru, którego opcje mogą zawierać złożone formatowanie HTML (np. obrazy, ikony i inne zaawansowane formatowanie), a nie tylko zwykły tekst.

Sprawdź, czy w menu wyboru została wybrana opcja inna niż domyślna, dopiero po interakcji użytkownika z elementem sterującym.

Weryfikuj numery telefonów użytkowników i jednorazowe kody dostępu wysyłane SMS-em dzięki automatycznemu wyodrębnianiu kodu i dostępnemu formularzowi.

Wyświetlaj informacje zwrotne dotyczące sprawdzania poprawności 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 początkowej interakcji, aby uniknąć przedwczesnych błędów podczas wczytywania strony lub wpisywania danych przez użytkownika.

Zadbaj o to, aby elementy niestandardowe były domyślnie dostępne, ustawiając role i stan ARIA za pomocą domieszki ARIA ElementInternals, zarządzając fokusem za pomocą właściwości delegatesFocus i utrzymując relacje ARIA w obrębie jednego korzenia shadow.

Definiowanie, rejestrowanie i zarządzanie cyklem życia autonomicznych elementów niestandardowych, w tym regułami konstruktora, wywołaniami zwrotnymi cyklu życia, czasem uaktualniania, odzwierciedleniem atrybutów/właściwości i konwencjami nazewnictwa.

Spraw, aby niestandardowy element sterujący uczestniczył natywnie w formularzach za pomocą formAssociated i ElementInternals, przesyłając własną wartość, integrując się z walidacją ograniczeń i reagując na resetowanie, wyłączanie i przywracanie stanu.

Praktyczne wskazówki dotyczące nowoczesnej architektury HTML, semantyki, natywnych interaktywnych interfejsów API (Dialog, Popover, Details), zarządzania fokusem i priorytetyzacji zasobów. Skorzystaj z tego przewodnika, aby uporządkować dokumenty internetowe, wdrożyć nakładki natywne lub zoptymalizować kolejność wczytywania zasobów.

Wyrenderuj element niestandardowy po stronie serwera, a następnie wykonaj hydratację na miejscu bez ponownego renderowania i bez wyświetlania nieostylowanej treści.

Dowiedz się, jak hermetyzować model DOM i style komponentu za pomocą modelu Shadow DOM, efektywnie tworzyć drzewo za pomocą szablonów HTML i wyświetlać treści konsumentów za pomocą przedziałów.

Stylizuj elementy poza granicą shadow DOM za pomocą selektorów :host, właściwości dziedziczonych i niestandardowych na potrzeby motywów, ::slotted i ::part oraz warstw kaskadowych i zapytań o kontener wewnątrz komponentów.

Zasady dotyczące tworzenia i używania komponentów internetowych, w tym elementów niestandardowych, modelu Shadow DOM, szablonów i miejsc, deklaratywnego modelu Shadow DOM, stylów w ramach modelu Shadow DOM, elementów niestandardowych powiązanych z formularzami i wymagań dotyczących ułatwień dostępu. Skorzystaj z tego przewodnika, gdy tworzysz komponenty interfejsu wielokrotnego użytku, systemy projektowania lub elementy niestandardowe renderowane na serwerze.

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

obliczyć rozmiar elementu na podstawie jego rozmiaru wewnętrznego, zapewniając jednocześnie, że mieści się on w określonych ograniczeniach projektowych;

Utwórz komponent, który zmienia swój styl w zależności od stanu jednego z 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 (lub nie).

Warunkowo stosuj określone reguły lub deklaracje CSS tylko wtedy, gdy przeglądarka obsługuje określoną regułę at-rule.

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

nowoczesne układy CSS, takie jak flexbox, siatka, podsiatka, zapytania o kontenery, pozycjonowanie kotwic i rozmiar wewnętrzny; Wykorzystaj tę umiejętność podczas projektowania komponentów interfejsu lub układów stron, które są elastyczne.

Praktyczne wskazówki dotyczące nowoczesnej architektury CSS, w tym kaskady, selektorów, zakresu, zagnieżdżania i tokenów projektowych. Korzystaj z tego przewodnika podczas tworzenia stylów lub zarządzania systemami projektowania.

Zdefiniuj 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 komponentu.

płynnie skalować elementy, takie jak rozmiar czcionki, odstępy i rozmiary multimediów, na podstawie rozmiaru kontenera nadrzędnego, zamiast używać stałych punktów przerwania;

Animuj lub zastępuj poszczególne właściwości przekształcenia CSS (np. przesunięcie, obrót, skalowanie) niezależnie od innych właściwości przekształcenia w jednym elemencie.

Dostosuj widoczną granicę przycinania elementu, aby wyrównać ją z krawędzią treści, dopełnienia lub obramowania albo z określonym przesunięciem od dowolnej z nich. Pozwala to na bardziej precyzyjne przycinanie treści.

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

Twórz interfejs, który dostosowuje się do rozmiaru kontenera i widocznego obszaru, w tym zapytania o kontener, dynamiczne jednostki widocznego obszaru, formaty obrazu i elastyczną typografię.

Kieruj reklamy na elementy na podstawie przecięcia lub sumy selektorów i warunkowych reguł @, minimalizując jednocześnie powtórzenia.

Twórz komponenty, które dostosowują logikę wizualną na podstawie kontekstu semantycznego, używając zapytań o styl kontenera CSS.

Utwórz komponent, którego style mogą być warunkowo zależne od jego szerokości lub wysokości, a nie od szerokości lub wysokości widocznego obszaru. Może to być na przykład 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 pomocniczy w zależności od szerokości.

Stylizuj elementy nadrzędne pola formularza (np. etykiety lub zestawy pól), gdy pole jest nieprawidłowe.

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

Obliczaj czas, który upłynął lub pozostał między datami i godzinami, bilansuj jednostki czasu i formatuj zrozumiałe dla człowieka zlokalizowane czasy trwania za pomocą Temporal.Duration i Intl.DurationFormat.

Modeluj niezależne od lokalizacji daty kalendarzowe, godziny zegarowe, daty częściowe (cykliczne urodziny, daty ważności kart kredytowych) i powtarzające się miesięczne interwały bez przesunięcia strefy czasowej za pomocą typów Temporal Plain.

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

Analizuj, sortuj i mierz odstępy między sygnaturami czasowymi ISO 8601 w milisekundach lub nanosekundach bez kolizji obcinania daty za pomocą Temporal.Instant.

wyświetlanie i obliczanie dat w systemach kalendarzy innych niż gregoriański (np. islamskim, hebrajskim lub chińskim) w sposób dokładny dla użytkowników z całego świata;

Kompilowanie kodu C/C++ do WebAssembly za pomocą Emscripten

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

obliczać łączny czas, jaki użytkownik faktycznie spędził na przeglądaniu strony, z wyłączeniem okresów, gdy karta była w tle;

warunkowo wczytywać lub inicjować zależności asynchroniczne (np. importować polyfille w przypadku brakujących funkcji internetowych) bez konieczności złożonej koordynacji wszystkich zależności skryptów strony.

Grupuj i wysyłaj wiele zdarzeń związanych z danymi analitycznymi, telemetrią i Core Web Vitals w jednym sygnale, aby zminimalizować obciążenie sieci i serwera, jednocześnie dostarczając aktualizacje w czasie rzeczywistym.

Skróć czas renderowania stron internetowych z dużą ilością treści (np. stron 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.

Aby zachować płynność przewijania, odłóż kosztowne operacje, takie jak aktualizacje DOM, pobieranie danych, śledzenie statystyk czy ponowne obliczanie układu, do momentu zakończenia przewijania.

Dostarczaj zoptymalizowane obrazy dekoracyjne (takie jak tła, ikony interfejsu lub złożone maski), udostępniając jednocześnie formaty obrazów nowej generacji (takie jak AVIF lub WebP) oraz różne gęstości pikseli (np. 1x i 2x), aby przeglądarka mogła dynamicznie negocjować najlepszą kombinację rozmiaru pliku i jakości wizualnej pod kątem możliwości urządzenia użytkownika.

Zmniejsz priorytet pobierania danych w tle za pomocą interfejsu Fetch API, aby zapobiec rywalizacji o sieć z żądaniami inicjowanymi przez użytkownika.

Niezawodnie określa, czy strona została początkowo wczytana w tle, nawet jeśli skrypt jest wczytywany asynchronicznie po tym, jak użytkownik otworzył stronę na pierwszym planie.

Oszczędzaj zasoby systemowe i baterię, wstrzymując wykonywanie kodu JavaScript w tle (np. animacji <canvas>, renderowania WebGL czy częstego odpytywania danych WebSocket), gdy komponent jest poza ekranem, i wznawiając je, gdy komponent ponownie pojawi się na ekranie.

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

Dostarczanie i renderowanie testów A/B, testów wielowymiarowych lub innych eksperymentów za pomocą kodu JavaScript po stronie klienta w celu zmiany lub wstrzyknięcia kodu HTML, CSS i JavaScript bez wyświetlania oryginalnej treści przed migotaniem lub błyskiem w celu wyświetlenia treści eksperymentu.

Zidentyfikuj wolno działający kod JavaScript i inne przyczyny słabej responsywności interakcji do kolejnego wyrenderowania (INP).

Identyfikowanie skryptów, które najbardziej przyczyniają się do powstawania długich klatek animacji

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

Aby oszczędzać przepustowość i zmniejszyć obciążenie sieci podczas początkowego wczytywania strony, odłóż pobieranie zasobów wideo i audio poza ekranem, w tym obrazów plakatów wideo i wstępnie załadowanych danych multimedialnych, do momentu, gdy odtwarzacz multimedialny zbliży się do widocznego obszaru.

Mierz czas potrzebny na wyrenderowanie na ekranie nowych aktualizacji treści po interakcjach użytkownika i nawigacji po stronie klienta.

Zoptymalizuj priorytet wczytywania obrazów kandydujących do największego wyrenderowania treści (LCP) i obniż priorytet obrazów niekrytycznych, aby zmniejszyć opóźnienia wczytywania zasobów krytycznych.

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

Zoptymalizuj priorytet wczytywania skryptów, zwiększając priorytet krytycznych skryptów asynchronicznych i obniżając priorytet skryptów nieistotnych lub skryptów wczytywanych na końcu treści, aby poprawić sekwencjonowanie i skrócić opóźnienia.

Przyspiesz interakcje i zwiększ ich responsywność (obniżając wyniki interakcji do kolejnego wyrenderowania, INP) przez unikanie ponownego obliczania układu w złożonych układach, takich jak panele z dużą ilością danych lub siatki w stylu arkusza kalkulacyjnego.

Deklaratywnie aktualizuj stronę za pomocą treści przesyłanych później do tego samego dokumentu HTML lub za pomocą imperatywnych interfejsów API JavaScriptu.

Praktyczne wskazówki dotyczące optymalizacji nowoczesnych aplikacji internetowych. Skorzystaj z tego przewodnika, aby przeprowadzić kontrolę wydajności, zoptymalizować dane dotyczące wczytywania, naprawić powolne interakcje i zoptymalizować Core Web Vitals (LCP, INP, CLS).

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

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.

Planuj zadania o różnych priorytetach, aby mieć pewność, że zadania o kluczowym znaczeniu będą wykonywane jako pierwsze, a zadania w tle będą odkładane na później.

Praktyczne wskazówki dotyczące kodowania, które pomogą Ci tworzyć dostępne aplikacje internetowe. Obejmują one semantyczny kod HTML, zarządzanie fokusem, formularze, multimedia i testowanie. Wykorzystaj tę umiejętność podczas sprawdzania lub wdrażania funkcji ułatwień dostępu, nawigacji za pomocą klawiatury lub ARIA.

Zsynchronizuj stany ułatwień dostępu w kodzie (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.

Używaj treści generowanych przez CSS (::before/::after) w sposób, który zapewnia dostępność, w tym tekst alternatywny dla treści dekoracyjnych.

Uwzględniaj preferencje systemu operacyjnego dotyczące skali tekstu na stronie, aby rozmiary czcionek, układ i pomiary oparte na jednostkach rem były zgodne z ustawieniami ułatwień dostępu użytkownika.

Bezpiecznie porównuj i weryfikuj źródła stron i witryny w wiadomościach między dokumentami i adresach URL bez podatnego na błędy analizowania ciągów znaków.

Ustalaj wspólne obiekty tajne za pomocą enkapsulacji klucza publicznego lub uzgadniania kluczy (w tym ochrony hybrydowej i postkwantowej) oraz szyfruj dane wrażliwe w przeglądarce za pomocą uwierzytelnionego szyfrowania.

Uzyskiwanie dostępu do zasobów w sieci lokalnej użytkownika lub interfejsie sprzężenia zwrotnego z publicznej aplikacji internetowej.

uwierzytelniać powracającego użytkownika za pomocą klucza dostępu podczas logowania podstawowego;

Po pomyślnym zalogowaniu się za pomocą hasła zarejestruj klucz dostępu dla istniejącego użytkownika bez wyświetlania powiadomienia.

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

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

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

Kompleksowe wskazówki i zasady dotyczące wdrażania WebAuthn i kluczy dostępu w aplikacjach internetowych. Skorzystaj z tego przewodnika, gdy zajmujesz się rejestracją, uwierzytelnianiem, zarządzaniem lub ponownym uwierzytelnianiem kluczy dostępu.

Zapobiegaj atakom typu XSS opartym na DOM, definiując zasady dotyczące zaufanych typów, aby usuwać informacje z niezaufanego kodu HTML, używając tych zasad podczas zapisywania w elementach DOM, takich jak innerHTML, i egzekwując zaufane typy za pomocą (standard) Content Security Policy.

Uwierzytelniaj powracających użytkowników na miejscu za pomocą zapisanych kluczy dostępu lub haseł, zanim przejdą na stronę logowania lub przerwą proces.

Ogranicz komunikację strony lub instancji roboczej tylko do jawnej listy dozwolonych punktów końcowych sieci, aby zapobiec nieautoryzowanym żądaniom osób trzecich i wyciekom danych po stronie klienta.

Bezpiecznie analizuj i wyświetlaj niezaufane treści HTML wprowadzone przez użytkownika, usuwając niebezpieczne elementy i atrybuty.

Sprawdź integralność kryptograficzną zewnętrznych skryptów, arkuszy stylów, czcionek i obrazów wczytywanych ze źródeł zewnętrznych oraz określ, czy te żądania wysyłają dane logowania lub adresy URL stron odsyłających.

Podpisuj i weryfikuj wiadomości, tokeny lub artefakty w przeglądarce, używając klasycznych lub odpornych na złamanie za pomocą komputera kwantowego (postkwantowych) kluczy asymetrycznych, aby zapewnić integralność danych i autentyczność.

Sprawdź, czy użytkownik jest właścicielem adresu e-mail podczas tworzenia konta, logowania się lub odzyskiwania konta, bez wysyłania jednorazowego kodu dostępu ani magicznego linku.

Wytyczne dotyczące bezpieczeństwa zapobiegawczego dla twórców stron internetowych (XSS, CSP, pliki cookie, izolacja od zasobów z innych domen). Wykorzystaj tę umiejętność, aby bezpiecznie przeprowadzić proces audytu, testowania i wdrażania zasad bezpieczeństwa.

Praktyczne wskazówki dla programistów stron internetowych dotyczące wdrażania wbudowanych funkcji ochrony prywatności, minimalizacji danych, audytów zewnętrznych i bezpiecznego przetwarzania danych. Wykorzystaj tę umiejętność podczas projektowania aplikacji, integrowania usług innych firm, obsługi danych użytkowników lub konfigurowania nagłówków zabezpieczeń.

Przenoszenie zainstalowanej aplikacji internetowej do nowego źródła z zachowaniem konfiguracji użytkownika i skrótów na poziomie systemu operacyjnego.

wykrywanie języka treści generowanych przez użytkowników lub zawartości witryny już obecnej w witrynie;

Uruchamiaj wnioskowanie w języku naturalnym na urządzeniu w przeglądarce za pomocą interfejsu Prompt API, ze strumieniowymi danymi wyjściowymi, ustrukturyzowanymi odpowiedziami JSON i zarządzaniem sesjami wieloetapowymi.

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

Tłumacz tekst na różne języki za pomocą interfejsu Translator API na urządzeniu.

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

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

Z tego przewodnika dowiesz się, jak wdrożyć WebMCP (Web Model Context Protocol) w aplikacjach przeglądarkowych, udostępniając funkcje po stronie klienta jako narzędzia dla agentów AI za pomocą deklaratywnych lub imperatywnych interfejsów API.