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 funkcje

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 przewijarki do uruchamiania, wstrzymywania i odwracania animacji. Podczas przewijania do przodu zobaczysz postęp animacji, a podczas przewijania do tyłu animacja będzie odtwarzana w drugą stronę. Dzięki temu możesz tworzyć wizualizacje częściowe lub pełnoekranowe z elementami animowanymi w obszarze widocznym i w nim, co jest znane jako scrollytelling, aby uzyskać 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).

Pamiętaj o obsłudze przeglądarek i preferencjach użytkowników, zwłaszcza w przypadku potrzeb związanych z dostępnością. 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 dotyczącym preferencji użytkownika, np. @media (prefers-reduced-motion: no-preference), aby uwzględnić preferencje użytkowników dotyczące ruchu. Po wykonaniu tych sprawdzeń 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, 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

To wbudowane 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ść dostarczania różnych obserwatorów przewijania, co przynosi znaczne korzyści w zakresie wydajności. Animacje oparte na przewijaniu działają bowiem w wątku głównym podczas animowania właściwości, które można animować w kompozytorze, takich jak przekształcenia i przezroczystość, niezależnie od tego, czy używasz nowego API bezpośrednio w CSS, czy korzystasz z haków JavaScript.

Tokopedia użyła ostatnio 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 for Developers w YouTube. Bramus Van Damme wyjaśnia w niej podstawy animacji opartych na przewijaniu, w tym jak działa ta funkcja, jakie są związane z nią terminy, różne sposoby tworzenia efektów i jak łączyć efekty, aby tworzyć bogate interakcje. Warto obejrzeć tę serię filmów.

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 służy do animowania 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łynną i bezproblemową nawigację w internecie. Obejmuje to pasek boczny edytora ofert, edycję zdjęć i dodawanie udogodnień – wszystko w ramach płynnego przepływu pracy użytkownika.

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 otoczyć interakcję tagiem 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 wykorzystać do stosowania niestandardowych animacji do 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 ten problem i umożliwia tworzenie klas przejść widoku, które można stosować do niestandardowych animacji.

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żesz na przykład chcieć, 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 zamieniały się w inny sposób, np. z lewej na prawą i odwrotnie. Wcześniej było to trudne do zrobienia. Można było dodawać klasy do DOM, aby stosować style, a potem trzeba było je usuwać. Typy przejść widoku umożliwiają przeglądarce zwalnianie miejsca po starych przejściach zamiast wymagania, aby robić to ręcznie przed rozpoczęciem nowych.

Typy możesz skonfigurować 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 struktura 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 on 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 między dokumentami bezpośrednio w CSS jako alternatywę dla używania zdarzeń pageswap i pagereveal w JavaScript. Więcej informacji o przejściach między widokami w aplikacjach wielostronicowych, w tym o tym, jak je skonfigurować w najbardziej wydajny sposób 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 zapewnianiu użytkownikom 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 największych problemów dla deweloperów jest pozornie proste żądanie: możliwość stylizowania menu (elementu select). Chociaż 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 interakcję, stylizację agenta 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 okienkami (zamykanie innych wyskakujących okienek 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 wysuwane są ukryte za pomocą display: none, dopóki nie zostaną otwarte za pomocą elementu wywołującego, takiego jak przycisk, lub za pomocą JavaScriptu. Aby utworzyć podstawowy element wysuwany, ustaw atrybut popover na elemencie i połącz jego identyfikator z przyciskiem za pomocą popovertarget. Teraz przycisk jest elementem 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:

• Promowanie do najwyższej warstwy: osobna warstwa nad resztą strony, więc nie musisz używać z-index.
• Funkcja lekkiego zamykania: Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie fokusu.
• 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żliwe, że korzystasz już z tego interfejsu API bez zdawania sobie z tego sprawy. GitHub wdrożył go w menu „Nowe” na stronie głównej oraz w przeglądzie sprawdzania żądań pull. Stopniowo ulepszał tę funkcję za pomocą kodu polyfill popover, który został opracowany 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 do górnej warstwy, niezależnie od tego, czy jest to wyskakujące okienko czy okno. 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 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 w CSS relację zakotwiczenia za pomocą 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 etykiecie). Następnie zastosuj pozycjonowanie bezwzględne lub stałe względem kotwicy za pomocą funkcji anchor(). Poniższy kod pozycjonuje górną część etykiety na dole 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;
}

Używanie pozycjonowania elementu zakotwiczonego z wyskakującym okienkiem jest bardzo wygodne, ale nie jest wymagane. 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 kotwicy do ustawienia 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 do pozycjonowania elementów zakotwiczonych i nazywa się obszarem wstawki. Obszar wstawki ułatwia umieszczanie elementów pozycjonowanych względem odpowiednich elementów zakotwiczonych i działa w siatce 3 × 3, w której element zakotwiczony znajduje się w środku. Na przykład inset-area: top umieszcza element pozycjonowany u góry, a inset-area: bottom – u dołu.

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

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

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

Możesz łączyć te wartości pozycji ze słowami kluczowymi zakresu, aby zacząć od pozycji środkowej i rozciągnąć się w lewo, w prawo lub na całą dostępną liczbę kolumn lub wierszy. Możesz też używać właściwości logicznych. Aby łatwiej było sobie wyobrazić ten mechanizm układu i go zrozumieć, skorzystaj z tego narzędzia w Chrome w wersji 125 lub nowszej:

Ponieważ te elementy są zakotwiczone, element z określoną pozycją dynamicznie przesuwa się po stronie wraz z przesuwaniem się kotwicy. 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ć @position-try blok, który będzie wyświetlany, gdy po prawej stronie menu nie będzie wystarczająco dużo miejsca. Nadaj mu niestandardowy identyfikator --bottom. Następnie połącz ten blok @position-try z kotwicą za pomocą bloku position-try-options.

Teraz przeglądarka będzie 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ć z płynnym przejściem.

#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 wbudowanym.

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 interfejsy są wszędzie, a zestaw funkcji przedstawionych w tym poście to doskonały początek, który pozwala uwolnić kreatywność i lepiej kontrolować elementy zakotwiczone oraz interfejsy warstwowe. To jednak dopiero początek. Obecnie na przykład funkcja 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 w momencie, gdy użytkownik wykazuje zainteresowanie, bez konieczności klikania, np. przez najechanie kursorem lub ustawienie fokusu na karcie.

W ramach kolejnego etapu rozwoju interfejsu Popover API pracujemy nad interesttarget, aby zaspokoić te potrzeby i ułatwić odtwarzanie tych doświadczeń dzięki wbudowanym odpowiednim mechanizmom ułatwień dostępu. Jest to trudny problem związany z ułatwieniami dostępu, w przypadku którego istnieje wiele otwartych pytań dotyczących idealnych zachowań. Jednak rozwiązanie i znormalizowanie tej funkcji na poziomie platformy powinno poprawić te doświadczenia 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 deweloperów zewnętrznych, Keitha Cirkela i Luke’a Warlowa, w wersji Canary dostępny jest też inny ogólny wywołujący przyszłościowy (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. Może to być np. stylizowanie strzałki łączącej zakotwiczony element z jego punktem zakotwiczenia, zwłaszcza gdy zmienia się położenie zakotwiczonego elementu, oraz umożliwienie 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 udało się osiągnąć wiele. Zła wiadomość jest taka, że ten interfejs API jest obecnie w stadium eksperymentalnym. Cieszę się jednak, że mogę zaprezentować kilka wersji demonstracyjnych na żywo i przedstawić postępy, a także uzyskać od Was opinie. Po pierwsze, poczyniliśmy postępy w zakresie sposobu włączania dla użytkowników nowego, dostosowywanego menu wyboru. Obecny sposób, nad którym pracujemy, polega na użyciu właściwości wyglądu w CSS ustawionej na appearance: base-select. Po ustawieniu wyglądu włączysz nowe, dostosowywane menu 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. Uzyskasz 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.

Prezentacja wizualna

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.

Prezentacja wizualna

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 to zrobić i wiele więcej, co sprawia, że jest to bardzo potrzebny dodatek do platformy internetowej.

Wyjątkowy akordeon

Rozwiązanie problemów z wybranymi stylami (i wszystkimi powiązanymi z nimi elementami) nie jest jedynym komponentem interfejsu, na którym skupia się zespół Chrome. Pierwszą dodatkową aktualizacją komponentu jest możliwość tworzenia ekskluzywnych akordeonów, w których tylko jeden element może być otwarty naraz.

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ą zastosować do elementów sterujących formularza, takich jak pola wejściowe i obszary tekstowe. Umożliwia to powiększanie (lub zmniejszanie) rozmiaru pola wejściowego w zależności od jego zawartości. field-sizing: content może być szczególnie przydatny w przypadku obszarów tekstowych, ponieważ nie musisz już ograniczać się do stałych rozmiarów, w których może być konieczne przewijanie w górę, 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 elementach select, to kolejna mała, 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ć wyprzedzenie, co oznacza, że znak & przed nazwami elementów nie jest już wymagany. Dzięki temu zagnieżdżanie jest znacznie bardziej ergonomiczne i podobne do tego, 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 uwzględniania 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ą bardzo przydatną zmianą jest możliwość używania w układzie blokowym mechanizmów wyśrodkowywania, takich jak align-content. Oznacza to, że możesz teraz wyśrodkować pionowo element w divie bez konieczności stosowania układu flex lub grid 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 zyskały wiele przydatnych aktualizacji, takich jak funkcja word-break: auto-phrase, która zawija wiersz na naturalnej granicy frazy.

oraz 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 wykorzystują motyw oparty na Oklch. Wraz z dostosowywaniem wartości odcienia za pomocą suwaka zmienia się cały motyw. Można to osiągnąć za pomocą względnej składni kolorów. 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 dla 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, aby skonfigurować opcje motywu, trzeba było użyć 2 różnych bloków kodu (motywu domyślnego i zapytania 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 ostatnim roku, czyli selektorze :has(), który pojawił się w przeglądarkach w grudniu ubiegłego roku. Ten interfejs API zmienia zasady pisania logicznych stylów.

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() udało nam się 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ę z dokumentacją angular.dev, w której używa zapytań o kontener 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 z wielokolumnowego układu paska bocznego na układ jednokolumnowy, 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

Wkrótce w Baseline pojawi się też @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 ułatwiają tworzenie solidnych, pięknie dostosowanych komponentów 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żej wydajności, 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 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 temu będziesz mieć więcej czasu na tworzenie ważnych elementów, takich jak podstawowe funkcje i szczegóły 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 wybór z możliwością stylizacji i daj nam znać, co o tym myślisz. Chętnie Ci pomożemy.