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ę 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 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 interakcje o wysokiej jakości. Pracujemy nad dużymi ulepszeniami, które odblokują funkcje, których 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 wywoływanych przewijaniem

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łnostronicowych 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 widoku).

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 działają, a animacja nie 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 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 podmiotu zewnętrznego. 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.

„W porównaniu z konwencjonalnymi zdarzeniami przewijania w JS udało nam się zmniejszyć liczbę wierszy kodu nawet o 80%. Zaobserwowaliśmy też, ż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 odblokowują możliwości, które wcześniej były niemożliwe lub bardzo trudne do wdrożenia na platformie. Pokazują też przyszłość interakcji opartych na przewijaniu.

Aby dowiedzieć się więcej o animacjach opartych na przewijaniu, obejrzyj nową serię filmów, którą nasz zespół opublikował na kanale Chrome for Developers w YouTube. W tym artykule Bramus Van Damme wyjaśnia podstawy animacji sterowanych przewijaniem, w tym jak działa ta funkcja, słownictwo, różne sposoby tworzenia efektów i jak łączyć efekty, aby tworzyć bogate interakcje. To świetna seria filmów, którą warto obejrzeć.

Wyświetlanie przejść

Omówiliśmy właśnie nową, zaawansowaną funkcję animowania wewnątrz stron internetowych, ale istnieje też nowa, zaawansowana funkcja o nazwie przejścia widoku, która umożliwia animowanie 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 na różnych stronach.

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, bezpośrednie 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 dotycząca przejść widoku w tym roku upraszcza to zadanie 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, aby podczas animacji przejść do i z wyświetleń stron stosowane były różne rodzaje przejść wizualnych.

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. Można było dodawać klasy do DOM, aby zastosować style, a potem trzeba było je usunąć. Typy przejść widoku umożliwiają przeglądarce czyszczenie 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 radością ogłaszamy, że w Chromium 126 wprowadzamy obsługę przejść między dokumentami w przypadku aplikacji 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 dają dostęp do obiektu przejścia widoku.

Za pomocą pageswap możesz wprowadzać ostatnie zmiany na stronie wychodzącej tuż przed wykonaniem starych migawek, a za pomocą 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ść widoku, 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 wywoływane gestami: używaj gestów przeciągania lub przesuwania, aby wywoływać przejścia widoku między dokumentami i zapewniać bardziej naturalne wrażenia w internecie.
• Dopasowywanie nawigacji w CSS: dostosuj przejście widoku między dokumentami bezpośrednio w CSS jako alternatywę dla używania zdarzeń pageswap i pagereveal w JavaScript. Więcej informacji o przejściach widoku 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 obsługiwane przez silnik: 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ściowych, w tym grupy roboczej CSS, grupy społecznościowej Open UI i grupy roboczej WHATWG (Web Hypertext Application Technology Working Group).

Jednym z największych problemów deweloperów jest pozornie proste żądanie: 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 okienkami (zamykanie innych wyskakujących okienek po otwarciu jednego z nich)
• Zarządzanie zaznaczeniem karty
• 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 kilka tygodni temu osiągnął stan „nowo dostępny” w Baseline.

Elementy wyskakujące 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 wysuwany, 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 się bawić w z-index.
• Funkcja lekkiego zamykania: Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie zaznaczenia.
• Domyślne zarządzanie zaznaczeniem 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 „Nowe” na stronie głównej oraz w przeglądzie sprawdzania żądań pull. Stopniowo ulepszali tę funkcję, korzystając z wypełnienia popover, które zostało stworzone przez Oddbird przy znacznym wsparciu Keitha Cirkela z GitHub, aby obsługiwać starsze przeglądarki.

„Dzięki przejściu na wysuwane okienka udało nam się usunąć tysiące linii kodu. Popover pomaga nam uniknąć walki z magicznymi numerami z-index… prawidłowe relacje w drzewie dostępności z deklaratywnym zachowaniem przycisku i wbudowanymi zachowaniami związanymi 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. Są to między innymi:

Możliwość animowania elementów 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 animowania efektów wejścia z display: none do najwyższej warstwy.

Właściwość nakładki, która kontroluje zachowanie warstwy najwyższej 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 dialogowe. W przypadku okna dialogowego 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ą przechodzić dyskretne właściwości.

Pozycjonowanie kotwicy

