Nowości dotyczące CSS i interfejsu internetowego: podsumowanie konferencji Google I/O 2024

Una Kravets

Platforma internetowa jest pełna innowacji, a funkcje CSS i interfejsu internetowego są na czele tej ekscytującej ewolucji. Żyjemy w złotej erze interfejsów internetowych. Nowe funkcje CSS pojawiają się w przeglądarkach w tempie, jakiego nigdy wcześniej nie widzieliśmy, otwierając świat możliwości tworzenia pięknych i angażujących interfejsów internetowych. W tym poście na blogu przyjrzymy się bliżej obecnemu stanowi CSS, omawiając niektóre z najbardziej przełomowych nowych funkcji, które zmieniają sposób tworzenia aplikacji internetowych. Zostały one zaprezentowane na żywo podczas konferencji Google I/O 2024.

Nowe interaktywne doznania

Wrażenia użytkowników w internecie to w zasadzie wymiana informacji między Tobą a użytkownikami. Dlatego tak ważne jest inwestowanie w wysokiej jakości interakcje z użytkownikami. Pracujemy nad dużymi ulepszeniami, które odblokują funkcje, jakich nigdy wcześniej nie mieliśmy w internecie, jeśli chodzi o poruszanie się po stronach internetowych i między nimi.

Animacje oparte na przewijaniu

Jak sama nazwa wskazuje, interfejs Scroll-driven Animations API umożliwia tworzenie dynamicznych animacji opartych na przewijaniu bez używania obserwatorów przewijania ani innych skomplikowanych skryptów.

Tworzenie animacji opartych na przewijaniu

Podobnie jak w przypadku animacji opartych na czasie na platformie możesz teraz używać postępu przewijania przewijaka do uruchamiania, wstrzymywania i odwracania animacji. Podczas przewijania do przodu zobaczysz postęp animacji, a podczas przewijania do tyłu będzie ona przebiegać w odwrotnym kierunku. Umożliwia to tworzenie wizualizacji częściowych lub pełnoekranowych z elementami animowanymi w obszarze widoku i w nim, co jest znane jako scrollytelling i zapewnia dynamiczny efekt wizualny.

Animacje oparte na przewijaniu mogą służyć do wyróżniania ważnych treści, prowadzenia użytkowników przez historię lub po prostu dodawania dynamicznego akcentu do stron internetowych.

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Powyższy kod definiuje prostą animację, która pojawia się w obszarze widoku, zmieniając przezroczystość i skalę obrazu. Animacja jest sterowana przez pozycję przewijania. Aby uzyskać ten efekt, najpierw skonfiguruj animację CSS, a potem ustaw wartość animation-timeline. W tym przypadku funkcja view() z wartościami domyślnymi śledzi obraz względem obszaru przewijania (który w tym przypadku jest też obszarem wyświetlania).

Należy pamiętać o obsłudze przeglądarek i preferencjach użytkowników, zwłaszcza w przypadku potrzeb związanych z ułatwieniami dostępu. Dlatego użyj reguły @supports, aby sprawdzić, czy przeglądarka obsługuje animacje oparte na przewijaniu, i umieść animację opartą na przewijaniu w zapytaniu o preferencje użytkownika, np. @media (prefers-reduced-motion: no-preference), aby uwzględnić preferencje użytkowników dotyczące ruchu. Po przeprowadzeniu tych kontroli będziesz mieć pewność, że style będą działać, a animacja nie będzie sprawiać użytkownikowi problemów.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

Animacje oparte na przewijaniu mogą obejmować pełnoekranowe historie przewijane, ale mogą też być bardziej subtelne, np. pasek nagłówka minimalizujący się i wyświetlający cień podczas przewijania aplikacji internetowej.

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

W tym przykładzie użyto kilku różnych animacji klatek kluczowych – nagłówka, tekstu, paska nawigacyjnego i tła – a następnie zastosowano do każdej z nich odpowiednią animację sterowaną przewijaniem. Każda z nich ma inny styl animacji, ale wszystkie mają tę samą oś czasu animacji, najbliższy element przewijany i ten sam zakres animacji – od góry strony do 150 pikseli.

Korzyści z animacji opartych na przewijaniu

Ten wbudowany interfejs API zmniejsza obciążenie związane z kodem, którym musisz zarządzać, niezależnie od tego, czy jest to napisany przez Ciebie skrypt niestandardowy, czy dodatkowa zależność od firmy zewnętrznej. Eliminuje też konieczność wysyłania różnych obserwatorów przewijania, co przynosi znaczne korzyści w zakresie wydajności. Dzieje się tak, ponieważ animacje oparte na przewijaniu działają poza głównym wątkiem podczas animowania właściwości, które można animować w kompozytorze, takich jak przekształcenia i krycie, niezależnie od tego, czy używasz nowego interfejsu API bezpośrednio w CSS, czy też korzystasz z haków JavaScript.

Tokopedia niedawno użyła animacji wywoływanych przewijaniem, aby pasek nawigacyjny produktu pojawiał się podczas przewijania. Korzystanie z tego interfejsu API przyniosło poważne korzyści zarówno w zakresie zarządzania kodem, jak i wydajności.

