Nowości w interfejsie internetowym: podsumowanie konferencji I/O 2025

Una Kravets

Opublikowano: 14 sierpnia 2025 r.

Sezon wydarzeń Google I/O dobiega końca. W tym poście podsumowujemy najważniejsze informacje dotyczące CSS i interfejsu internetowego, które zostały przedstawione na naszych wydarzeniach w tym roku.

Niezwykle zaawansowane funkcje, o których deweloperzy kiedyś tylko marzyli, pojawiły się w przeglądarkach i szybciej niż kiedykolwiek wcześniej zyskują kompatybilność międzyprzeglądarkową. Jednak pomimo tego postępu niektóre z najpopularniejszych wzorców interfejsu użytkownika są zaskakująco trudne do prawidłowego wdrożenia. Aby tworzyć komponenty, które powinny być prostsze, często musisz korzystać z frameworków JavaScript, złożonych sztuczek CSS i ogromnych ilości niestandardowego kodu.

Zespół Chrome we współpracy z innymi dostawcami przeglądarek, organizacjami normalizacyjnymi, takimi jak CSSWG i WHATWG, oraz grupami społecznościowymi, takimi jak Open UI, koncentruje się na tym, aby te podstawowe wzorce interfejsu były naprawdę proste do wdrożenia.

Menu wyboru z możliwością dostosowania

Element <select> jest niezbędny w przypadku formularzy, ale jego wewnętrzna struktura była historycznie chroniona przez przeglądarkę, co sprawiało, że spójne i kompleksowe stylowanie CSS było niemal niemożliwe. Aby stworzyć lepszy element <select>, musisz poznać jego elementy składowe: interfejs Popover API i CSS Anchor Positioning API.

Interfejs Popover API: teraz w Baseline

Niestandardowe menu wymaga pływającego pola z opcjami, które pojawia się nad wszystkimi innymi elementami interfejsu, jest łatwe do zamknięcia i prawidłowo zarządza fokusem. Interfejs Popover API obsługuje wszystkie te funkcje, a od tego roku osiągnął stan „Baseline Newly available”, co oznacza, że jest stabilny w każdej głównej przeglądarce.

Tworzenie wyskakującego okienka wymaga 2 elementów: elementu wywołującego (np. <button>) i samego wyskakującego okienka. Połącz je, nadając wyskakującemu okienku atrybut id i atrybut [popover], a następnie odwołaj się do tego atrybutu id w atrybucie [popovertarget] przycisku.

Interfejs Popover API zarządza całym cyklem życia elementu, zapewniając:

• Renderowanie na wierzchu: koniec z problematycznym wskaźnikiem z-index.
• Opcjonalne możliwości lekkiego zamykania: zamyka się, gdy użytkownik kliknie poza obszarem wyskakującego okienka.
• Automatyczne zarządzanie zaznaczeniem: przeglądarka obsługuje nawigację po kartach w oknie wyskakującym i poza nim.
• Dostępne powiązania: podstawowy model interakcji jest obsługiwany natywnie.

Ulepszenie elementu <dialog>

Wyskakujące okienko jest przydatne, ale nie zawsze jest najlepszym wyborem. Na przykład w przypadku interakcji blokujących stronę, które wymagają opinii użytkownika, bardziej odpowiednie jest okno modalne <dialog>.

W <dialog> brakowało niektórych funkcji [popover], ale to się zmienia. Dzięki nowemu atrybutowi closedby="any" okna modalne obsługują teraz funkcję zamykania przez kliknięcie poza oknem lub naciśnięcie klawisza Escape.

Dodatkowo wywołania poleceń ([command] i [commandfor]) zapewniają deklaratywny sposób łączenia przycisku z działaniem, takim jak otwieranie okna za pomocą command="show-modal", bez użycia JavaScriptu.

Pozycjonowanie kotwicy CSS

Gdy pojawi się wyskakujące okienko, musi ono zostać umieszczone względem elementu, który je otworzył. Ręczne obliczanie tego za pomocą JavaScriptu jest podatne na błędy i może pogorszyć wydajność.

