Platforma internetowa staje się pełna innowacji, a jej działania obejmują CSS i funkcje interfejsu internetowego, które pozostają na czele tej ekscytującej ewolucji. Żyjemy w złotej erze interfejsu internetowego, w której nowe funkcje CSS pojawiają się w zupełnie innych przeglądarkach w niespotykanym wcześniej tempie. Otwierają przed użytkownikami możliwości tworzenia atrakcyjnych wizualnie i angażujących treści w internecie. W tym poście szczegółowo omawiamy aktualny stan usług porównywania cen i przedstawiamy niektóre z najbardziej przełomowych funkcji, które na nowo definiują sposób tworzenia aplikacji internetowych, ogłoszonych podczas konferencji Google I/O 2024.
Nowatorskie, interaktywne doświadczenia
Wygoda użytkownika w witrynie to w zasadzie połączenie między Tobą a użytkownikami. Dlatego tak ważna jest inwestycja w wysokiej jakości interakcje użytkowników. Pracujemy nad istotnymi ulepszeniami, które odblokują zupełnie nowe możliwości w internecie dotyczące poruszania się w obrębie stron internetowych i poruszania się między nimi.
Animacje przewijane
Interfejs API animacji opartych na przewijaniu pozwala tworzyć dynamiczne animacje oparte na przewijaniu bez konieczności korzystania z obserwatorów przewijania i innych zaawansowanych skryptów.
Twórz animacje przewijane
Podobnie jak w przypadku animacji ograniczonych czasowo na platformie, możesz teraz uruchamiać, wstrzymywać i odwracać animacje za pomocą postępu przewijania kółka przewijania. Przewijając do przodu, zobaczysz postęp animacji, a przewijanie do tyłu będzie przebiegać na odwrót. Pozwala to tworzyć części lub całą stronę z elementami animowanymi w widocznym obszarze (tzw. przewijanie), co zapewnia dynamiczny efekt wizualny.
Takich animacji można używać do wyróżniania ważnych treści, przedstawiania użytkownikom historii lub po prostu dodawania dynamiki do stron internetowych.
Element wizualny z animacją przewijaną
Prezentacja na żywo
@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%;
}
Poprzedni kod definiuje prostą animację, która pojawia się w widocznym obszarze, zmieniając przezroczystość i skalę obrazu. Animacja zależy od pozycji przewijania. Aby uzyskać taki efekt, najpierw skonfiguruj animację CSS, a potem ustaw animation-timeline. W tym przypadku funkcja view() z wartościami domyślnymi śledzi obraz względem obszaru przewijania (w tym przypadku jest to też widoczny obszar).
Warto pamiętać o obsłudze przeglądarek i preferencjach użytkownika, zwłaszcza w przypadku ułatwień dostępu. Dlatego użyj reguły @supports, aby sprawdzić, czy przeglądarka obsługuje animacje oparte na przewijaniu, i zamieszczaj takie animacje w zapytaniu dotyczącym ustawień użytkownika, np. @media (prefers-reduced-motion: no-preference), aby uwzględnić preferencje użytkownika dotyczące ruchu. Po ich sprawdzeniu masz pewność, że style będą działać, a animacja nie będzie sprawiała użytkownikowi żadnych problemów.
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* Apply scroll-driven animations here */
}
}
Animacje po przewinięciu mogą być atrakcyjne dla całej strony, ale mogą też obejmować bardziej subtelne animacje, takie jak pasek nagłówka, który minimalizuje i wyświetla cień podczas przewijania aplikacji internetowej.
Element wizualny z animacją przewijaną
Prezentacja na żywo
@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 tej wersji demonstracyjnej wykorzystano kilka różnych animacji klatek kluczowych – nagłówek, tekst, pasek nawigacyjny i tło – a potem stosuje do każdej z nich odpowiednią animację przewijaną. Choć każdy z nich ma inny styl animacji, wszystkie mają tę samą oś czasu animacji, najbliższy pasek przewijania i ten sam zakres animacji – od góry strony do 150 pikseli.
Korzyści z wydajności animacji napędzanych przewijaniem
Ten wbudowany interfejs API zmniejsza obciążenie kodu, które musisz utrzymywać, niezależnie od tego, czy jest to napisany przez Ciebie niestandardowy skrypt, czy uwzględnienie dodatkowej zależności innej firmy. Eliminuje też potrzebę wysyłania różnych obserwatorów przewijania, co przekłada się na całkiem spore korzyści w zakresie wydajności. Dzieje się tak, ponieważ animacje oparte na przewijaniu wychodzą z wątku głównego podczas animowania właściwości, które można animować w kompozycie, takich jak przekształcenia i przezroczystość, niezależnie od tego, czy używasz nowego interfejsu API bezpośrednio w CSS, czy za pomocą haczyków JavaScript.
Tokopedia ostatnio użyła animacji przewijanych, aby pasek nawigacyjny produktu wyświetlał się podczas przewijania. Używanie tego interfejsu API ma spore korzyści zarówno pod względem zarządzania kodem, jak i wydajności.
„Udało nam się zmniejszyć ilość wierszy kodu o nawet 80% w porównaniu ze standardowymi zdarzeniami przewijania JS i zaobserwowaliśmy, że podczas przewijania średnie wykorzystanie procesora zmniejszyło się z 50% do 2%. – Andy Wihalim, starszy inżynier oprogramowania, Tokopedia”
Przyszłość efektów przewijania
Wiemy, że te efekty w dalszym ciągu sprawią, że internet staje się bardziej interesujący, i już się zastanawiamy, co może się stać w przyszłości. Dzięki temu możesz nie tylko korzystać z nowych osi czasu animacji, ale też korzystać z punktu przewijania do uruchamiania początku animacji (animacji wywoływanej przewijanie).
W przyszłości w przeglądarkach pojawi się jeszcze więcej funkcji przewijania. Poniższa wersja demonstracyjna łączy te przyszłe funkcje. Za pomocą CSS scroll-start-target ustawia on początkową datę i godzinę w selektorach, a zdarzenie JavaScript scrollsnapchange do aktualizowania daty nagłówka. Ułatwia to synchronizację danych ze zdarzeniem przyciągającym.
Możesz także wykorzystać tę wiedzę, aby w czasie rzeczywistym aktualizować selektor za pomocą zdarzenia scrollsnapchanging JavaScriptu.
Te szczególne funkcje są obecnie dostępne tylko w wersji Canary, ale oferują możliwości, które wcześniej były niemożliwe lub bardzo trudne do opracowania na platformie. Zwracają też uwagę na przyszłość w zakresie interakcji opartych na przewijaniu.
Aby dowiedzieć się więcej o tym, jak zacząć korzystać z animacji przewijanych, nasz zespół właśnie opublikował nową serię filmów, którą znajdziesz na kanale Chrome for Developers w YouTube. Nauczysz się podstaw animacji opartych na przewijaniu od Bramusa Van Damme'a, w tym o działaniu tej funkcji, słownictwie, różnych sposobach tworzenia efektów i łączeniu efektów, aby tworzyć atrakcyjne treści. To świetna seria filmów, które warto obejrzeć.
Wyświetl przejścia
Omówiliśmy właśnie nową, zaawansowaną funkcję animowania na stronach internetowych, ale mamy też nową, zaawansowaną funkcję o nazwie „przejścia między wyświetleniami”, która pozwala animować między wyświetleniami strony w celu zapewnienia wygody użytkownikom. Przejścia w widoku to nowy poziom płynności w przeglądaniu internetu, który pozwala tworzyć płynne przejścia między różnymi widokami na tej samej stronie, a nawet między różnymi stronami.
Airbnb to jedna z firm, które już eksperymentują z integracją widoków z interfejsem w celu zapewnienia płynnej i bezproblemowej nawigacji. Dotyczy to m.in. paska bocznego edytora informacji o produktach bezpośrednio w obszarze edytowania zdjęć i dodawania udogodnień – a wszystko odbywa się płynnie w ramach płynnego procesu użytkownika.
Te efekty na całej stronie są atrakcyjne i płynne, ale można też tworzyć mikrointerakcje, np. w tym przykładzie aktualizowany jest widok listy po interakcji użytkownika. Ten efekt można bez trudu osiągnąć za pomocą przejść między widokami.
Aby szybko włączyć przejścia między widokami w aplikacji z jedną stroną, wystarczy dodać opis interakcji za pomocą atrybutu document.startViewTransition i upewnić się, że podczas tworzenia węzłów DOM każdy przechodzący element ma tag view-transition-name, wbudowany lub dynamicznie używany JavaScript.
Treści wizualne
Prezentacja na żywo
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świetl klasy przejścia
Nazwy przejść widoku mogą służyć do stosowania niestandardowych animacji do przejść widoku, jednak przenoszenie wielu elementów może być uciążliwe. Pierwsza nowa aktualizacja wyświetlania przejść w tym roku upraszcza ten problem i wprowadza możliwość tworzenia wyświetlania klas przejść, które można zastosować do niestandardowych animacji.
Obsługa przeglądarek
- 125
- 125
- x
- x
Wyświetl typy przejść
Inną istotną poprawą w przypadku przejść z widokiem jest obsługa typów przejść z widokiem. Typy przejść widoku są przydatne, gdy chcesz zastosować inny rodzaj wizualnego przejścia podczas przechodzenia z jednego do drugiego wyświetlenia strony.
Możesz na przykład chcieć, aby strona główna była animowana do strony bloga w inny sposób niż powrót do strony głównej. Możesz też zmieniać strony na różne sposoby, jak w tym przykładzie, od lewej do prawej lub odwrotnie. Wcześniej było to całkiem chaotyczne. Można było dodawać klasy do DOM, aby zastosować style, a potem je usuwać. Typy przejścia widoku umożliwiają przeglądarce oczyszczanie starych przejść, dzięki czemu nie musisz robić tego ręcznie przed uruchomieniem nowych.
Możesz skonfigurować typy w ramach funkcji document.startViewTransition, która akceptuje teraz obiekty. 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 w widoku wielu stron
Tym, co sprawia, że internet jest tak wydajny, jest to, że jest on rozbudowany. Wiele aplikacji nie składa się z pojedynczej strony, ale jest bardzo rozbudowaną grafiką obejmującą wiele stron. Dlatego z przyjemnością informujemy, że wprowadzamy przejścia między widokiem wielu dokumentów w aplikacjach wielostronicowych w Chromium 126.
Ten nowy zestaw funkcji do obsługi wielu dokumentów obejmuje środowiska internetowe działające w tej samej domenie, takie jak przechodzenie z web.dev do web.dev/blog, ale nie obejmuje przechodzenia z innych domen, np. z web.dev na blog.web.dev lub do innej domeny, takiej jak google.com.
Jedną z głównych różnic w przypadku przejścia w widoku tego samego dokumentu jest to, że nie trzeba pakować przejścia za pomocą funkcji document.startViewTransition(). Zamiast tego włącz obie strony biorące udział w przejściu wyświetlenia, korzystając z reguły CSS @view-transition.
@view-transition {
navigation: auto;
}
Aby uzyskać bardziej niestandardowy efekt, możesz dodać do kodu JavaScript nowe detektory zdarzeń pageswap lub pagereveal, które dają dostęp do obiektu przejścia widoku.
Dzięki pageswap możesz wprowadzić kilka ostatnich zmian na stronie wychodzącej tuż przed wykonaniem starych zrzutów, a za pomocą pagereveal możesz dostosować nową stronę, zanim rozpocznie się jej wyświetlanie po zainicjowaniu.
window.addEventListener('pageswap', async (e) => {
// ...
});
window.addEventListener('pagereveal', async (e) => {
// ...
});
W przyszłości planujemy dodać więcej opcji przełączania widoków, w tym:
- Przejścia ograniczone: możesz ograniczyć przejście do poddrzewa DOM, dzięki czemu reszta strony pozostanie interaktywna i umożliwi działanie wielu przejść z widoku wyświetlanych w tym samym czasie.
- Przejścia widoku sterowanego gestami: za pomocą gestów przeciągania lub przesuwania możesz przełączać widok między dokumentami, co pozwala uzyskać bardziej natywny efekt w internecie.
- Dopasowywanie nawigacji w CSS: dostosuj przejście widoku między dokumentami bezpośrednio w CSS jako alternatywę dla korzystania ze zdarzeń
pageswapipagerevealw JavaScripcie. Aby dowiedzieć się więcej o przejściach wyświetlania w aplikacjach wielostronicowych, a także o tym, jak najskuteczniej je skonfigurować za pomocą renderowania wstępnego, zapoznaj się z tym wystąpieniem Bramusa van Damme'a:
Komponenty interfejsu z obsługą wyszukiwarki: uproszczenie złożonych interakcji
Tworzenie złożonych aplikacji internetowych nie jest łatwe, ale kod CSS i HTML stale się zmieniają, aby uprościć ten proces. Nowe funkcje i ulepszenia upraszczają tworzenie komponentów UI, dzięki czemu możesz się skupić na zapewnianiu najlepszych wrażeń. Jest to możliwe dzięki współpracy kilku kluczowych organizacji i grup społeczności, w tym CSS Work Group, Open UI Community Group i WhatWG (Web Hypertext Application Technology Work Group).
Jednym z głównych przeszkód dla programistów jest pozornie prosta prośba: możliwość zmiany stylu menu (elementu wyboru). Choć z pozoru wydaje się to oczywiste, jest to skomplikowany problem, który dotyczy tak wielu elementów platformy: od układu i renderowania, przez przewijanie i interakcję, przez style klienta użytkownika, właściwości CSS, a nawet na zmiany w kodzie HTML.
Menu składa się z wielu elementów i zawiera wiele stanów, które trzeba uwzględnić, np.:
- Powiązania klawiszy (otwieranie i kończenie interakcji)
- Kliknij, aby zamknąć
- Aktywne zarządzanie wyskakującymi okienkami (zamykaj inne okienka wyskakujące po otwarciu jednego z nich)
- Zarządzanie ostrością na kartach
- Wizualizacja wartości wybranej opcji
- Styl interakcji ze strzałką
- Zarządzanie stanem (otwarte/zamknięte)
Trudno jest samodzielne w tej chwili zarządzać tymi kwestiami, ale platforma nie ułatwia też tego. Aby rozwiązać ten problem, zepsuliśmy te elementy i wysyłamy kilka podstawowych funkcji, które umożliwiają korzystanie z menu stylów, ale zawierają też wiele innych funkcji.
Popover API
Najpierw wysłaliśmy atrybut globalny o nazwie popover. Z przyjemnością informujemy, że kilka tygodni temu właśnie został on udostępniony w wersji Baseline.
Elementy typu pop-over są ukryte za pomocą funkcji display: none, dopóki nie zostaną otwarte za pomocą elementu wywołującego, takiego jak przycisk lub JavaScript. Aby utworzyć podstawowe okienko wyskakujące, ustaw atrybut wyskakującego okienka dla elementu i połącz jego identyfikator z przyciskiem za pomocą atrybutu popovertarget. Teraz przycisk to wywołujący.
Treści wizualne
Prezentacja na żywo
<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 najważniejszych działań bez konieczności wykonywania dodatkowych skryptów, w tym:
- Awans do najwyższej warstwy: Osobna warstwa nad pozostałą częścią strony, dzięki czemu nie trzeba już ingerować w
z-index. - Funkcja lekkiego zamknięcia: Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie zaznaczenia.
- Domyślne zarządzanie zaznaczeniem kart: Otwarcie wyskakującego okienka powoduje, że następna karta zostaje zatrzymana.
- Wbudowane powiązania klawiatury. Naciśnięcie klawisza
esclub podwójne przełączenie powoduje zamknięcie wyskakującego okienka i powrót fokusu. - Domyślne powiązania komponentów. : przeglądarka w sposób semantyczny łączy wyskakujące okienko z regułą.
Być może obecnie korzystasz z tego interfejsu API popover, nieświadomie. Zespół GitHub wdrożył wyskakujące okienko w menu „Nowe” na stronie głównej i w przeglądzie żądania pull. Stopniowo ulepszali tę funkcję za pomocą popover polyfill, opracowanego przez Oddbird, przy istotnym wsparciu Keitha Cirkela z GitHuba, na potrzeby starszych przeglądarek.
„Przeprowadziliśmy migrację do pop-overu, aby przestać używać dosłownie tysiąca wierszy kodu. Rozwiązanie Popover pomaga nam eliminować konieczność walki z magicznymi liczbami z-index. Dążenie do uzyskania odpowiedniej relacji drzewa ułatwień dostępu opartego na deklaratywnym działaniu przycisku i wbudowanych zachowaniach ostrości znacznie ułatwia naszemu systemowi projektowemu prawidłowe wdrażanie wzorców. – Keith Cirkel, inżynier ds. oprogramowania, GitHub”.
Animowanie efektów wejścia i zakończenia
Gdy korzystasz z popoverów, warto dodać interakcję. W ubiegłym roku wprowadziliśmy 4 nowe funkcje związane z interakcją w celu obsługi animowania wyskakujących okienek. Są to między innymi:
Możliwość animowania elementów display i content-visibility na osi czasu klatki kluczowej.
Właściwość transition-behavior ze słowem kluczowym allow-discrete, która umożliwia przenoszenie usług dyskretnych, np. display.
Reguła @starting-style animująca efekty wejścia z elementu display: none do najwyższej warstwy.
Właściwość nakładki służąca do kontrolowania działania górnej warstwy podczas animacji.
Działają one w przypadku każdego elementu animowanego w górnej warstwie, niezależnie od tego, czy chodzi o wyskakujące okienko czy okno. Wszystko razem wygląda w ten sposób w przypadku okna z tłem:
Treści wizualne
Prezentacja na żywo
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 interfejs @starting-style, aby przeglądarka wiedziała, z których stylów element animowany ma być animowany w elemencie DOM. Dotyczy to zarówno okna, jak i tła. Następnie określ styl stanu otwartego dla okna i tła. W przypadku okna używany jest atrybut open, a w przypadku wyskakującego okienka – pseudoelement ::popover-open. Na koniec animuj elementy opacity, display i overlay, używając słowa kluczowego allow-discrete, aby włączyć tryb animacji, w którym mogą się przechodzić określone właściwości.
Pozycjonowanie zakotwiczonych
Popover był dopiero początkiem historii. Nowością jest to, że w Chrome 125 udostępniliśmy obsługę pozycjonowania zakotwiczonego.
Dzięki pozycjonowaniu zakotwiczonych wystarczy do napisania kilku wierszy kodu przeglądarka może obsłużyć polecenie logiczne, które powiąże umieszczony element z jednym lub większą liczbą elementów zakotwiczonych. W poniższym przykładzie do każdego przycisku jest zakotwiczona prosta etykietka umiejscowiona na środku u dołu.
Treści wizualne
Prezentacja na żywo
Skonfiguruj relację z zakotwiczoną pozycją w CSS, używając właściwości anchor-name w elemencie kotwicy (w tym przypadku przycisku) i właściwości position-anchor na umieszczonym elemencie (w tym przypadku w etykietce). Następnie zastosuj bezwzględne lub stałe pozycjonowanie względem reklamy zakotwiczonej, używając funkcji anchor(). Ten kod umieszcza górną część etykietki 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. Jest to przydatne, gdy zakotwiczasz wiele 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 we właściwościach justify i align, aby wyśrodkować umieszczony element w reklamie zakotwiczonej.
.anchor {
anchor-name: --my-anchor;
}
.positioned {
position: absolute;
top: anchor(--my-anchor bottom);
justify-self: anchor-center;
}
Pozycjonowanie reklam zakotwiczonych z wyskakującym okienkiem jest bardzo wygodne, jednak nie jest wymagane przy pozycjonowaniu reklam zakotwiczonych. Pozycjonowania zakotwiczonych można używać z dowolnymi 2 elementami (lub większą ich liczbą), aby stworzyć wizualną relację. W tej prezentacji, inspirowanej artykułem Romana Komarowa, zakotwiczono styl podkreślenia elementów listy po najechaniu na nie kursorem myszy lub przy użyciu klawisza Tab.
Treści wizualne
Prezentacja na żywo
W tym przykładzie użyliśmy funkcji zakotwiczenia do skonfigurowania pozycji reklamy zakotwiczonej za pomocą właściwości fizycznych left, right i bottom. Gdy najedziesz kursorem na jeden z linków, zakotwiczona reklama docelowa się zmieni, a przeglądarka przesunie element docelowy, aby zastosować odpowiednie pozycjonowanie. W ten sposób uzyskasz efekt animowania koloru.
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;
}
Pozycjonowanie: inset-area
Oprócz prawdopodobnie używanego wcześniej domyślnego kierunkowego pozycjonowania bezwzględnego dodaliśmy też nowy mechanizm układu, który trafił do interfejsu API do pozycjonowania zakotwiczenia nazywanego obszarem wcięcia. Obszar wcięcia ułatwia umieszczanie elementów względem odpowiednich kotwic. Działa w siatce 9-komórkowej z elementem zakotwiczonym pośrodku. Na przykład inset-area: top umieszcza umieszczony element na górze, a inset-area: bottom – na dole.
Uproszczona wersja pierwszej wersji demonstracyjnej reklamy zakotwiczonej w interfejsie inset-area wygląda tak:
.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 typu „span”, aby zacząć od pozycji środkowej, a następnie rozciągnąć je w lewo lub w prawo albo rozciągnąć w lewo lub w prawo, aby uzyskać pełny zestaw dostępnych kolumn lub wierszy. Możesz też użyć właściwości logicznych. Aby ułatwić sobie wizualizację i korzystanie z tego mechanizmu układu, skorzystaj z tego narzędzia w Chrome 125 i nowszych:
Ponieważ elementy te są zakotwiczone, umieszczony element dynamicznie porusza się po stronie wraz z przesuwaniem się reklamy zakotwiczonej. W tym przypadku mamy więc elementy karty stylizowane na kontener, które zmieniają rozmiar w zależności od swojego wewnętrznego rozmiaru (jest to niemożliwe w przypadku zapytań o multimedia), a menu zakotwiczone będzie przesuwało się zgodnie z nowym układem w miarę zmian interfejsu karty.
Treści wizualne
Prezentacja na żywo
Dynamiczne pozycje zakotwiczone z atrybutem position-try-options
Połączenie pozycjonowania wyskakujących okienek i reklam zakotwiczonych znacznie ułatwia tworzenie menu i podmenu. A gdy zakotwiczony element osiągnie krawędź widocznego obszaru, przeglądarka sama zajmie się zmianą pozycji.
Możesz to zrobić na kilka sposobów. Pierwsza z nich to stworzenie własnych reguł pozycjonowania. W tym przypadku menu podrzędne jest początkowo po prawej stronie przycisku witryny sklepowej. Jeśli jednak po prawej stronie menu nie ma wystarczająco dużo miejsca, możesz utworzyć blok @position-try. Nadaj mu niestandardowy identyfikator --bottom. Następnie połącz blok @position-try z kotwicą za pomocą position-try-options.
Teraz przeglądarka przełącza się między tymi stanami zakotwiczenia, próbując najpierw znaleźć właściwą pozycję, a następnie przechodzi na dół. Można to zrobić pięknym przejściem.
Treści wizualne
Prezentacja na żywo
#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 jawnej logiki pozycjonowania dostępnych jest kilka słów kluczowych, które przeglądarka podaje, gdy potrzebne są podstawowe działania, takie jak odwrócenie reklamy zakotwiczonej w blok lub w kierunku.
position-try-options: flip-block, flip-inline;
Jeśli chcesz łatwo odwracać strony, skorzystaj z tych funkcji odwracania słów kluczowych i pomiń pisanie definicji w języku position-try. Teraz możesz uzyskać w pełni funkcjonalny, elastyczny element zakotwiczony umieszczony w wybranej lokalizacji, używając tylko kilku wierszy kodu CSS.
Treści wizualne
Prezentacja na żywo
.tooltip {
inset-area: top;
position-try-options: flip-block;
}
Dowiedz się więcej o korzystaniu z pozycjonowania zakotwiczonych.
Przyszłość interfejsu warstwowego
Wszędzie widzimy, jak działają powiązane funkcje. Zestaw funkcji przedstawiony w tym poście to doskonały początk do pobudzania kreatywności oraz większej kontroli nad zakotwiczonymi elementami i warstwowymi interfejsami. To jednak dopiero początek. Na przykład obecnie popover działa tylko z przyciskami jako elementem wywołującym lub w języku JavaScript. W przypadku podglądów w stylu Wikipedii, czyli wzorców widocznych w całej platformie internetowej, musi umożliwiać interakcję, a także powodować wyświetlenie wyskakującego okienka z linku oraz ze strony użytkownika wykazującego zainteresowanie bez klikania kliknięciem, np. najechanie kursorem czy kliknięcie karty.
Następnym krokiem w pracy interfejsu API popover jest wykonanie interesttarget, które ma zaspokoić te potrzeby i ułatwić odtwarzanie tych rozwiązań za pomocą wbudowanych odpowiednich elementów ułatwień dostępu. To niełatwy problem z ułatwieniami dostępu do rozwiązania, w którym pojawia się wiele otwartych pytań dotyczących idealnych zachowań. Rozwiązanie i znormalizowanie tej funkcji na poziomie platformy powinno przynosić korzyści wszystkim użytkownikom.
<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>
<span popover=hint id="my-toolip">This is the tooltip</span>
Dodatkowo w Canary dostępny jest jeszcze jeden ogólny wywołujący aplikacje (invoketarget), który można przetestować dzięki pracy 2 zewnętrznych deweloperów – Keitha Cirkela i Luke'a Warlowa. invoketarget obsługuje deklaratywne rozwiązania dla programistów, w których popovertarget udostępnia okienka wyskakujące oraz znormalizowane pod kątem 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 niektóre przypadki użycia nie zostały jeszcze uwzględnione w tym interfejsie API. Dotyczy to na przykład stylu strzałki, która łączy zakotwiczony element z jego elementem zakotwiczonym, zwłaszcza gdy zmienia się pozycja zakotwiczonego elementu, oraz umożliwianie przesuwania się elementu i pozostania w widocznym obszarze zamiast przyciągania do innej ustawionej pozycji, gdy osiągnie ramkę ograniczającą. Cieszymy się, że możemy udostępnić ten wszechstronny interfejs API, ale w przyszłości zamierzamy jeszcze bardziej rozszerzać jego możliwości.
Wybór stylu
Korzystając z funkcji popover i anchor, zespół pracuje nad finalnym włączeniem konfigurowalnego menu wyboru. Dobra wiadomość jest taka, że udało nam się zrobić duże postępy. Zła wiadomość jest taka, że interfejs API wciąż znajduje się w fazie eksperymentalnej. Z przyjemnością prześlę teraz kilka pokazów na żywo i aktualne informacje o naszych postępach. Liczę na Wasze opinie.
Początkowo pracujemy nad tym, jak umożliwić użytkownikom korzystanie z nowej funkcji wyboru, z możliwością ich dostosowania. Obecny sposób, który jest w toku, to użycie właściwości wyglądu w CSS ustawionej na appearance: base-select. Po ustawieniu wyglądu wybierzesz nowy, konfigurowalny panel wyboru.
select {
appearance: base-select;
}
Oprócz języka appearance: base-select pojawiło się kilka nowych aktualizacji HTML. Obejmują one możliwość dodania opcji w datalist, co pozwala je dostosować, oraz dodawanie w opcjach dowolnych treści nieinteraktywnych, takich jak obrazy. Będziesz też mieć dostęp do nowego elementu <selectedoption>, który odzwierciedla zawartość opcji, które możesz potem dostosować do swoich potrzeb. Ten element jest naprawdę przydatny.
Treści wizualne
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 ilustruje dostosowywanie <selectedoption> w interfejsie Gmaila, gdzie wizualna ikona symbolizuje typ odpowiedzi wybrany w celu zaoszczędzenia miejsca. Aby odróżnić styl opcji od stylu z wersji testowej, możesz używać podstawowych stylów wyświetlania w panelu selectedoption. W takim przypadku tekst widoczny w tej opcji można ukryć w interfejsie selectedoption.
Treści wizualne
Prezentacja na żywo
selectedoption .text {
display: none;
}
Jedną z największych zalet ponownego wykorzystania elementu <select> w tym interfejsie API jest zgodność wsteczna. Ten wybór kraju pokazuje spersonalizowany interfejs z obrazami flag w opcjach, które ułatwiają użytkownikom analizowanie treści. Nieobsługiwane przeglądarki ignorują niezrozumiałe wiersze, takie jak przycisk niestandardowy, lista danych, element selectedoption oraz obrazy w opcjach, więc kreacja zastępcza będzie podobna do bieżącego domyślnego interfejsu wyboru.
Dzięki możliwości dostosowania ustawień masz nieograniczone możliwości. Szczególnie podoba mi się ten selektor krajów w stylu Airbnb, ponieważ jest dobrze przygotowany pod kątem elastycznego projektowania stron. Dzięki nowej funkcji stylu graficznego można zrobić to i wiele więcej, dzięki czemu jest to niezbędne uzupełnienie platformy internetowej.
Treści wizualne
Prezentacja na żywo
Wyjątkowy akordeon
Rozwiązanie wybranego stylu (i wszystkich powiązanych z nim elementów) nie jest jedynym elementem interfejsu, na którym zespół Chrome się skupia. Pierwsza dodatkowa aktualizacja komponentu to możliwość utworzenia wyłącznych akordeonów, gdzie w danym momencie można otworzyć tylko jeden element akordeonu.
Obsługa przeglądarek
- 120
- 120
- x
- 17.2
Aby to umożliwić, można zastosować tę samą wartość nazwy do wielu elementów szczegółów, tworząc w ten sposób połączoną grupę szczegółów, która przypomina grupę 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
Innym ulepszeniem komponentu interfejsu są pseudoklasy :user-valid i :user-invalid. Jest stabilna we wszystkich przeglądarkach i od niedawna pseudoklasy :user-valid i :user-invalid zachowują się podobnie do pseudoklas :valid i :invalid, ale pasują do ustawienia formularza tylko wtedy, gdy użytkownik znacznie wszedł w interakcję z danymi wejściowymi. Oznacza to, że potrzeba znacznie mniej kodu, aby określić, czy wartość formularza była już używana lub stała się „zabrudzona”, co może być bardzo przydatne w przekazywaniu opinii użytkowników i ogranicza konieczność pisania wielu skryptów, które byłyby potrzebne do tego w przeszłości.
Demo Screencast
Prezentacja na żywo
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 do weryfikacji formularza*.
field-sizing: content
Kolejną przydatną aktualizacją komponentu jest field-sizing: content, którą można zastosować do elementów sterujących formularza, takich jak pola do wprowadzania danych i obszary tekstowe. Dzięki temu można zwiększać (lub zmniejszać) rozmiar danych w zależności od ich zawartości. Funkcja field-sizing: content może być szczególnie przydatna w przypadku obszarów tekstowych, ponieważ nie musisz już korzystać ze stałych rozmiarów, gdzie może być konieczne przewinięcie w górę, aby w zbyt małym oknie do wprowadzania danych zobaczyć tekst we wcześniejszych częściach promptu.
Obsługa przeglądarek
- 123
- 123
- x
- x
Demo Screencast
Prezentacja na żywo
textarea, select, input {
field-sizing: content;
}
Dowiedz się więcej o określaniu rozmiaru pól.
<hr> w: <select>
Możliwość włączenia elementu <hr> (linii poziomej) w zaznaczeniach to kolejna mała, ale przydatna funkcja komponentu. Nie wymaga to dużego semantycznego zastosowania, ale pomaga łatwo oddzielić treści na liście wybranych elementów, zwłaszcza te, których nie chcesz koniecznie zgrupować przy użyciu grupy optycznej, np. przy użyciu wartości zmiennej.
Wybierz zrzut ekranu
Wybierz prezentację 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 korzystaniu z godziny w wyborze
Poprawa jakości życia
Stale go ulepszamy, nie chodzi tylko o interakcje i komponenty. W ubiegłym roku pojawiło się wiele innych zmian dotyczących jakości życia.
Zagnieżdżanie z wyprzedzeniem
Natywne zagnieżdżanie CSS pojawiło się w zeszłym roku we wszystkich przeglądarkach. Od tego czasu ulepszyliśmy jego obsługę z wyprzedzeniem, dlatego & przed nazwami elementów nie jest już wymagane. Dzięki temu proces wdrażania wydaje się o wiele bardziej ergonomiczny i podobny do tego, z jakim byłam w przeszłości.
Jedną z moich ulubionych zalet zagnieżdżania CSS jest możliwość wizualnego blokowania komponentów, a w ramach tych komponentów zawierają stany i modyfikatory, takie jak zapytania dotyczące kontenerów i zapytania o media. Wcześniej często grupowałam wszystkie te zapytania na dole pliku, by zwiększyć szczegółowość. Teraz możesz je napisać w sensowny sposób, 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 */
}
}
Wyrównanie treści w układzie blokowym
Kolejną bardzo przydatną zmianą jest możliwość użycia w układzie blokowym mechanizmów wyśrodkowania, takich jak align-content. Oznacza to, że możesz teraz wykonywać takie czynności jak wyśrodkowanie elementu div w pionie bez konieczności stosowania układu elastycznego lub siatki i bez efektów ubocznych, takich jak zapobieganie zwijaniu marginesów, które mogą być niepożądane w przypadku tych algorytmów układu.
Obsługa przeglądarek
- 123
- 123
- 125
- 17,4
Zrzut ekranu
Prezentacja na żywo
div {
align-content: center;
}
Text-wrap: równowaga i piękno
A jeśli już mowa o układzie, to ulepszyliśmy układ tekstu o elementy text-wrap: balance i pretty. text-wrap: balance służy do bardziej jednolitego bloku tekstu, natomiast text-wrap: pretty koncentruje się na ograniczeniu pojedynczych tonów w ostatnim wierszu tekstu.
Demo Screencast
Prezentacja na żywo
balance i pretty w nagłówku i akapicie. Spróbuj przetłumaczyć prezentację na inny język.h1 {
text-wrap: balance;
}
Dowiedz się więcej o metodzie text-wrap: Balance.
Międzynarodowe aktualizacje typografii
Aktualizacje typograficzne w elementach tekstowych CJK otrzymały w ubiegłym roku wiele ciekawych zmian, np. funkcję word-break: auto-phrase, która zakrywa linię na granicy naturalnej granicy wyrażenia.
Obsługa przeglądarek
- 119
- 119
- x
- x
word-break: normal i word-break: auto-phraseFunkcja text-spacing-trim, która stosuje kerning między znakami interpunkcyjnymi, aby poprawić czytelność typografii w językach chińskim, japońskim i koreańskim, aby uzyskać atrakcyjniejsze wizualnie wyniki.
Obsługa przeglądarek
- 123
- 123
- x
- x
Składnia kolorów względnych
W dziedzinie motywów kolorystycznych zaobserwowaliśmy dużą aktualizację dotyczącą względnej składni kolorów.
W tym przykładzie kolory zostały utworzone z użyciem motywów Oklch. Cały motyw zmienia się wraz z dostosowaniem wartości barwy zgodnie z suwakiem. Można to osiągnąć za pomocą względnej składni kolorów. Tło używa koloru podstawowego na podstawie odcienia oraz reguluje jasność, barwę i kanały barw, aby dostosować jego wartość. --i to indeks równorzędny na liście gradacji wartości. Wskazuje on, jak można połączyć kroczenie z właściwościami niestandardowymi i względną składnią kolorów, by utworzyć motywy.
Demo Screencast
Prezentacja na żywo
balance i pretty w nagłówku i akapicie. Spróbuj przetłumaczyć prezentację na inny język.: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()
Wraz z funkcją light-dark() tworzenie motywów stało się dużo bardziej dynamiczne i uproszczone.
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 dobrze ilustruje ten schemat wizualny Adama Argyle'a. Wcześniej, aby skonfigurować opcje motywów, trzeba było dodać 2 różne bloki kodu (motyw domyślny i zapytanie wybrane przez użytkownika). Teraz możesz użyć funkcji light-dark(), aby napisać opcje stylu dla jasnego i ciemnego motywu w tej samej linii CSS.
light-dark(). Aby dowiedzieć się więcej, zobacz prezentację.
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()
Będę szalał opowiedzieć o nowoczesnym interfejsie bez wspominania o jednej z najważniejszych funkcji związanych ze interoperacyjnością z minionego roku – selektorem :has(), który trafił do przeglądarek w grudniu ubiegłego roku. Ten interfejs API przełoży się na rewolucję w pisaniu stylów logicznych.
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 zasadniczo mogą również działać jako selektor nadrzędny.
has() do stylu porównywania bloków w Tokopedii.Metoda :has() okazała się szczególnie przydatna w wielu firmach, w tym w przypadku PolicyBazaar, które używają :has() do stylizowania bloków na podstawie zawartości ich wnętrza, na przykład w sekcji porównania, gdy styl jest dostosowywany, gdy w bloku znajduje się plan do porównania lub jest on pusty.
„Dzięki selektorowi :has() udało nam się wyeliminować weryfikację wyboru użytkownika opartą na języku JavaScript i zastąpić ją rozwiązaniem CSS, które doskonale sprawdza się w naszej firmie i do tego nie dochodzi tak samo jak wcześniej. – Amman Soni, kierownik ds. technicznych w firmie PolicyBazaar”.
Zapytania dotyczące kontenera
Innym ważnym dodatkiem do internetu, który stał się coraz popularniejszym i coraz bardziej popularnym, są zapytania dotyczące kontenerów. Umożliwiają one skorzystanie z zapytania o rzeczywisty rozmiar elementu nadrzędnego w celu zastosowania stylów. Grzebień jest znacznie precyzyjniejszy od zapytań o multimedia, które wysyłają zapytania tylko o rozmiar widocznego obszaru.
Angular niedawno uruchomił nową, atrakcyjną witrynę z dokumentacją na stronie angular.dev, używając zapytań dotyczących kontenerów, aby określić styl bloków nagłówka w zależności od dostępnego miejsca na stronie. Nawet jeśli układ się zmieni i przechodzi z wielokolumnowego układu paska bocznego na układ jednokolumnowy, bloki nagłówków mogą się automatycznie dostosować.
Bez zapytań dotyczących kontenera wykonanie tego typu działań było dość trudne i narażające wydajność, co wymagało od obserwatorów zmiany rozmiaru i obserwacji elementów. Teraz można łatwo zmienić styl elementu w zależności od jego rozmiaru nadrzędnego.
Demo Screencast
Prezentacja na żywo
@property
Już niedługo z radością dodajemy @property do punktu odniesienia. To kluczowa funkcja pozwalająca zapewnić semantyczne znaczenie niestandardowych właściwościom CSS (nazywanych także zmiennymi CSS) i umożliwia korzystanie z mnóstwa nowych funkcji związanych z interakcjami. @property włącza również znaczenie kontekstowe, sprawdzanie typu, wartości domyślne i wartości zastępcze w CSS. Rozszerzenie możliwości korzystania z jeszcze bardziej zaawansowanych funkcji, takich jak zapytania o styl zakresu. Ta funkcja była nigdy wcześniej nieosiągalna, a teraz jeszcze bardziej rozwinęła język CSS.
Demo Screencast
Prezentacja na żywo
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: #c0bae8;
}
Podsumowanie
Wszystkie te nowe, zaawansowane możliwości interfejsu użytkownika są dostępne w różnych przeglądarkach, więc ich możliwości są nieograniczone. Nowe, interaktywne animacje z animacjami przewijanymi i przejściami widoku sprawiają, że sieć jest bardziej płynna i interaktywna w niespotykanych dotąd dotąd doświadczeniach. Dzięki komponentom interfejsu nowej generacji możesz jeszcze łatwiej tworzyć niezawodne, atrakcyjnie dostosowane komponenty bez zrażania całego interfejsu natywnego. Poprawa jakości architektury, układu, typografii i elastycznego projektowania nie tylko rozwiązuje drobne problemy, lecz także daje programistom narzędzia potrzebne do tworzenia złożonych interfejsów działających na różnych urządzeniach, formatach i potrzebach użytkowników.
Te nowe funkcje powinny być w stanie usunąć skrypty innych firm dotyczące funkcji o dużej wydajności, takich jak przewijanie i tethering, dzięki pozycjonowaniu zakotwiczonym, tworzenie płynnych przejść między stronami, określanie stylu menu i natywne poprawienie ogólnej struktury kodu.
Teraz jest najlepszy moment na pisanie stron internetowych. Od wprowadzenia CSS3 nie ma tam tyle energii ani emocji. Funkcje, których potrzebujemy, ale jak zawsze marzyliśmy, stają się w końcu rzeczywistością i częścią platformy. To właśnie dzięki Wam możemy potraktować priorytetowo te funkcje i w końcu je wcielić w życie. Pracujemy nad tym, aby ułatwić i natywnie ułatwić wykonywanie skomplikowanych, pracochłonnych zadań, dzięki czemu możesz poświęcić więcej czasu na tworzenie tego, co najważniejsze – na przykład kluczowych funkcji i detali projektowych, które wyróżniają Twoją markę.
Jeśli chcesz dowiedzieć się więcej o wprowadzanych nowych funkcjach, odwiedź strony developer.chrome.com i web.dev, na których nasz zespół publikuje najnowsze informacje o technologiach internetowych. Wypróbuj animacje przewijane, przejścia widoku, pozycjonowanie zakotwiczonych, a nawet wybór stylu i daj nam znać, co o tym sądzisz. Chętnie Ci pomożemy.