„Udało nam się zmniejszyć liczbę wierszy kodu nawet o 80% w porównaniu z konwencjonalnymi zdarzeniami przewijania JS. Zaobserwowaliśmy, że średnie wykorzystanie procesora podczas przewijania zmniejszyło się z 50% do 2%. – Andy Wihalim, Senior Software Engineer, Tokopedia

Przyszłość efektów przewijania

Wiemy, że te efekty sprawią, że internet stanie się bardziej angażujący, i już zastanawiamy się, co będzie dalej. Obejmuje to nie tylko możliwość korzystania z nowych osi czasu animacji, ale także używania punktu przewijania do wywoływania początku animacji, czyli animacji wywoływanych przewijaniem.

W przyszłości w przeglądarkach pojawi się jeszcze więcej funkcji przewijania. Poniższa wersja demonstracyjna przedstawia połączenie tych przyszłych funkcji. Używa CSS scroll-start-target do ustawiania początkowej daty i godziny w selektorach oraz zdarzenia JavaScript scrollsnapchange do aktualizowania daty w nagłówku, co ułatwia synchronizację danych z przyciągniętym zdarzeniem.

Możesz też na tej podstawie aktualizować selektor w czasie rzeczywistym za pomocą zdarzenia scrollsnapchanging w JavaScript.

Te funkcje są obecnie dostępne tylko w wersji Canary za flagą, ale umożliwiają korzystanie z funkcji, które wcześniej były niemożliwe lub bardzo trudne do wdrożenia na platformie. Pokazują one przyszłość interakcji opartych na przewijaniu.

Aby dowiedzieć się więcej o rozpoczynaniu pracy z animacjami opartymi na przewijaniu, obejrzyj nową serię filmów, którą nasz zespół opublikował na kanale Chrome dla deweloperów w YouTube. Z tego filmu dowiesz się od Bramusa Van Damme podstawowych informacji o animacjach opartych na przewijaniu, w tym jak działa ta funkcja, jakie są związane z nią terminy, jak tworzyć efekty i jak je łączyć, aby uzyskać bogate wrażenia. To świetna seria filmów, którą warto obejrzeć.

Wyświetlanie przejść

Omówiliśmy właśnie nową, zaawansowaną funkcję animowania elementów na stronach internetowych. Istnieje też nowa, zaawansowana funkcja o nazwie przejścia widoku, która umożliwia animowanie elementów między wyświetleniami stron, aby zapewnić użytkownikom płynne działanie. Przejścia widoku wprowadzają nowy poziom płynności w internecie, umożliwiając tworzenie płynnych przejść między różnymi widokami na jednej stronie, a nawet między różnymi stronami.

Airbnb to jedna z firm, które eksperymentują już z integracją przejść widoku w interfejsie, aby zapewnić płynne i bezproblemowe poruszanie się po stronie internetowej. Obejmuje to pasek boczny edytora wizytówki, edytowanie zdjęć i dodawanie udogodnień – wszystko w ramach płynnego procesu.

Efekty pełnoekranowe są piękne i płynne, ale możesz też tworzyć mikrointerakcje, takie jak w tym przykładzie, w którym widok listy jest aktualizowany w wyniku interakcji użytkownika. Ten efekt można łatwo uzyskać za pomocą przejść widoku.

Aby szybko włączyć przejścia widoku w aplikacji jednostronicowej, wystarczy opakować interakcję za pomocą elementu document.startViewTransition i upewnić się, że każdy element, który przechodzi, ma atrybut view-transition-name, wstawiony w kodzie lub dynamicznie za pomocą JavaScriptu podczas tworzenia węzłów DOM.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Wyświetlanie klas przejścia

Nazwy przejść widoku można stosować do niestandardowych animacji przejść widoku, ale w przypadku wielu elementów przechodzących może to być uciążliwe. Pierwsza nowa aktualizacja przejść widoku w tym roku upraszcza to zadanie i umożliwia tworzenie klas przejść widoku, które można stosować do animacji niestandardowych.

Wyświetlanie typów przejść

Kolejnym ważnym ulepszeniem w przypadku przejść widoku jest obsługa typów przejść widoku. Typy przejść widoku są przydatne, gdy chcesz uzyskać inny rodzaj wizualnego przejścia widoku podczas animowania przejść do i z wyświetleń strony.

Może Ci np. zależeć na tym, aby strona główna animowała się do strony bloga w inny sposób niż strona bloga animuje się z powrotem do strony głównej. Możesz też chcieć, aby strony zmieniały się w inny sposób, np. w tym przykładzie, od lewej do prawej i od prawej do lewej. Wcześniej było to skomplikowane. Aby zastosować style, można było dodać klasy do DOM, a potem trzeba było je usunąć. Typy przejść widoku umożliwiają przeglądarce zwalnianie miejsca ze starych przejść zamiast wymagania, aby użytkownik robił to ręcznie przed zainicjowaniem nowych przejść.

Możesz skonfigurować typy w funkcji document.startViewTransition, która akceptuje teraz obiekt. update to funkcja wywołania zwrotnego, która aktualizuje DOM, a types to tablica z typami.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

Przejścia między widokami na wielu stronach

Siła internetu tkwi w jego rozległości. Wiele aplikacji to nie tylko jedna strona, ale rozbudowana sieć zawierająca wiele stron. Dlatego z przyjemnością informujemy, że w Chromium 126 wprowadzamy obsługę przejść między widokami w różnych dokumentach w aplikacjach wielostronicowych.

