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ść z różnymi przeglądarkami. Mimo tych postępów 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 kodu niestandardowego.

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 interfejs 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 elementy, a od tego roku ma 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 [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 problemem z kolejnością nakładania elementów.
• 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 rozwiązaniem. 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ę lekkiego zamykania, która umożliwia zamknięcie okna, gdy użytkownik kliknie poza nim lub naciśnie klawisz 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 być ono umieszczone względem elementu, który je otworzył. Ręczne obliczanie tego za pomocą JavaScriptu jest podatne na błędy i może obniżać 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 połączyć elementy za pomocą właściwości anchor-name i position-anchor, aktualizacja specyfikacji i Chrome 133 tworzy niejawne powiązanie kotwicy między elementem <popover> a jego wywołującym elementem <button>. To znacznie upraszcza kod i oznacza, że możesz teraz umieścić wyskakujące okienko za pomocą jednego wiersza kodu CSS, np. position-area: bottom span-left.

Narzędzie do kotwic 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 zmienić położenie kotwic i zapobiec 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:

Prawdziwie konfigurowalny <select>

W poprzednich wersjach wprowadziliśmy już odpowiednie elementy, a w Chrome 134 pojawiły się wreszcie style natywne dla sieci 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 treści multimedialnych 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 elementu wyboru w internecie. Zyskujesz niestandardowy wygląd, zachowując wbudowane funkcje ułatwień dostępu, nawigację za pomocą klawiatury i integrację formularzy natywnego elementu wyboru.

Karuzele

Karuzel można używać w dowolnym miejscu w internecie, nie tylko w sekcjach głównych. Dotyczy to treści przewijanych 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, skakanie podczas 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 nie mieszczą się w kontenerze. 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, informuje przeglądarkę, że ma wygenerować stanowe, dostępne przyciski „Dalej” i „Wstecz”. Przeglądarka automatycznie obsługuje prawidłowe role ARIA, kolejność tabulatorów, 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, inicjuj markery przewijania, włączając je za pomocą właściwości content i podając etykietę ułatwień dostępu. W poniższym przykładzie atrybut danych służy do ustawienia etykiety znacznika przewijania. Dodatkowo umieść znaczniki przewijania w ::scroll-marker-group za pomocą właściwości scroll-marker-group. Na koniec zastosuj styl do aktywnego markera za pomocą nowej klasy pozornej :target-current. Oto przykład, jak może wyglądać podstawowa karuzela:

.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 jest w pozycji „przyciągniętej”. W karuzelach jest to moment, w którym element znajduje się na środku karuzeli.
• 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 karuzeli CSS, zapytań o stan przewijania i pozycjonowania elementów zakotwiczonych ułatwia tworzenie niestandardowych i interaktywnych karuzel. Możesz pójść o krok dalej i zastosować animacje wywoływane przez przewijanie, aby powiązać animacje bezpośrednio z pozycją przewijania. Dzięki temu uzyskasz efekty o wysokiej wydajności, np. skalowanie i zanikanie elementów podczas przewijania do widoku. Animacje te działają poza wątkiem głównym, co zapewnia płynne działanie.

Ten interaktywny karuzel łączy zapytania scroll-state(), ::scroll-button, ::scroll-marker, pozycjonowanie elementu zakotwiczonego 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 są dostępne i są usuwane z drzewa ułatwień dostępu.

Dowiedz się więcej o karuzelach CSS.

Interaktywne wizytówki

Karty najazdowe, czyli 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 wielu urządzeń może zająć dedykowanemu zespołowi wiele miesięcy. Pracujemy jednak nad nowym deklaratywnym rozwiązaniem, które powinno raz na zawsze rozwiązać ten problem.

Wyskakujące okienka wywoływane zainteresowaniami z [interestfor]

Podstawą działania deklaratywnych kart informacyjnych jest atrybut[interestfor]. Ta nadchodząca funkcja wykorzystuje możliwości wyskakujących okienek, ale wywołuje je na podstawie „zainteresowania” użytkownika. Na przykład zainteresowanie użytkownika urządzeniem wskazującym może być wyrażone przez najechanie kursorem, nawigację za pomocą klawiatury lub długie naciśnięcie lub kliknięcie ekranu dotykowego. Problem z interakcją na urządzeniach mobilnych nie został jeszcze rozwiązany.

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ą klawisza Tab na klawiaturze, 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. Powiązania komponentów semantycznych i model drzewa ułatwień dostępu 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" i 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. Jest 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ą fundamentalną 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 dostępnością, 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 wydajniejszej 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