Wyskakujące okienko to dopiero początek tej historii. Bardzo ważna nowość: od Chrome 125 dostępna jest pozycja elementu zakotwiczonego.

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 jednego elementu kotwicy. W tym przykładzie prosta etykietka jest zakotwiczona do każdego przycisku i umieszczona na środku u dołu.

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 etykiecie). Następnie zastosuj pozycjonowanie bezwzględne lub stałe względem elementu zakotwiczonego 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 elementu zakotwiczonego z elementem wysuwanym jest bardzo wygodne, element wysuwany nie jest wymagany do korzystania z pozycjonowania elementu zakotwiczonego. Pozycjonowanie względem punktu zakotwiczenia można stosować w przypadku co najmniej 2 elementów, aby tworzyć relacje wizualne. Poniższa wersja demonstracyjna, zainspirowana artykułem Romana Komarowa, pokazuje styl podkreślenia zakotwiczony do elementów listy, gdy nad nimi najedziesz kursorem lub przejdziesz do nich za pomocą klawisza Tab.

W tym przykładzie użyto funkcji anchor do ustawienia pozycji kotwicy za pomocą właściwości fizycznych elementów left, right i bottom. Gdy najedziesz kursorem na jeden z linków, zmieni się docelowy kotwic, 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 określanie położenia

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 z elementem zakotwiczenia w środku. Na przykład inset-area: top umieszcza pozycjonowany element u góry, a inset-area: bottom – u dołu.

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 łączyć te wartości pozycji ze słowami kluczowymi obejmującymi zakres, aby rozpocząć od pozycji środkowej i rozciągnąć zakres w lewo, w prawo lub na wszystkie strony, tak aby zajmował cały dostępny zestaw kolumn lub wierszy. 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śloną pozycją dynamicznie przesuwa się po stronie wraz z przesuwaniem się elementu zakotwiczonego. W tym przypadku mamy więc elementy karty ze stylami z zapytania o kontener, które zmieniają rozmiar na podstawie ich rozmiaru wewnętrznego (czego nie można było zrobić za pomocą zapytań o media), a zakotwiczone menu będzie się przesuwać wraz z nowym układem, gdy zmieni się interfejs karty.

Dynamiczne pozycje kotwiczenia z position-try-options

Menu i nawigację w 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 położenia. 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 identyfikator niestandardowy --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 wykonać 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 całkowicie pomiń pisanie position-try definicji. Dzięki temu możesz mieć w pełni funkcjonalny element zakotwiczony, który dostosowuje się do lokalizacji, używając tylko 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. Ale to 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 wprowadzenie 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 deweloperów zewnętrznych, Keitha Cirkela i Luke’a Warlowa, w wersji Canary dostępny jest też inny ogólny wywoływacz przyszłościowy (invoketarget), który można przetestować. 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 istnieją przypadki użycia, które nie są jeszcze objęte tym interfejsem API. 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 obszarze widoku zamiast przyciągania do innego położenia ustawionego po osiągnięciu przez niego pola ograniczenia. Cieszymy się, że udało nam się wprowadzić ten zaawansowany interfejs API, ale w przyszłości planujemy 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. Niestety 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 jaki użytkownicy mogą włączać nową, konfigurowalną funkcję wyboru. Obecnie w trakcie opracowywania jest sposób na osiągnięcie tego celu 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ść umieszczenia opcji w tagu 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.

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 takim 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 wersja zastępcza będzie podobna do obecnego domyślnego interfejsu wyboru.

Dzięki dostosowywanym opcjom 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 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. Pierwszą dodatkową aktualizacją komponentu jest 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. Klasy pseudo :user-valid i :user-invalid działają podobnie do klas pseudo :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 „zmieniona”, potrzeba znacznie mniej kodu, co może być bardzo przydatne w przypadku przekazywania użytkownikowi informacji zwrotnych. Zmniejsza to też ilość skryptów, które byłyby potrzebne w tym celu 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 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 polu wejściowym.

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 selektorach, 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ć 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 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 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 wyrównywanie

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 właściwości 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ść chińskich, japońskich i koreańskich tekstów 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 jednej z najważniejszych funkcji interoperacyjności z ostatniego roku, czyli selektora :has(), który został wprowadzony w przeglądarkach w grudniu ubiegłego roku. Ten interfejs API to rewolucja 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, i może w zasadzie 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 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 stylizowanie elementu na podstawie rozmiaru elementu nadrzędnego jest proste.

@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 nigdy 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 wywoływanymi przez przewijanie i przejściami widoku sprawiają, że internet jest bardziej płynny i interaktywny niż kiedykolwiek wcześniej. Komponenty interfejsu nowej generacji ułatwiają tworzenie niezawodnych, pięknie dostosowanych komponentów bez konieczności usuwania wszystkich natywnych funkcji. Ulepszenia jakości życia w zakresie architektury, układu, typografii i projektowania responsywnego nie tylko rozwiązują drobne, ale istotne 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 powiązanie elementów ze sobą za pomocą pozycjonowania kotwicy, 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 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 nich myślisz. Chętnie Ci pomożemy.