Ten nowy zestaw funkcji obejmuje usługi internetowe działające w ramach tej samej domeny, np. przechodzenie z web.dev na web.dev/blog. Nie obejmuje jednak przechodzenia między domenami, np. z web.dev na blog.web.dev lub na inną domenę, taką jak google.com.

Jedną z kluczowych różnic w przypadku przejść między widokami w tym samym dokumencie jest to, że nie musisz otaczać przejścia tagiem document.startViewTransition(). Zamiast tego włącz obie strony biorące udział w przejściu widoku za pomocą reguły CSS @view-transition.

@view-transition {
  navigation: auto;
}

Aby uzyskać bardziej niestandardowy efekt, możesz użyć JavaScriptu za pomocą nowych detektorów zdarzeń pageswap lub pagereveal, które zapewniają dostęp do obiektu przejścia widoku.

Za pomocą funkcji pageswap możesz wprowadzać ostatnie zmiany na stronie wychodzącej tuż przed wykonaniem starych migawek, a za pomocą funkcji pagereveal dostosowywać nową stronę, zanim zacznie się ona renderować po zainicjowaniu.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

W przyszłości planujemy rozszerzyć funkcję przejść między widokami, m.in. o:

• Przejścia ograniczone do zakresu: umożliwiają ograniczenie przejścia do poddrzewa DOM, dzięki czemu reszta strony pozostaje interaktywna i można uruchamiać wiele przejść widoku jednocześnie.
• Przejścia widoku oparte na gestach: używaj gestów przeciągania lub przesuwania, aby wywoływać przejścia widoku między dokumentami i zapewniać bardziej natywne wrażenia w internecie.
• Dopasowywanie nawigacji w CSS: dostosuj przejście widoku między dokumentami bezpośrednio w CSS jako alternatywę dla korzystania z wydarzeń pageswap i pagereveal w JavaScript. Więcej informacji o przejściach widoku w aplikacjach wielostronicowych, w tym o tym, jak najwydajniej skonfigurować je za pomocą wstępnego renderowania, znajdziesz w tym wystąpieniu Bramusa Van Damme:

Komponenty interfejsu z obsługą silnika: upraszczanie złożonych interakcji

Tworzenie złożonych aplikacji internetowych nie jest łatwe, ale CSS i HTML rozwijają się, aby znacznie ułatwić ten proces. Nowe funkcje i ulepszenia upraszczają tworzenie komponentów interfejsu, dzięki czemu możesz skupić się na budowaniu doskonałych wrażeń. Odbywa się to w ramach współpracy kilku kluczowych organizacji zajmujących się standardami i grup społeczności, w tym grupy roboczej CSS, grupy społeczności Open UI i WHATWG (grupy roboczej ds. technologii aplikacji internetowych).

Jednym z głównych problemów deweloperów jest pozornie prosta prośba: możliwość stylizowania menu (elementu select). Choć na pierwszy rzut oka wydaje się to proste, jest to złożony problem, który dotyczy wielu elementów platformy: od układu i renderowania po przewijanie i interakcje, style klienta użytkownika i właściwości CSS, a nawet zmiany w samym HTML-u.

Menu zawiera wiele elementów i stanów, które należy uwzględnić, takich jak:

• Powiązania klawiszy (do włączania i wyłączania interakcji)
• Kliknij poza nią, aby ją zamknąć
• Aktywne zarządzanie wyskakującymi elementami (zamykanie innych wyskakujących elementów po otwarciu jednego z nich)
• Zarządzanie zaznaczeniem klawiszem Tab
• Wyświetlanie wartości wybranej opcji
• Styl interakcji ze strzałką
• Zarządzanie stanem (otwieranie/zamykanie)

Obecnie trudno jest samodzielnie zarządzać tym stanem, ale platforma też tego nie ułatwia. Aby to naprawić, podzieliliśmy te elementy i wdrażamy kilka podstawowych funkcji, które umożliwią stylizowanie menu, ale też wiele więcej.

The Popover API

Najpierw wprowadziliśmy atrybut globalny o nazwie popover, który, jak z przyjemnością informuję, kilka tygodni temu osiągnął stan „nowo dostępny” w Baseline.

Elementy wyskakującego okienka są ukryte za pomocą atrybutu display: none, dopóki nie zostaną otwarte za pomocą elementu wywołującego, takiego jak przycisk, lub za pomocą JavaScriptu. Aby utworzyć podstawowy element popover, ustaw atrybut popover w elemencie i połącz jego identyfikator z przyciskiem za pomocą popovertarget. Teraz przycisk jest wywołującym,

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Po włączeniu atrybutu popover przeglądarka obsługuje wiele kluczowych zachowań bez dodatkowych skryptów, w tym:

• Awans do najwyższej warstwy: Osobna warstwa nad resztą strony, dzięki czemu nie musisz używać tagu z-index.
• Funkcja lekkiego zamykania: Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie zaznaczenia.
• Domyślne zarządzanie fokusem karty: Otwarcie wyskakującego okienka powoduje, że następny punkt zatrzymania tabulatora znajduje się w tym okienku.
• Skróty klawiszowe klawiatury wbudowanej: Naciśnięcie klawisza esc lub dwukrotne przełączenie spowoduje zamknięcie wyskakującego okienka i przywrócenie zaznaczenia.
• Domyślne powiązania komponentów : przeglądarka semantycznie łączy wyskakujące okienko z elementem wywołującym.