Od Chrome 125 możesz używać interfejsu CSS Anchor Positioning API. Ta nowa funkcja deklaratywnie łączy jeden element z innym, automatycznie zmieniając jego położenie, gdy zbliża się do krawędzi ekranu. Ta funkcja jest częścią inicjatywy Interop 2025, która ma na celu wprowadzenie w różnych przeglądarkach najbardziej oczekiwanych funkcji. Oznacza to, że do końca 2025 r. powinna być dostępna we wszystkich głównych przeglądarkach.

Chociaż możesz jawnie łączyć elementy za pomocą właściwości anchor-name i position-anchor, aktualizacja specyfikacji i Chrome 133 tworzy domyślną relację między elementem <popover> a wywołującym go elementem <button>. Znacznie upraszcza to kod i oznacza, że możesz teraz pozycjonować wyskakujące okienko za pomocą jednego wiersza CSS, np. position-area: bottom span-left.

Narzędzie do kotwiczenia na stronie chrome.dev pokazuje, jak używać position-area, aby uzyskać odpowiednie umiejscowienie:

Pójdź o krok dalej i zdefiniuj alternatywne pozycje za pomocą position-try-fallbacks, aby przeglądarka mogła zmieniać położenie kotwic i zapobiegać ich znikaniu z ekranu. Ten przykładowy projekt demonstruje wyskakujące okienko, które używa tej właściwości do wbudowanej logiki zmiany pozycji:

W pełni konfigurowalny <select>

W starszych wersjach Chrome wprowadzono już odpowiednie elementy, a w Chrome 134 pojawiły się wreszcie style natywne dla internetu w przypadku elementów <select>. Obejmuje to nową właściwość appearance, nowe pseudoelementy i element <selectedcontent>.

Aby odblokować dostosowywanie, zastosuj appearance: base-select; do elementu <select> i jego nowego pseudoelementu ::picker(select), który jest kierowany na listę opcji. Udostępnia to nowe wewnętrzne części do stylizacji, w tym:

• <selectedcontent>: reprezentuje zawartość wybranej opcji wyświetlanej na przycisku.
• ::picker-icon: ikona strzałki w dół
• <option>:checked i ::checkmark: do określania stylu wybranej opcji i jej wskaźnika w postaci znacznika wyboru.

Umożliwia to umieszczanie w opcjach szczegółowych treści i precyzyjną kontrolę nad wyświetlaniem. Możesz na przykład wyświetlać ikonę i podtytuł na liście opcji, ale ukrywać je w stanie zamkniętym za pomocą display: none w selectedcontent.

Najlepsze jest to, że ten interfejs API można stopniowo ulepszać. W przeglądarkach, które nie obsługują tych funkcji, użytkownicy nadal będą mogli korzystać z funkcjonalnego natywnego elementu wyboru. Zyskasz niestandardowy wygląd, zachowując wbudowaną dostępność, nawigację za pomocą klawiatury i integrację z formularzem natywnego elementu wyboru.

Karuzele

Karuzel można używać wszędzie w internecie, nie tylko w sekcjach głównych. Obejmuje to treści, które można przewijać w poziomie w ciasnych układach, takich jak interfejs sklepu z aplikacjami. Tworzenie karuzel w internecie nadal jest jednak trudne ze względu na wiele kwestii, takich jak zarządzanie stanem, zacinanie się przewijania, interaktywność i ułatwienia dostępu. Jeśli jednak się nad tym zastanowisz, karuzele to w zasadzie zaawansowane obszary przewijania z dodatkowymi elementami interfejsu.

Pierwsze kroki z przewijaniem

Aby utworzyć karuzelę, zacznij od listy elementów, które wykraczają poza kontener. Aby ukryć poziomy pasek przewijania, ale zachować możliwość przewijania treści, użyj scrollbar-width: none. Aby przewijanie było „szybkie”, zastosuj też właściwości scroll-snap-type i scroll-snap-align, które sprawiają, że elementy wskakują na swoje miejsce podczas przewijania.

Poprzedni i następny z ::scroll-button

Nowy pseudoelement ::scroll-button(), który pojawił się w Chrome 135, nakazuje przeglądarce wygenerowanie stanowych, dostępnych przycisków „Dalej” i „Wstecz”. Przeglądarka automatycznie obsługuje odpowiednie role ARIA, kolejność tabulacji, a nawet wyłącza przyciski, gdy dotrzesz do początku lub końca – wszystko to bez dodatkowego kodu JavaScript.