Możesz nawet używać tego interfejsu API bez zdawania sobie z tego sprawy. GitHub wdrożył wyskakujące okienko w menu „Nowości” na stronie głównej oraz w przeglądzie sprawdzania żądań pull. Stopniowo ulepszali tę funkcję, korzystając z kodu polyfill popover, który został stworzony przez Oddbird przy znacznym wsparciu Keitha Cirkela z GitHub, aby obsługiwać starsze przeglądarki.

„Dzięki przejściu na wyskakujące okienka udało nam się wycofać dosłownie tysiące wierszy kodu. Popover pomaga nam uniknąć walki z magicznymi numerami z-index… prawidłowe relacje w drzewie dostępności z deklaratywnym zachowaniem przycisku oraz wbudowane zachowania związane z fokusem znacznie ułatwiają naszemu systemowi projektowania prawidłowe wdrażanie wzorców. – Keith Cirkel, inżynier oprogramowania, GitHub

Animowanie efektów wejścia i wyjścia

Jeśli masz wyskakujące okienka, prawdopodobnie chcesz dodać do nich interakcję. W ciągu ostatniego roku wprowadziliśmy 4 nowe funkcje interakcji, które umożliwiają animowanie wyskakujących okienek. Obejmują one:

Możliwość animowania display i content-visibility na osi czasu klatek kluczowych.

Właściwość transition-behavior ze słowem kluczowym allow-discrete, aby włączyć przejścia właściwości dyskretnych, takich jak display.

Reguła @starting-style animująca efekty wejścia z display: none do najwyższej warstwy.

Właściwość nakładki, która kontroluje zachowanie górnej warstwy podczas animacji.

Te właściwości działają w przypadku każdego elementu, który animujesz na górną warstwę, niezależnie od tego, czy jest to wyskakujące okienko czy okno dialogowe. W przypadku okna z tłem wygląda to tak:

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

Najpierw skonfiguruj @starting-style, aby przeglądarka wiedziała, jakie style ma animować w tym elemencie w DOM. Dotyczy to zarówno okna, jak i tła. Następnie określ styl stanu otwartego zarówno w przypadku okna, jak i tła. W przypadku okna dialogowego używa atrybutu open, a w przypadku wyskakującego okienka – pseudoelementu ::popover-open. Na koniec animuj właściwości opacity, display i overlay za pomocą słowa kluczowego allow-discrete, aby włączyć tryb animacji, w którym mogą się zmieniać poszczególne właściwości.

Pozycjonowanie kotwicy

Wyskakujące okienko to dopiero początek. Bardzo ważną nowością jest to, że od Chrome 125 dostępna jest obsługa pozycjonowania elementów zakotwiczonych.

Dzięki pozycjonowaniu względnemu przeglądarka może za pomocą kilku wierszy kodu obsługiwać logikę przywiązywania elementu z określonym położeniem do co najmniej 1 elementu zakotwiczenia. W tym przykładzie prosta etykietka jest zakotwiczona do każdego przycisku i umieszczona u dołu na środku.

Skonfiguruj relację pozycjonowania kotwicy w CSS, używając właściwości anchor-name w elemencie kotwiczącym (w tym przypadku przycisku) i właściwości position-anchor w elemencie pozycjonowanym (w tym przypadku etykietce). Następnie zastosuj pozycjonowanie bezwzględne lub stałe względem elementu zakotwiczenia za pomocą funkcji anchor(). Poniższy kod umieszcza górną krawędź etykietki u dołu przycisku.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

Możesz też użyć nazwy kotwicy bezpośrednio w funkcji kotwicy i pominąć właściwość position-anchor. Może to być przydatne w przypadku zakotwiczania do wielu elementów.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Na koniec użyj nowego słowa kluczowego anchor-center w przypadku właściwości justify i align, aby wyśrodkować pozycjonowany element względem jego punktu zakotwiczenia.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Chociaż używanie pozycjonowania względem elementu zakotwiczonego z wyskakującym okienkiem jest bardzo wygodne, nie jest ono wymagane do korzystania z pozycjonowania względem elementu zakotwiczonego. Pozycjonowanie względem punktu zakotwiczenia można stosować w przypadku co najmniej 2 elementów, aby utworzyć relację wizualną. Poniższa wersja demonstracyjna, zainspirowana artykułem Romana Komarowa, pokazuje styl podkreślenia zakotwiczony do elementów listy, gdy nad nimi najedziesz kursorem lub je wybierzesz.

W tym przykładzie użyto funkcji anchor do skonfigurowania pozycji kotwicy za pomocą właściwości fizycznych left, right i bottom. Gdy najedziesz kursorem na jeden z linków, zmieni się kotwica docelowa, a przeglądarka przesunie cel, aby zastosować pozycjonowanie, jednocześnie animując kolor, co da ciekawy efekt.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area pozycjonowanie

Oprócz domyślnego kierunkowego pozycjonowania bezwzględnego, którego prawdopodobnie używasz już od jakiegoś czasu, wprowadziliśmy nowy mechanizm układu, który jest częścią interfejsu API pozycjonowania elementów zakotwiczonych i nazywa się obszarem wstawki. Obszar wstawiania ułatwia umieszczanie elementów pozycjonowanych względem odpowiednich punktów zakotwiczenia i działa na siatce 3 × 3, w której element zakotwiczenia znajduje się w środku. Na przykład inset-area: top umieszcza element na górze, a inset-area: bottom – na dole.

Uproszczona wersja pierwszej demonstracji elementu zakotwiczonego wygląda tak: inset-area

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

Możesz połączyć te wartości pozycji ze słowami kluczowymi zakresu, aby rozpocząć od pozycji środkowej i rozciągnąć zakres w lewo, w prawo lub na wszystkie dostępne kolumny lub wiersze. Możesz też używać właściwości logicznych. Aby łatwiej wizualizować i wykorzystywać ten mechanizm układu, skorzystaj z tego narzędzia w Chrome w wersji 125 lub nowszej:

Ponieważ te elementy są zakotwiczone, element z określonym położeniem dynamicznie przesuwa się po stronie wraz z przesuwaniem się elementu zakotwiczającego. W tym przypadku mamy elementy karty ze stylami z zapytania o kontener, które zmieniają rozmiar na podstawie ich rozmiaru wewnętrznego (czego nie można zrobić za pomocą zapytań o media). Zakotwiczone menu będzie się przesuwać wraz z nowym układem, gdy zmieni się interfejs karty.

Dynamiczne reklamy zakotwiczone z position-try-options

Menu i nawigację po podmenu można łatwiej tworzyć dzięki połączeniu wyskakującego okienka i pozycjonowania elementu zakotwiczonego. Gdy element zakotwiczony dotrze do krawędzi widocznego obszaru, możesz też pozwolić przeglądarce na zmianę jego pozycji. Możesz to zrobić na kilka sposobów. Pierwszy sposób to utworzenie własnych reguł pozycjonowania. W tym przypadku podmenu jest początkowo umieszczone po prawej stronie przycisku „Sklep”. Możesz jednak utworzyć blok @position-try, gdy po prawej stronie menu nie ma wystarczająco dużo miejsca, i nadać mu niestandardowy identyfikator --bottom. Następnie połącz ten blok @position-try z kotwicą za pomocą bloku position-try-options.

Przeglądarka będzie teraz przełączać się między tymi stanami zakotwiczenia, najpierw próbując odpowiedniej pozycji, a potem przesuwając się na dół. Można to zrobić za pomocą płynnego przejścia.

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

Oprócz logiki jawnego pozycjonowania przeglądarka udostępnia kilka słów kluczowych, jeśli chcesz uzyskać podstawowe interakcje, takie jak odwrócenie kotwicy w kierunku bloku lub w kierunku wiersza.

position-try-options: flip-block, flip-inline;

Aby uzyskać prosty efekt odwrócenia, skorzystaj z tych wartości słów kluczowych i w ogóle nie pisz position-trydefinicji. Teraz możesz mieć w pełni funkcjonalny element zakotwiczony, który dostosowuje się do lokalizacji, za pomocą zaledwie kilku wierszy kodu CSS.

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

Dowiedz się więcej o pozycjonowaniu zakotwiczonym.

Przyszłość interfejsu warstwowego

Połączone doświadczenia są wszędzie, a zestaw funkcji przedstawionych w tym poście to doskonały początek, który pozwoli uwolnić kreatywność i zwiększyć kontrolę nad elementami zakotwiczonymi i interfejsami warstwowymi. To jednak dopiero początek. Obecnie popover działa tylko w przypadku przycisków jako elementu wywołującego lub w przypadku JavaScriptu. W przypadku podglądów w stylu Wikipedii, które są powszechne na platformie internetowej, musi być możliwość interakcji z nimi, a także wywoływania wyskakującego okienka z linku i na podstawie zainteresowania użytkownika bez konieczności klikania, np. przez najechanie kursorem lub skupienie się na karcie.

W ramach dalszego rozwoju interfejsu Popover API pracujemy nad interesttarget, aby zaspokoić te potrzeby i ułatwić odtwarzanie tych funkcji z odpowiednimi wbudowanymi elementami ułatwień dostępu. Jest to trudny problem związany z dostępnością, który wymaga rozwiązania. Wiele kwestii dotyczących idealnego działania pozostaje otwartych, ale rozwiązanie i uproszczenie tej funkcji na poziomie platformy powinno poprawić komfort korzystania z niej dla wszystkich.

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

Dzięki pracy dwóch zewnętrznych programistów, Keitha Cirkela i Luke’a Warlowa, w wersji Canary dostępny jest też inny ogólny wywołujący przyszłe funkcje (invoketarget). invoketarget obsługuje deklaratywny interfejs programisty, który popovertarget udostępnia wyskakujące okienka znormalizowane dla wszystkich elementów interaktywnych, w tym <dialog>, <details>, <video>, <input type="file"> i innych.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

Wiemy, że ten interfejs API nie obejmuje jeszcze wszystkich przypadków użycia. Na przykład stylizowanie strzałki łączącej zakotwiczony element z jego punktem zakotwiczenia, zwłaszcza gdy zmienia się położenie zakotwiczonego elementu, oraz umożliwianie elementowi „przesuwania się” i pozostawania w widocznym obszarze zamiast przyciągania do innego położenia ustawionego po osiągnięciu przez niego ramki ograniczającej. Cieszymy się, że udało nam się wprowadzić ten zaawansowany interfejs API, ale w przyszłości chcemy jeszcze bardziej rozszerzyć jego możliwości.