Aby zainicjować przyciski przewijania, podaj im treść i etykietę ułatwień dostępu, np.:

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

Określ styl tych przycisków i umieść je względem karuzeli nadrzędnej za pomocą pozycjonowania za pomocą kotwicy CSS, które jest zalecanym sposobem na to.

Nawigacja bezpośrednia za pomocą ::scroll-marker

W przypadku wskaźników punktowych lub miniaturek pseudoelementy ::scroll-marker i ::scroll-marker-group łączą znaczniki nawigacji bezpośrednio z elementami w kontenerze przewijania. Przeglądarka traktuje grupę jako tablist i obsługuje nawigację za pomocą klawiatury.

Podobnie jak w przypadku przycisków przewijania, zainicjuj znaczniki przewijania, akceptując je za pomocą właściwości content i podając etykietę ułatwiającą dostęp. W poniższym przykładzie do ustawienia etykiety znacznika przewijania użyto atrybutu danych. Dodatkowo umieść znaczniki przewijania w elemencie ::scroll-marker-group za pomocą właściwości scroll-marker-group. Na koniec zastosuj styl do aktywnego znacznika za pomocą nowej pseudoklasy :target-current. Oto przykład, jak może to wyglądać w przypadku podstawowej karuzeli:

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

Zapytania dotyczące stanu przewijania

Nowe funkcje CSS związane z przewijaniem pozwalają tworzyć bardziej dynamiczne i interaktywne karuzele. Zapytanie dotyczące stanu przewijania to nowe zapytanie o media, które jest stosowane na podstawie stanu przewijania. Istnieją 3 rodzaje zapytań o stan przewijania, do których można uzyskać dostęp za pomocą znaku scroll-state() w instrukcji @container. Są to:

• scroll-state(snapped): pasuje, gdy element znajduje się w pozycji „przyciągniętej”. W karuzelach jest to moment, w którym element jest wyśrodkowany.
• scroll-state(stuck): stylizowanie elementu, np. nagłówka, gdy jego element nadrzędny staje się przyklejony.
• scroll-state(scrollable): dodaj wskaźniki wizualne, np. efekt zanikania, aby pokazać, że można przewinąć do większej ilości treści.

Wszystko w jednym miejscu

Połączenie nowych elementów podstawowych karuzeli CSS, zapytań o stan przewijania i pozycjonowania elementów zakotwiczonych ułatwia tworzenie dostosowanych i interaktywnych karuzeli. Możesz pójść o krok dalej, dodając animacje oparte na przewijaniu, aby powiązać animacje bezpośrednio z pozycją przewijania. Dzięki temu uzyskasz efekty o wysokiej wydajności, takie jak skalowanie i zanikanie elementów podczas przewijania. Animacje te działają poza głównym wątkiem, co zapewnia płynne działanie.

Ten interaktywny karuzel łączy scroll-state() zapytania, ::scroll-button, ::scroll-marker, pozycjonowanie elementów zakotwiczonych CSS i :target-current.

Możesz też użyć nowej właściwości o nazwie interactivity, aby pomóc użytkownikom skupić się na aktywnych treściach. interactivity: inert umożliwia użytkownikowi zastosowanie bezwładności za pomocą CSS, dzięki czemu elementy karuzeli poza ekranem nie mogą być zaznaczane i są usuwane z drzewa ułatwień dostępu.

Dowiedz się więcej o karuzelach CSS.

Interaktywne karty informacyjne

Karty najazdowe – bogate wyskakujące okienka, które pojawiają się po najechaniu kursorem myszy na nazwę użytkownika lub link – są niezwykle przydatne, ale ich prawidłowe utworzenie jest bardzo trudne. Zapewnienie prawidłowego działania opóźnień, obsługi zdarzeń i obsługi na wielu urządzeniach może zająć dedykowanemu zespołowi wiele miesięcy. Pracujemy jednak nad nowym rozwiązaniem deklaratywnym, które powinno raz na zawsze rozwiązać ten problem.

Wyskakujące okienka wywoływane zainteresowaniem użytkownika, zawierające [interestfor]