Stylizowany element select

Dzięki połączeniu popover i anchor zespół poczynił postępy w zakresie umożliwienia dostosowywanego menu wyboru. Dobra wiadomość jest taka, że poczyniono już duże postępy. Zła wiadomość jest taka, że ten interfejs API jest obecnie w fazie eksperymentalnej. Chętnie jednak pokażę Ci kilka wersji demonstracyjnych na żywo i opowiem o naszych postępach. Mam nadzieję, że podzielisz się z nami swoją opinią. Po pierwsze, poczyniliśmy postępy w zakresie sposobu włączania użytkownikom nowej, konfigurowalnej funkcji wyboru. Obecnie w trakcie opracowywania jest sposób na osiągnięcie tego efektu za pomocą właściwości appearance w CSS ustawionej na appearance: base-select. Po ustawieniu wyglądu włączysz nową, konfigurowalną funkcję wyboru.

select {
  appearance: base-select;
}

Oprócz appearance: base-select wprowadziliśmy kilka nowych aktualizacji HTML. Obejmują one możliwość umieszczania opcji w datalist w celu dostosowania oraz dodawania do opcji dowolnych treści nieinteraktywnych, takich jak obrazy. Będziesz mieć też dostęp do nowego elementu <selectedoption>, który będzie odzwierciedlać zawartość opcji, a Ty będziesz mieć możliwość dostosowania go do własnych potrzeb. Ten element jest bardzo przydatny.

Wizualizacja wersji demonstracyjnej

Prezentacja na żywo

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

Poniższy kod pokazuje, jak dostosować <selectedoption> w interfejsie Gmaila, gdzie ikona wizualna reprezentuje typ wybranej odpowiedzi, aby zaoszczędzić miejsce. W selectedoption możesz używać podstawowych stylów wyświetlania, aby odróżnić styl opcji od stylu podglądu. W tym przypadku tekst wyświetlany w opcji może być wizualnie ukryty w selectedoption.

Wizualizacja wersji demonstracyjnej

Prezentacja na żywo

selectedoption .text {
  display: none;
}

Jedną z największych zalet ponownego użycia elementu <select> w tym interfejsie API jest zgodność wsteczna. W tym selektorze krajów możesz zobaczyć dostosowany interfejs z obrazami flag w opcjach, co ułatwia użytkownikom analizowanie treści. Nieobsługiwane przeglądarki będą ignorować wiersze, których nie rozumieją, np. niestandardowy przycisk, listę danych, wybraną opcję i obrazy w opcjach. W związku z tym rezerwowa wersja interfejsu będzie podobna do obecnego domyślnego interfejsu wyboru.

Dzięki możliwości dostosowania opcji wyboru możliwości są nieograniczone. Szczególnie podoba mi się selektor krajów w stylu Airbnb, ponieważ ma on sprytny styl w przypadku projektowania responsywnego. Dzięki nadchodzącemu elementowi stylizowanego wyboru możesz zrobić to i wiele więcej, co sprawia, że jest to bardzo potrzebny dodatek do platformy internetowej.

Wyjątkowy akordeon

Rozwiązanie problemu z wybieraniem stylów (i wszystkich powiązanych z tym elementów) nie jest jedynym komponentem interfejsu, na którym skupia się zespół Chrome. Pierwsza dodatkowa aktualizacja komponentu to możliwość tworzenia ekskluzywnych akordeonów, w których w danym momencie można otworzyć tylko jeden element.

Aby to zrobić, zastosuj tę samą wartość nazwy w przypadku wielu elementów szczegółów, tworząc w ten sposób połączoną grupę szczegółów, podobnie jak w przypadku grupy przycisków opcji.

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid i :user-invalid

Kolejnym ulepszeniem komponentu interfejsu są pseudoklasy :user-valid i :user-invalid. Stabilne we wszystkich przeglądarkach od niedawna pseudoklasy :user-valid i :user-invalid działają podobnie do pseudoklas :valid i :invalid, ale pasują do elementu sterującego formularza tylko wtedy, gdy użytkownik w znacznym stopniu wszedł w interakcję z danymi wejściowymi. Oznacza to, że do określenia, czy wartość formularza została użyta lub czy została „zmodyfikowana”, potrzeba znacznie mniej kodu. Może to być bardzo przydatne w przypadku przekazywania użytkownikowi informacji zwrotnych i zmniejsza ilość skryptowania, które byłoby potrzebne do tego w przeszłości.

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

Dowiedz się więcej o używaniu pseudoelementów sprawdzania poprawności formularza user-*.

field-sizing: content

Kolejną przydatną aktualizacją komponentu, która pojawiła się niedawno, jest field-sizing: content. Można ją stosować do elementów sterujących formularzem, takich jak pola wejściowe i obszary tekstowe. Dzięki temu rozmiar pola wejściowego może się zwiększać (lub zmniejszać) w zależności od jego zawartości. field-sizing: content może być szczególnie przydatne w przypadku pól tekstowych, ponieważ nie musisz już korzystać z pól o stałych rozmiarach, w których trzeba przewijać tekst, aby zobaczyć, co zostało napisane we wcześniejszych częściach promptu w zbyt małym oknie do wprowadzania danych.

textarea, select, input {
  field-sizing: content;
}

Dowiedz się więcej o rozmiarach pól.

<hr> w: <select>

Możliwość włączenia elementu <hr>, czyli poziomej linii w polach wyboru, to kolejna niewielka, ale przydatna funkcja komponentu. Nie ma to większego znaczenia semantycznego, ale pomaga w rozdzieleniu treści na liście wyboru, zwłaszcza treści, których nie chcesz grupować za pomocą elementu optgroup, np. wartości zastępczej.

Wybierz zrzut ekranu

Wybierz Prezentacja na żywo

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

Dowiedz się więcej o używaniu hr w select

Ulepszenia jakości życia

Stale wprowadzamy zmiany, nie tylko w przypadku interakcji i komponentów. W ostatnim roku wprowadziliśmy wiele innych zmian, które poprawiają komfort korzystania z usługi.

Zagnieżdżanie z wyprzedzeniem

Zagnieżdżanie w natywnym CSS zostało wprowadzone we wszystkich przeglądarkach w zeszłym roku i od tego czasu zostało ulepszone, aby obsługiwać wyprzedzanie, co oznacza, że znak & przed nazwami elementów nie jest już wymagany. Dzięki temu zagnieżdżanie jest o wiele bardziej ergonomiczne i przypomina to, do czego przywykłem w przeszłości.

Jedną z moich ulubionych funkcji zagnieżdżania w CSS jest możliwość wizualnego blokowania komponentów i umieszczania w nich stanów oraz modyfikatorów, takich jak zapytania o kontener i zapytania o media. Wcześniej zwykle grupowałem wszystkie te zapytania na dole pliku, aby były bardziej szczegółowe. Teraz możesz pisać je w sposób, który ma sens, tuż obok reszty kodu.

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Właściwość align-content w przypadku układu blokowego

Kolejną przydatną zmianą jest możliwość używania mechanizmów wyśrodkowywania, takich jak align-content, w układzie blokowym. Oznacza to, że możesz teraz wyśrodkować pionowo element w divie bez konieczności stosowania układu elastycznego lub siatki i bez efektów ubocznych, takich jak zapobieganie zwijaniu się marginesów, których możesz nie chcieć w przypadku tych algorytmów układu.

Zrzut ekranu

Prezentacja na żywo

div {
  align-content: center;
}

Zawijanie tekstu: równoważenie i ładne

Jeśli chodzi o układ, to został on ulepszony dzięki dodaniu text-wrap: balance i pretty. text-wrap: balance służy do tworzenia bardziej jednolitego bloku tekstu, a text-wrap: pretty koncentruje się na zmniejszeniu liczby pojedynczych słów w ostatnim wierszu tekstu.

h1 {
  text-wrap: balance;
}

Dowiedz się więcej o text-wrap: balance.

Aktualizacje typografii międzynarodowej

Aktualizacje układu typograficznego dla funkcji tekstu w językach CJK w ostatnim roku zostały wzbogacone o wiele przydatnych funkcji, takich jak word-break: auto-phrase, która zawija wiersz na naturalnej granicy frazy.

text-spacing-trim, która stosuje kerning między znakami interpunkcyjnymi, aby poprawić czytelność typografii chińskiej, japońskiej i koreańskiej i zapewnić bardziej atrakcyjne wizualnie wyniki.

Składnia kolorów względnych

W świecie motywów kolorystycznych pojawiła się duża aktualizacja w postaci składni kolorów względnych.

W tym przykładzie kolory są oparte na motywie Oklch. Gdy wartość odcienia dostosowuje się do suwaka, zmienia się cały motyw. Można to osiągnąć za pomocą składni kolorów względnych. Tło wykorzystuje kolor podstawowy na podstawie odcienia i dostosowuje kanały jasności, chromatyczności i odcienia, aby zmienić jego wartość. –i to indeks elementu równorzędnego na liście gradacji wartości, który pokazuje, jak można łączyć kroki z właściwościami niestandardowymi i względną składnią kolorów, aby tworzyć motywy.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

funkcja light-dark()

Dzięki funkcji light-dark() motywy stały się bardziej dynamiczne i łatwiejsze w użyciu.

Funkcja light-dark() to ergonomiczne ulepszenie, które upraszcza opcje motywów kolorystycznych, dzięki czemu możesz pisać style motywów w bardziej zwięzły sposób, co doskonale ilustruje ten diagram Adama Argyle’a. Wcześniej do skonfigurowania opcji motywu potrzebne były 2 bloki kodu (motyw domyślny i zapytanie o preferencje użytkownika). Teraz możesz zapisać te opcje stylu zarówno dla jasnego, jak i ciemnego motywu w tym samym wierszu CSS za pomocą funkcji light-dark().

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

Jeśli użytkownik wybrał jasny motyw, przycisk będzie miał jasnoniebieskie tło. Jeśli użytkownik wybrał ciemny motyw, przycisk będzie miał ciemnoniebieskie tło.

Selektor na stronie :has()

Nie mogę mówić o nowoczesnym interfejsie bez wspomnienia o jednym z najważniejszych osiągnięć w zakresie interoperacyjności w ubiegłym roku, czyli selektorze :has(), który został wprowadzony w przeglądarkach w grudniu ubiegłego roku. Ten interfejs API to przełom w pisaniu w stylu logicznym.