Podstawą działania deklaratywnych kart najazdowych jest atrybut[interestfor]. Ta nowa funkcja zapewnia możliwości wyskakujących okienek, ale wywołuje je na podstawie „zainteresowania” użytkownika. Na przykład w przypadku urządzenia wskazującego zainteresowanie użytkownika może być wywołane przez najazd wskaźnika, nawigację po kartach za pomocą klawiatury lub długie naciśnięcie lub kliknięcie na ekranie dotykowym. Interakcja na urządzeniach mobilnych nie została jeszcze rozwiązana.

Aby przekształcić wyskakujące okienko oparte na kliknięciu w wyskakujące okienko oparte na zainteresowaniach, utwórz element wywołujący, który może być elementem <button> lub <a>, i nadaj mu atrybut [interestfor] równy atrybutowi id elementu [popover]. W HTML-u wygląda to tak:

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

Przeglądarka obsługuje całą złożoną logikę zdarzeń, w tym:

• Zdarzenia wejścia i wyjścia: najechanie kursorem na urządzeniach z precyzyjnym wskaźnikiem, nawigacja za pomocą klawiatury, długie naciśnięcie lub dotknięcie na urządzeniach z grubym wskaźnikiem.
• Opóźnienia zdarzeń: kontroluj opóźnienia wejścia i wyjścia za pomocą jednej właściwości CSS.

Ta funkcja obsługuje inne funkcje wyskakujących okienek, takie jak obsługa najwyższej warstwy, w której wyskakujące okienko jest renderowane w nowej warstwie nad resztą drzewa DOM. Semantyczne powiązania komponentów i model drzewa dostępności są obsługiwane natywnie.

Style wywołujących zainteresowanie

Wywołania związane z zainteresowaniami obejmują nowe możliwości. Jedną z nich jest możliwość kontrolowania opóźnień wejścia i wyjścia za pomocą właściwości CSS: interest-target-delay. Drugą jest możliwość stylizowania elementu wywołującego na podstawie tego, czy ma on zainteresowanie, czy nie, za pomocą pseudoklasy :has-interest.

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" wielofunkcyjny interfejs,

Kluczowym elementem układanki dla wywoływaczy zainteresowań jest nowy typ wyskakującego okienka: popover="hint". Główna różnica w porównaniu z innymi wyskakującymi okienkami polega na tym, że wyskakujące okienko z podpowiedzią nie zamyka innych wyskakujących okienek po otwarciu. To idealne rozwiązanie w przypadku etykietek lub kart podglądu, które powinny pojawiać się bez zamykania otwartego już menu lub okna czatu.

Umożliwia to deklaratywne tworzenie zaawansowanych, wielofunkcyjnych interfejsów. Pojedynczy przycisk może teraz mieć automatycznie wysuwane okienko z użyciem popovertarget jako głównego działania po kliknięciu (np. otwieranie panelu powiadomień) i okienko z podpowiedzią wywoływaną przez zainteresowanie, które wyświetla przydatną etykietkę po najechaniu wskaźnikiem.

Przyszłość jest deklaratywna

Opisane tu funkcje stanowią zasadniczą zmianę w kierunku bardziej zaawansowanej i deklaratywnej platformy internetowej. Pozwalając przeglądarce na wykonywanie złożonej, powtarzalnej pracy związanej z zarządzaniem stanem i ułatwieniami dostępu, możemy usunąć ogromne ilości kodu JavaScript, poprawić wydajność i skupić się na tym, co robimy najlepiej: tworzeniu innowacyjnych i angażujących rozwiązań dla użytkowników. To prawdziwy złoty wiek interfejsów internetowych, a to dopiero początek. Śledź nasze postępy w tworzeniu bardziej wydajnej i łatwiejszej w obsłudze sieci.

Dodatkowe materiały:

• Popover API
• Pozycjonowanie kotwicy
• Narzędzie do kotwiczenia
• Wywołujący polecenia
• Dostosowywane menu wyboru (RFC)
• Karuzela CSS
• Galeria obrotowa CSS
• Konfigurator karuzeli CSS
• Zapytania dotyczące stanu przewijania CSS
• Wyjaśnienie dotyczące wywoływania zainteresowania