Selektor :has() umożliwia sprawdzenie, czy element podrzędny ma określone elementy podrzędne lub czy te elementy podrzędne są w określonym stanie. Może on również pełnić funkcję selektora elementu nadrzędnego.

Usługa :has() okazała się już szczególnie przydatna dla wielu firm, w tym PolicyBazaar, która używa :has() do stylizowania bloków na podstawie ich zawartości wewnętrznej, np. w sekcji porównywania, gdzie styl dostosowuje się w zależności od tego, czy w bloku jest plan do porównania, czy jest on pusty.

„Dzięki selektorowi :has() mogliśmy wyeliminować walidację wyboru użytkownika opartą na JavaScript i zastąpić ją rozwiązaniem CSS, które działa bezproblemowo i zapewnia takie samo doświadczenie jak wcześniej”. – Aman Soni, kierownik techniczny, PolicyBazaar

Zapytania dotyczące kontenerów

Kolejną ważną nowością w internecie, która jest już dostępna i zyskuje na popularności, są zapytania o kontener. Umożliwiają one wysyłanie zapytań o rozmiar wewnętrzny elementu nadrzędnego w celu zastosowania stylów. Jest to znacznie dokładniejsze narzędzie niż zapytania o media, które wysyłają zapytania tylko o rozmiar obszaru wyświetlania.

Zespół Angulara niedawno uruchomił nową, atrakcyjną witrynę dokumentacji angular.dev, w której używa zapytań o kontenery do określania stylu bloków nagłówka na podstawie dostępnego miejsca na stronie. Dzięki temu nawet jeśli układ się zmieni i z wielokolumnowego układu paska bocznego przejdzie do układu jednokolumnowego, bloki nagłówka mogą się automatycznie dostosować.

Bez zapytań o kontener osiągnięcie takiego efektu było dość trudne i negatywnie wpływało na wydajność, ponieważ wymagało obserwatorów zmiany rozmiaru i obserwatorów elementów. Teraz łatwo jest określić styl elementu na podstawie rozmiaru elementu nadrzędnego.

@property

Już wkrótce w Baseline pojawi się @property. Jest to kluczowa funkcja, która nadaje semantyczne znaczenie niestandardowym właściwościom CSS (znanym też jako zmienne CSS) i umożliwia korzystanie z wielu nowych funkcji interakcji. @property umożliwia też w CSS znaczenie kontekstowe, sprawdzanie typów, wartości domyślne i wartości zastępcze. Otwiera to drogę do jeszcze bardziej zaawansowanych funkcji, takich jak zapytania dotyczące zakresu. Jest to funkcja, która wcześniej nie była możliwa, a teraz znacznie wzbogaca język CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Podsumowanie

Dzięki tym nowym, zaawansowanym funkcjom interfejsu użytkownika dostępnym w przeglądarkach możliwości są nieograniczone. Nowe interaktywne funkcje z animacjami sterowanymi przewijaniem i przejściami widoku sprawiają, że internet jest bardziej płynny i interaktywny niż kiedykolwiek wcześniej. Komponenty interfejsu użytkownika na wyższym poziomie sprawiają, że tworzenie solidnych, pięknie dostosowanych komponentów jest łatwiejsze niż kiedykolwiek wcześniej, bez konieczności usuwania wszystkich natywnych funkcji. Ulepszenia w zakresie architektury, układu, typografii i projektowania responsywnego nie tylko rozwiązują drobne, ale ważne problemy, ale też dają deweloperom narzędzia potrzebne do tworzenia złożonych interfejsów, które działają na różnych urządzeniach, w różnych formatach i zaspokajają różne potrzeby użytkowników.

Dzięki tym nowym funkcjom możesz usunąć skrypty innych firm w przypadku funkcji o dużym wpływie na wydajność, takich jak scrollytelling i łączenie elementów ze sobą za pomocą pozycjonowania kotwic, tworzyć płynne przejścia między stronami, wreszcie stylizować menu rozwijane i poprawiać ogólną strukturę kodu w sposób natywny.

To najlepszy czas na bycie deweloperem stron internetowych. Od czasu ogłoszenia CSS3 nie było tak wiele energii i entuzjazmu. Funkcje, których potrzebowaliśmy, ale o których w przeszłości mogliśmy tylko marzyć, wreszcie stają się rzeczywistością i częścią platformy. Dzięki Twoim opiniom możemy ustalać priorytety i wdrażać te funkcje. Pracujemy nad tym, aby ułatwić Ci wykonywanie trudnych i żmudnych zadań w sposób natywny, dzięki czemu będziesz mieć więcej czasu na tworzenie tego, co jest ważne – podstawowych funkcji i szczegółów projektu, które wyróżniają Twoją markę.

Więcej informacji o tych nowych funkcjach znajdziesz na stronach developer.chrome.com i web.dev, gdzie nasz zespół udostępnia najnowsze wiadomości dotyczące technologii internetowych. Wypróbuj animacje oparte na przewijaniu, przejścia widoku, pozycjonowanie elementów zakotwiczonych, a nawet stylizowany element select i daj nam znać, co o nich myślisz. Chętnie Ci pomożemy.