Funkcje stylu internetowego na bieżący dzień i przyszłość znane z zamówień reklamowych Google w 2022 roku oraz kilka dodatkowych korzyści.
Rok 2022 jest jednym z najlepszych lat w dziedzinie usług porównywania cen – zarówno pod względem funkcji, jak i funkcji przeglądarek opartych na współpracy. Celem współpracy jest wdrożenie 14 funkcji.
Przegląd
Ten post to przemowa wygłoszona podczas konferencji Google IO 2022. Nie jest to wyczerpujący przewodnik po każdej funkcji, tylko wprowadzenie i krótkie podsumowanie, które wzbudzi Twoje zainteresowanie i przedstawi zakres, a nie szczegóły. Jeśli Twoje zainteresowanie wzbudziło zainteresowanie, na końcu tej sekcji znajdziesz linki do dodatkowych informacji.
Spis treści
Aby przejść do interesujących Cię tematów, skorzystaj z listy poniżej:
Zgodność z przeglądarką
Głównym powodem, dla którego wiele funkcji CSS zostanie udostępnionych w ramach współpracy, jest Interop 2022. Przed zbadaniem działań związanych z interoperacyjnością z internetem zapoznaj się z działaniami firmy Compat 2021.
Compat 2021
Zgodnie z opiniami deweloperów w 2021 r. celem było ustabilizowanie bieżących funkcji, ulepszenie pakietu testowego i poprawa wyników przeglądarek w przypadku 5 funkcji:
- Pozycjonowanie:
sticky aspect-ratio– rozmiar- Układ
flex - Układ
grid - Pozycjonowanie i animacja obiektu
transform
Wyniki testów zostały podniesione do wszystkich, co potwierdza większą stabilność i niezawodność aplikacji. Gratulacje dla tych drużyn!
Interakcja 2022
W tym roku przeglądarki spotkały się, aby omówić funkcje i priorytety, nad którymi chcieliby pracować, łącząc swoje wysiłki. Zamierzał udostępnić deweloperom następujące funkcje internetowe:
@layer- Przestrzenie i funkcje kolorów
- Do przechowywania
<dialog>- Zgodność formularzy
- Przewijanie
- Podsiatka
- Typografia
- Jednostki widocznego obszaru
- Kompatybilna internetowa
To ekscytująca i ambitna lista, z której nie mogę się doczekać.
Nowości na 2022 rok
Nic dziwnego, że na wyniki zespołu CSS 2022 znacząco wpłyną działania interoperacyjności z 2022 r.
Kaskadowe warstwy
Przed @layer wykryta kolejność wczytywanych arkuszy stylów była bardzo ważna, ponieważ style ładowane jako ostatnie mogą zastąpić style wczytane wcześniej. Pozwoliło to na skrupulatnie zarządzane arkusze stylów wpisów, w których deweloperzy musieli najpierw wczytywać mniej ważne style, a te ważniejsze później. Deweloperzy korzystają z wielu metod, np. ITCSS, które pomagają w zarządzaniu tym priorytetem.
W @layer plik z wpisem może wstępnie zdefiniować warstwy i ich kolejność z wyprzedzeniem. Później, po wczytaniu, wczytaniu lub zdefiniowaniu stylów, można je umieścić w warstwie, co pozwala zachować znaczenie zastąpienia stylu, ale bez rygorystycznego zarządzania ładowaniem.
Film pokazuje, jak zdefiniowane warstwy kaskadowe umożliwiają bardziej swobodny i swobodny proces tworzenia i wczytywania przy jednoczesnym zachowaniu kaskady w razie potrzeby.
Narzędzia deweloperskie w Chrome pozwalają sprawdzić, które style pochodzą z poszczególnych warstw:
Zasoby
- Specyfikacja CSS Cascade 5
- Wyjaśnienie kaskadowe warstw
- Kaskadowe warstwy w MDN
- Una Kravets: Warstwy kaskadowe
- Ahmad Shadeed: Cześć, CSS Cascade Warstwy
Podsiatka
Przed subgrid siatka wewnątrz innej siatki nie mogła wyrównać się do nadrzędnych komórek ani linii siatki. Każdy układ siatki był niepowtarzalny. Wielu projektantów umieszcza jedną siatkę na całym projekcie i stale wyrównuje w niej elementy, co nie było możliwe w CSS.
Po subgrid element podrzędny siatki może przyjąć własne kolumny lub wiersze z elementami nadrzędnymi i wyrównać swoje elementy lub elementy podrzędne.
W tej prezentacji element z treścią tworzy klasyczną siatkę z 3 kolumnami: środkowa kolumna nosi nazwę main, a lewa i prawa nazwają wiersze
fullbleed. Następnie każdy element w treści (<nav> i <main>) przyjmuje nazwane wiersze z treści za pomocą ustawienia grid-template-columns: subgrid.
body {
display: grid;
grid-template-columns:
[fullbleed-start]
auto [main-start] min(90%, 60ch) [main-end] auto
[fullbleed-end]
;
}
body > * {
display: grid;
grid-template-columns: subgrid;
}
Elementy podrzędne <nav> i <main> mogą się wyrównywać lub określać rozmiar za pomocą kolumn i linii fullbleed i main.
.main-content {
grid-column: main;
}
.fullbleed {
grid-column: fullbleed;
}
Narzędzia deweloperskie mogą pomóc w zobaczeniu linii i podgrów (obecnie jest to możliwe tylko w Firefoksie). Na poniższym obrazie siatka nadrzędna i elementy podrzędne zostały nałożone. Wygląda teraz tak, jak projektanci myśleli o układzie.
W panelu elementów narzędzi deweloperskich możesz zobaczyć, które elementy są siatkami i subgridami, co jest bardzo pomocne przy debugowaniu lub weryfikacji układu.
Zasoby
- Specyfikacja elementu podrzędnego
- Subgrid w MDN
- Bramus: samouczki wideo dotyczące praktycznego stylu CSS
Zapytania dotyczące kontenerów
Do @container elementy strony internetowej mogły reagować jedynie na rozmiar całego widocznego obszaru. To świetne rozwiązanie w przypadku układów makr, ale w przypadku układów mikro, gdy kontener zewnętrzny nie obejmuje całego widocznego obszaru, nie można odpowiednio dostosować układu.
Po @container elementy mogą odpowiadać na rozmiar lub styl kontenera nadrzędnego.
Jedynym zastrzeżeniem jest to, że kontenery muszą zadeklarować się jako możliwe cele zapytania, co jest niewielkim wymaganiem zapewniającym duże korzyści.
/* establish a container */
.day {
container-type: inline-size;
container-name: calendar-day;
}
Dzięki nim elementy zdarzenia mogą wyszukiwać kolumny Pon, Wtorek, Środ, Czw i Pt w następującym filmie.
Oto kod CSS, który wysyła zapytanie do kontenera calendar-day o jego rozmiar, a następnie dostosowuje układ i rozmiary czcionek:
@container calendar-day (max-width: 200px) {
.date {
display: block;
}
.date-num {
font-size: 2.5rem;
display: block;
}
}
Inny przykład: jeden komponent książki dostosowuje się do miejsca dostępnego w kolumnie, do której jest przeciągnięty:
Una ma rację, oceniając sytuację jako nową reklamę elastyczną. Korzystanie z elementu @container wiąże się z wieloma ciekawymi i ważnymi decyzjami, które można podjąć.
Zasoby
- Specyfikacja zapytań o kontenerach
- Wyjaśnienie zapytań o kontenery
- Zapytania o kontenery w MDN
- Nowa wersja responsywna w web.dev
- Wersja demonstracyjna Kalendarza utworzona przez Una
- Niesamowita kolekcja zapytań dotyczących kontenerów
- Jak stworzyliśmy Designcember na web.dev
- Ahmad Shadeed: podaj zapytania o kontenery CSS
accent-color
Przed accent-color gdy chciałeś(-aś) utworzyć formularz z kolorami pasującymi do marki, konieczne było używanie złożonych bibliotek lub rozwiązań CSS, które z czasem stawały się trudne do zarządzania. Chociaż były one dostępne we wszystkich opcjach (a prawdopodobnie obejmują one ułatwienia dostępu), wybór użycia wbudowanych lub własnych komponentów staje się żmudny.
Po accent-color jedna linia CSS wprowadza kolor marki do wbudowanych komponentów. Oprócz odcienia przeglądarka inteligentnie wybiera odpowiednie kontrastowe kolory dla pomocniczych części komponentu i dostosowuje się do schematów kolorów systemowych (jasnego lub ciemnego).
/* tint everything */
:root {
accent-color: hotpink;
}
/* tint one element */
progress {
accent-color: indigo;
}
Aby dowiedzieć się więcej na temat właściwości accent-color, przeczytaj mojego posta na web.dev, w którym omawiam wiele innych aspektów tej przydatnej usługi CSS.
Zasoby
- specyfikacja koloru akcentu
- akcent-color w MDN
- akcent-color na web.dev
- Bramus: elementy sterujące interfejsu użytkownika – CSS accent-color
Poziom kolorów 4 i 5
Od kilku dziesięcioleci w internecie jest zdominowane przez sRGB, ale w rozwijającym się cyfrowym świecie wyświetlaczy o wysokiej rozdzielczości i urządzeń mobilnych wyposażonych w ekrany OLED lub QLED sRGB nie wystarczy. Poza tym oczekuje się, że strony dynamiczne dostosowują się do preferencji użytkownika, a zarządzanie kolorami jest coraz częstsze wśród projektantów, systemów projektowania i pracowników kodu.
Jednak nie w 2022 r. – CSS ma wiele nowych funkcji kolorów i przestrzeni: – Kolory, które docierają do możliwości kolorów HD wyświetlaczy. – Przestrzenie kolorów odpowiadające intencjom, np. jednolitość postrzegania. - Przestrzenie kolorów dla gradientów, które gwałtownie zmieniają wyniki interpolacji. – Funkcje kolorów, które ułatwiają mieszanie i kontrastowanie oraz wybieranie przestrzeni do pracy.
Przed wprowadzeniem tych wszystkich funkcji kolorystycznych systemy projektowania musiały wstępnie obliczać odpowiednie kontrastowe kolory i dobierać odpowiednie palety kolorów, a procesory w praktyce i JavaScript wykonywały najcięższą pracę.
Po tych wszystkich kolorach przeglądarka i CSS wykonują całą pracę dynamicznie i w odpowiednim czasie. Zamiast wysyłać użytkownikom wiele KB CSS i JavaScript w celu włączenia kolorów motywów i wizualizacji danych, CSS może wykonywać organizację i obliczenia. CSS ma również lepsze możliwości sprawdzenia pomocy przed użyciem lub bezproblemowego obsłużenia błędów zastępczych.
@media (dynamic-range: high) {
.neon-pink {
--neon-glow: color(display-p3 1 0 1);
}
}
@supports (color: lab(0% 0 0)) {
.neon-pink {
--neon-glow: lab(150% 160 0);
}
}
hwb()
HWB to odcień, bieli i czerni. Prezentuje się w sposób przyjazny dla człowieka, ponieważ jest to tylko barwa oraz odrobina bieli lub czerni do rozjaśnienia lub przyciemnienia. Wykonawcy, którzy łączą kolory z białym lub czarnym mogą docenić tę składnię kolorów.
Użycie tej funkcji kolorów pozwala uzyskać kolory z przestrzeni kolorów sRGB, tak samo jak w HSL i RGB. Jeśli chodzi o nowość na rok 2022, nie oznacza to dla nas nowych kolorów, ale może ułatwić fanom składni i modelu myślowego niektóre zadania.
Zasoby
Przestrzenie kolorów
Sposób przedstawiania kolorów odbywa się za pomocą przestrzeni kolorów. Każda przestrzeń barw ma różne funkcje i ograniczenia związane z pracą z kolorami. Niektóre jaskrawe barwy mogą zebrać wszystkie jasne kolory w jednym miejscu, a inne umiejscowić je jako pierwsze na podstawie ich jasności.
W ramach usługi porównywania cen z 2022 r. pojawi się 10 nowych przestrzeni kolorów, z których każda będzie mieć unikalne funkcje pomagające projektantom i deweloperom w wyświetlaniu, wybieraniu i mieszaniu kolorów. Wcześniej sRGB był jedyną opcją podczas pracy z kolorem. Teraz CSS odblokowuje nowy potencjał i domyślną przestrzeń kolorów – LCH.
color-mix()
Przed color-mix() programiści i projektanci potrzebowali preprocesorów, takich jak Sass, aby mieszać kolory, zanim przeglądarka je zobaczyła.
Większość funkcji mieszania kolorów nie umożliwia określenia przestrzeni kolorów, z której można mieszać, co czasem prowadzi do niejasnych wyników.
Po color-mix() deweloperzy i projektanci mogą mieszać kolory w przeglądarce z wykorzystaniem wszystkich innych stylów bez uruchamiania procesów kompilacji i uwzględniania JavaScriptu. Mogą też określić przestrzeń kolorów, z której mieszają się kolory, lub użyć domyślnej przestrzeni kolorów LCH.
Często jako podstawa używana jest kolor marki, a na jego podstawie tworzone są różne wersje kolorystyczne, np. jaśniejsze lub ciemniejsze kolory dla stylów po najechaniu kursorem. Tak to wygląda w przypadku color-mix():
.color-mix-example {
--brand: #0af;
--darker: color-mix(var(--brand) 25%, black);
--lighter: color-mix(var(--brand) 25%, white);
}
Jeśli chcesz zestawić te kolory w innej przestrzeni kolorów, na przykład w formacie Srgb, zmień ją:
.color-mix-example {
--brand: #0af;
--darker: color-mix(in srgb, var(--brand) 25%, black);
--lighter: color-mix(in srgb, var(--brand) 25%, white);
}
Poniżej przedstawiamy prezentację motywów z użyciem elementu color-mix(). Zmień kolor marki i obejrzyj aktualizację motywu:
W 2022 roku możesz mieszać kolory w różnych przestrzeniach barw w swoich arkuszach stylów.
Zasoby
- specyfikacja color-mix()
- color-mix() w MDN
- Prezentacja motywu
- Kolejna prezentacja tematów
- Fabio Giolito: utwórz motyw kolorystyczny za pomocą nadchodzących funkcji CSS
color-contrast()
Przed color-contrast() autorzy arkuszy stylów musieli znać kolory łatwo dostępne. Często na próbniku kolorów wyświetlany jest czarny lub biały tekst, aby wskazać użytkownikowi systemu kolorów, jaki kolor tekstu będzie potrzebny w celu uzyskania odpowiedniego skontrastowania z próbką.
Po color-contrast() autorzy arkusza stylów mogą całkowicie przenieść to zadanie do przeglądarki. Dzięki przeglądarce możesz nie tylko automatycznie wybrać czarny lub biały kolor, ale też stworzyć listę kolorów odpowiednich do systemu projektowania i wybrać pierwszy z nich, aby uzyskać oczekiwany współczynnik kontrastu.
Oto zrzut ekranu demonstracyjnego zestawu palety kolorów HWB, na którym kolory tekstu są automatycznie wybierane przez przeglądarkę na podstawie koloru próbki:
Podstawowa składnia wygląda tak, gdzie kolor szarości jest przekazywany do funkcji, a przeglądarka określa, czy kontrast jest czarny czy biały:
color: color-contrast(gray);
Funkcję można też dostosować za pomocą listy kolorów, z której wybierany jest najbardziej kontrastowy kolor:
color: color-contrast(gray vs indigo, rebeccapurple, hotpink);
Jeżeli nie można wybrać z listy koloru o największym kontraście, można podać docelowy współczynnik kontrastu i wybrać pierwszy kolor do przekazania:
color: color-contrast(
var(--bg-blue-1)
vs
var(--text-lightest), var(--text-light), var(--text-subdued)
to AA /* 4.5 could also be passed */
);
Tej funkcji można używać nie tylko do określenia koloru tekstu, ale szacuję, że będzie to jej podstawowy przypadek użycia. Zastanów się, o ile łatwiej będzie udostępniać łatwo dostępne i czytelne interfejsy, gdy dobór odpowiednich kontrastujących kolorów zostanie wbudowany w sam język CSS.
Zasoby
Składnia koloru względnego
Aby można było obliczyć kolor i wprowadzić korekty, przed względnej składni kolorów trzeba było osobno umieścić kanały kolorów w właściwościach niestandardowych. To ograniczenie sprawiło, że HSL jest też główną funkcją kolorów do manipulacji kolorami, ponieważ barwę, nasycenie i jasność można było łatwo dostosować za pomocą funkcji calc().
Po względnej składni kolorów każdy kolor w dowolnej przestrzeni można zdekonstruować, zmodyfikować i zwrócić jako kolor – wszystko to w jednym wierszu kodu CSS. Nie ma już ograniczeń HSL – manipulacje można wykonywać w dowolnej przestrzeni kolorów, a aby to ułatwić, trzeba stworzyć o wiele mniej właściwości niestandardowych.
W tej przykładowej składni podany jest podstawowy szesnastkowy kod szesnastkowy, do którego są tworzone 2 nowe kolory. Pierwszy kolor --absolute-change tworzy nowy kolor w LCH z koloru podstawowego, a następnie zastępuje jasność koloru podstawowego wartością 75%, zachowując nasycenie (c) i odcień (h). Drugi kolor --relative-change tworzy nowy kolor w LCH z koloru podstawowego, ale tym razem zmniejsza nasycenie (c) o 20%.
.relative-color-syntax {
--color: #0af;
--absolute-change: lch(from var(--color) 75% c h);
--relative-change: lch(from var(--color) l calc(c-20%) h);
}
To trochę jak mieszanie kolorów, ale w rzeczywistości to coś więcej niż mieszanie, a zmiany. Możesz wybrać kolor z innego koloru, uzyskać dostęp do 3 wartości kanałów określonych przez użytą funkcję kolorów, a także dostosować te kanały. W każdym przypadku jest to bardzo fajna i wydajna składnia koloru.
W poniższej demonstracji wykorzystałem względną składnię kolorów, aby utworzyć jaśniejsze i ciemniejsze wersje koloru podstawowego, a także użyłem atrybutu color-contrast(), aby zapewnić odpowiedni kontrast etykiet:
Tej funkcji możesz też używać do generowania palety kolorów. Oto przykład, w którym całe palety są generowane na podstawie podanego koloru podstawowego. Ten zestaw stylów CSS obsługuje wszystkie palety, a każda paleta jest czymś innym. Ponieważ używam LCH, spójrz na to, jak percepcyjnie są nawet palety – dzięki tej przestrzeni kolorów nie widać żadnych gorących ani martwych punktów.
:root {
--_color-base: #339af0;
--color-0: lch(from var(--_color-base) 98% 10 h);
--color-1: lch(from var(--_color-base) 93% 20 h);
--color-2: lch(from var(--_color-base) 85% 40 h);
--color-3: lch(from var(--_color-base) 75% 46 h);
--color-4: lch(from var(--_color-base) 66% 51 h);
--color-5: lch(from var(--_color-base) 61% 52 h);
--color-6: lch(from var(--_color-base) 55% 57 h);
--color-7: lch(from var(--_color-base) 49% 58 h);
--color-8: lch(from var(--_color-base) 43% 55 h);
--color-9: lch(from var(--_color-base) 39% 52 h);
--color-10: lch(from var(--_color-base) 32% 48 h);
--color-11: lch(from var(--_color-base) 25% 45 h);
--color-12: lch(from var(--_color-base) 17% 40 h);
--color-13: lch(from var(--_color-base) 10% 30 h);
--color-14: lch(from var(--_color-base) 5% 20 h);
--color-15: lch(from var(--_color-base) 1% 5 h);
}
Teraz już wiemy, jak można wykorzystać przestrzenie kolorów i różne funkcje kolorów do różnych celów, uwzględniając ich mocne i słabe strony.
Zasoby
- Specyfikacja składni koloru względnego
- Tworzenie palet kolorów ze względną składnią kolorów
- Kompilowanie wersji kolorystycznych ze względnej składni kolorów
Przestrzenie kolorów gradientu
Przed przestrzeniami kolorów gradientu domyślną przestrzenią kolorów była sRGB. sRGB jest zazwyczaj niezawodne, ale ma pewne wady, np. szara martwa strefa.
Po przestrzeni kolorów gradientu powiedz przeglądarce, której przestrzeni kolorów ma użyć do interpolacji kolorów. Dzięki temu deweloperzy i projektanci mogą wybrać preferowany gradient. Domyślna przestrzeń kolorów również zmieni się na LCH zamiast sRGB.
Dodanie składni następuje po kierunku gradientu, używa nowej składni in i jest opcjonalne:
background-image: linear-gradient(
to right in hsl,
black, white
);
background-image: linear-gradient(
to right in lch,
black, white
);
Oto podstawowy i podstawowy gradient: od czerni do bieli. Przyjrzyj się zakresowi wyników w każdej przestrzeni kolorów. Niektóre stają się czarne wcześniej niż inne, inne za późno zmieniają kolor na biały.
W tym następnym przykładzie kolor czarny jest zmieniany w niebieski, ponieważ jest to znany obszar problemów z gradientami. Większość przestrzeni kolorów wpada w fiolet podczas interpolacji kolorów lub, jak sobie wyobrażam, gdy kolory przemieszczają się w swojej przestrzeni kolorów z punktu A do punktu B. Gradient będzie przebiegać prosto z punktu A do punktu B, dlatego kształt przestrzeni kolorów gwałtownie zmienia punkty na ścieżce.
Więcej szczegółowych informacji, przykładów i komentarzy znajdziesz w tym wątku na Twitterze.
Zasoby
- Specyfikacja interpolacji gradientu
- Prezentacja porównująca gradienty w pokojach
- Dostrzegalny notatnik porównujący gradienty
inert
Przed inert dobrze było kierować użytkownika na obszary strony lub aplikacji, które wymagają natychmiastowej uwagi. Ta strategia ukierunkowana na koncentrację stała się znana jako pułapka na koncentracji, ponieważ deweloperzy umieszczali fokus w przestrzeni interaktywnej, nasłuchiwali zdarzeń zmiany ostrości, a jeśli element skupił się na opuszczaniu interaktywnej przestrzeni, przywracał się do niej z powrotem. Użytkownicy korzystający z klawiatury lub czytników ekranu zostają przekierowani z powrotem do obszaru interaktywnego, aby dokończyć zadanie, zanim przejdą dalej.
Po inert nie jest wymagane zatrzymywanie, bo można zablokować lub zabezpieczyć całe sekcje strony bądź aplikacji. Kliknięcia i próby zmiany zaznaczenia są po prostu niedostępne, gdy te części dokumentu są bezwładne. Można też wyobrazić sobie, że to coś jak ochroniarze, a nie pułapka – inert nie zachęca Cię do pozostania w danym miejscu, a nie do utrzymywania niedostępnych miejsc.
Dobrym przykładem jest tutaj funkcja alert() w języku JavaScript:
Zwróć uwagę na to, że do momentu wywołania funkcji alert() strona była dostępna za pomocą myszy i klawiatury. Po wyświetleniu wyskakującego okienka alertu reszta strony została zablokowana, czyli inert. Użytkownicy muszą skupić się na oknie alertów i nigdzie się nie poruszać. Gdy użytkownik wejdzie w interakcję z funkcją alertu i wykona żądanie funkcji alertu, strona ponownie staje się interaktywna. inert umożliwia deweloperom łatwe osiągnięcie tego samego procesu skupienia z przewodnikiem.
Oto niewielki przykładowy kod, który pokazuje, jak to działa:
<body>
<div class="modal">
<h2>Modal Title</h2>
<p>...<p>
<button>Save</button>
<button>Discard</button>
</div>
<main inert>
<!-- cannot be keyboard focused or clicked -->
</main>
</body>
Dobrym przykładem jest okno dialogowe, ale funkcja inert przydaje się też np. w przypadku wysuwanego menu bocznego. Gdy użytkownik przesuwa menu boczne, nie pozwala na interakcję myszy lub klawiatury z wyświetlaną stroną – jest to dla niego dość trudne. Po wyświetleniu menu bocznego zadbaj o to, aby strona była obojętna. Teraz użytkownicy muszą zamknąć lub przejść do tego bocznego menu. Nie zagubią się w żadnym innym miejscu strony z otwartym menu.
Zasoby
Czcionki COLRv1
Przed wprowadzeniem czcionek COLRv1 w internecie były dostępne czcionki OT-SVG, a także otwarty format dla czcionek z gradientem oraz wbudowanymi kolorami i efektami. Mogą one być bardzo duże i chociaż pozwalały na edycję tekstu, nie były zbyt szerokie pod względem dostosowania.
Po czcionkach COLRv1 internet ma mniejszy korpus, można je skalować wektorowo, zmieniać położenie, stosować gradient i tryb mieszania, a także akceptować parametry, aby dostosować czcionkę do konkretnego przypadku użycia lub dopasować ją do marki.
Oto przykład z posta o emotikonach na blogu Chrome dla deweloperów. Być może udało Ci się zauważyć, że po zwiększeniu rozmiaru czcionki emotikona nie staje się ona ostra. Zawiera obraz, a nie grafikę wektorową. Emotikony w aplikacjach, w których używany jest emotikon, są często zastępowane zasobem wyższej jakości. Dzięki czcionce COLRv1 emotikony są wektorowe i piękne:
Czcionki ikon mogą z nim zrobić niesamowite rzeczy, a także korzystać z niestandardowych palet kolorów w duotonach. Wczytywanie czcionki COLRv1 odbywa się tak samo jak w przypadku każdego innego pliku czcionek:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
Dostosowanie czcionki COLRv1 odbywa się za pomocą @font-palette-values, specjalnej reguły CSS w regule służącej do grupowania i nazywania zestawu opcji dostosowania w pakiet, który można wykorzystać później. Zwróć uwagę, że tak jak właściwości niestandardowej określasz nazwę niestandardową, zaczynając od --:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
Gdy --colorized jest aliasem dostosowań, ostatnim krokiem jest zastosowanie palety do elementu, który używa rodziny czcionek kolorów:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
.spicy {
font-family: "Bungee Spice";
font-palette: --colorized;
}
W obliczu pojawiania się coraz większej liczby zmiennych czcionek i kolorowych czcionek można tworzyć wspaniały sposób na bogactwo możliwości dostosowywania i ekspresji twórczej.
Zasoby
- Specyfikacja Colabv1 w GitHubie
- Programiści Chrome: Czcionki Colrv1
- Film z wyjaśnieniem dla programistów BlinkOn
Jednostki widocznego obszaru
Wcześniej oferowane przez internet jednostki fizyczne ułatwiały dopasowanie widocznych obszarów. Jeden z nich obejmuje wysokość, szerokość, najmniejszy rozmiar (vmin) i największy bok (vmax). Takie rozwiązanie sprawdzało się w wielu przypadkach, ale w przeglądarkach mobilnych pojawiły się problemy.
Podczas wczytywania strony na urządzeniu mobilnym pojawia się pasek stanu z adresem URL, który zajmuje część widocznego obszaru. Po kilku sekundach i pewnej interaktywności pasek stanu może się wysunąć, aby ułatwić użytkownikowi korzystanie z większego widocznego obszaru. Jednak gdy ten słupek się wysunie, wysokość widocznego obszaru się zmieni, a wszystkie jednostki vh będą się przesuwać i zmieniać zgodnie ze zmianą rozmiaru docelowego.
W późniejszych latach jednostka vh musiała zdecydować, którego z dwóch rozmiarów widocznego obszaru powinna użyć, ponieważ powodowała problemy z układem wizualnym na urządzeniach mobilnych. Ustaliliśmy, że vh zawsze będzie reprezentował największy widoczny obszar.
.original-viewport-units {
height: 100vh;
width: 100vw;
--size: 100vmin;
--size: 100vmax;
}
Po wprowadzeniu nowych wariantów widocznego obszaru udostępniamy małe, duże i dynamiczne jednostki widocznego obszaru, a do jednostek fizycznych dodajemy odpowiedniki logiczne. Chodzi o to, aby programiści i projektanci mogli wybrać jednostkę, której chcą użyć w danym scenariuszu. Być może po wycofaniu paska stanu może być niewielkie przesunięcie układu, więc bez obaw można używać dvh (dynamicznej wysokości widocznego obszaru).
Oto pełna lista wszystkich nowych opcji jednostek widocznego obszaru, które są dostępne w nowych wariantach widocznego obszaru:
.new-height-viewport-units {
height: 100vh;
height: 100dvh;
height: 100svh;
height: 100lvh;
block-size: 100vb;
block-size: 100dvb;
block-size: 100svb;
block-size: 100lvb;
}
.new-width-viewport-units {
width: 100vw;
width: 100dvw;
width: 100svw;
width: 100lvw;
inline-size: 100vi;
inline-size: 100dvi;
inline-size: 100svi;
inline-size: 100lvi;
}
.new-min-viewport-units {
--size: 100vmin;
--size: 100dvmin;
--size: 100svmin;
--size: 100lvmin;
}
.new-max-viewport-units {
--size: 100vmax;
--size: 100dvmax;
--size: 100svmax;
--size: 100lvmax;
}
Mam nadzieję, że dadzą one deweloperom i projektantom elastyczność niezbędną do realizowania elastycznych projektów widocznych w obszarze widocznym.
Zasoby
:has()
Przed :has() temat selektora był zawsze na końcu. Na przykład tematem tego selektora jest element listy: ul > li. Pseudonimizowane selektory mogą zmieniać selektor, ale nie zmieniają jego tematu: ul > li:hover ani ul >
li:not(.selected).
Po :has() temat znajdujący się wyżej w drzewie elementów może pozostać tematem podczas wysyłania zapytania o elementy podrzędne: ul:has(> li). Łatwo zrozumieć, jak element :has() uzyskał pospolitą nazwę „selektora nadrzędnego”, ponieważ obiekt selektora jest w tym przypadku elementem nadrzędnym.
Oto podstawowy przykład składni, w którym klasa .parent pozostaje tematem, ale jest wybierana tylko wtedy, gdy element podrzędny ma klasę .child:
.parent:has(.child) {...}
Oto przykład, w którym element <section> jest tematem, ale selektor pasuje tylko wtedy, gdy jedno z elementów podrzędnych ma parametr :focus-visible:
section:has(*:focus-visible) {...}
Gdy nabierają bardziej praktycznych przypadków użycia, selektor :has() staje się coraz bardziej przydatnym narzędziem. Obecnie nie można na przykład wybierać tagów <a> do opakowań obrazów, co utrudnia naukę tagu kotwicy, jak w takim przypadku zmieniać jego style. Jest to możliwe dzięki :has(). Jednak:
a:has(> img) {...}
Wszystkie te przykłady są przykładami, w których :has() wygląda tylko jak selektor nadrzędny.
Weź pod uwagę przypadek użycia obrazów wewnątrz elementów <figure> i dostosowywania stylów na obrazach, jeśli figura zawiera element <figcaption>. W poniższym przykładzie zaznaczone są figury z napisami, a następnie obrazy w odpowiednim kontekście. Używany jest :has(), ale nie zmienia on tematu, ponieważ kierujemy reklamy na obrazy, a nie figurki:
figure:has(figcaption) img {...}
Kombinacje wydają się nieograniczone. Połącz funkcję :has() z zapytaniami ilościowymi i dostosuj układy siatki CSS odpowiednio do liczby elementów podrzędnych. Połącz :has() z interaktywnymi pseudoklasami i twórz aplikacje, które reagują na nowe kreatywne sposoby.
Uzyskiwanie pomocy jest proste dzięki @supports i jej funkcji selector(), która przed użyciem sprawdza, czy przeglądarka rozumie składnię:
@supports (selector(:has(works))) {
/* safe to use :has() */
}
Zasoby
- :specyfikacja has()
- :has() w MDN
- Selektor arkusza CSS
:has()to znacznie więcej niż „selektor nadrzędny”
2022 i kolejne lata
Po udostępnieniu tych wszystkich niesamowitych funkcji w 2022 r. wciąż będzie wiele rzeczy, które ciężko będzie zrobić. W następnej sekcji przyjrzymy się niektórym problemom i rozwiązaniom, które aktywnie trwają. Rozwiązania te mają charakter eksperymentalny, chociaż mogą być określone lub dostępne za flagami w przeglądarkach.
Wnioski z następnych sekcji powinny mieć na celu zapewnienie, że wymienione problemy dotyczą wielu osób z wielu firm, które szukają rozwiązania. Nie chodzi o to, że rozwiązania te zostaną wprowadzone w 2023 r.
Właściwości niestandardowe wpisane luźno
Niestandardowe właściwości CSS są niesamowite. Umożliwiają one przechowywanie różnych rzeczy w nazwanej zmiennej, która następnie można ją rozszerzać, obliczać, udostępniać itp. W rzeczywistości są one na tyle elastyczne, że dobrze byłoby mieć inne, które są mniej elastyczne.
Przeanalizujmy scenariusz, w którym box-shadow wykorzystuje właściwości niestandardowe jako wartości:
box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);
Wszystko to działa, dopóki jedna z właściwości nie zostanie zmieniona na wartość, której CSS nie akceptuje, np. --x: red. Jeśli brakuje jednej z zagnieżdżonych zmiennych lub ustawiono nieprawidłowy typ wartości, cały cień przestaje działać.
Tutaj wkracza do akcji @property: --x może stać się właściwością niestandardową, nie jest już luźna i elastyczna, ale bezpieczna z pewnymi granicami:
@property --x {
syntax: '<length>';
initial-value: 0px;
inherits: false;
}
Teraz, gdy box-shadow używa var(--x) i nowszych wersji --x: red, usługa red zostanie zignorowana, ponieważ nie jest to <length>. Oznacza to, że cień nadal działa, mimo że jedna z jego właściwości niestandardowych ma nieprawidłową wartość.
Zamiast błędu system wraca do initial-value z 0px.
Animacja
Oprócz bezpieczeństwa wpisywania tekstu stwarza też wiele możliwości dla animacji. Elastyczność składni CSS uniemożliwia animowanie niektórych elementów, takich jak gradienty. Przydaje się tu @property, ponieważ podana właściwość CSS może informować przeglądarkę o zamiarze dewelopera wewnątrz nadmiernie złożonej interpolacji. Zasadniczo ogranicza to ryzyko na tyle, że przeglądarka może animować te aspekty stylu, które wcześniej nie potrafiły.
Przyjrzyjmy się przykładowi, w którym zastosowano gradient promieniowy do utworzenia części nakładki, co powoduje efekt skupienia uwagi. JavaScript ustawia x i y myszy po naciśnięciu klawisza Alt/opt, a następnie zmienia rozmiar ogniskowej na mniejszą, np. 25%. W ten sposób pojawia się koło zaznaczenia w położeniu myszy:
.focus-effect {
--focal-size: 100%;
--mouse-x: center;
--mouse-y: center;
mask-image: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
transparent 0%,
transparent var(--focal-size),
black 0%
);
}
Gradienty nie mogą być jednak animowane. Są zbyt elastyczne i zbyt złożone,
aby przeglądarka mogła po prostu określić, w jaki sposób mają być animowane. W przypadku @property 1 właściwość można jednak wpisać i animować osobno, dzięki czemu przeglądarka może łatwo zrozumieć intencję.
W grach wideo, które używają tego efektu ostrości, zawsze animujemy okrąg – od dużego okręgu do małego okręgu. Sposób użycia @property w wersji demonstracyjnej pozwala przeglądarce animować maskę gradientu:
@property --focal-size {
syntax: '<length-percentage>';
initial-value: 100%;
inherits: false;
}
.focus-effect {
--focal-size: 100%;
--mouse-x: center;
--mouse-y: center;
mask-image: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
transparent 0%,
transparent var(--focal-size),
black 0%
);
transition: --focal-size .3s ease;
}
Przeglądarka może teraz animować rozmiar gradientu, bo zmniejszyliśmy obszar powierzchni modyfikacji do jednej właściwości i wprowadziliśmy wartość, dzięki czemu przeglądarka może inteligentnie interpolować długości.
@property może o wiele więcej zrobić, ale te niewielkie możliwości mogą zdziałać cuda.
Zasoby
- @specyfikacja usługi
- @property w MDN
- @property w web.dev
- Prezentacja ostrości w Zoom
- Porady dotyczące CSS: poznanie właściwości @property i jej mocy animowanych
Odwiedzone: min-width lub max-width
Przed zakresami zapytań o mediację zapytanie o media CSS używa funkcji min-width i max-width do argumentowania i realizacji warunków. Może ona wyglądać tak:
@media (min-width: 320px) {
…
}
Po zakresach zapytań o media to samo zapytanie o media może wyglądać tak:
@media (width >= 320px) {
…
}
Zapytanie o media CSS korzystające zarówno z elementów min-width, jak i max-width może wyglądać tak:
@media (min-width: 320px) and (max-width: 1280px) {
…
}
Po zakresach zapytań o media to samo zapytanie o media może wyglądać tak:
@media (320px <= width <= 1280px) {
…
}
W zależności od kontekstu kodowania jeden z nich będzie znacznie bardziej czytelny niż drugi. Dzięki nowym specyfikacjom deweloperzy będą mogli wybrać, które preferują, a nawet używać ich zamiennie.
Zasoby
- Specyfikacja składni zakresu zapytań o media
- Składnia zakresu zapytań o media w MDN
- Wtyczka PostCSS zakresu zapytań o media
Brak zmiennych zapytań o media
Przed @custom-media zapytania o multimedia musiały się powtarzać lub polegały na procesorach wstępnie przetwarzających, aby wygenerować odpowiednie dane wyjściowe na podstawie zmiennych statycznych w czasie kompilacji.
Po @custom-media usługa CSS umożliwia stosowanie aliasów zapytań o media i ich odniesienie, tak jak w przypadku właściwości niestandardowej.
Nazewnictwo jest bardzo ważne: pozwala dopasować ich przeznaczenie do składni, co ułatwia udostępnianie i używanie treści w zespołach. Oto kilka niestandardowych zapytań o media, które pojawiają się między projektami:
@custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);
@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);
@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);
Po zdefiniowaniu tych atrybutów mogę użyć jednej z nich w ten sposób:
@media (--OSdark) {
:root {
…
}
}
Znajdź pełną listę niestandardowych zapytań o media, których używam w bibliotece Open Props w bibliotece właściwości niestandardowych CSS.
Zasoby
Zagnieżdżanie selektora
Przed @nest arkusze stylów często się powtarzały. Stało się to szczególnie mało poręczne, gdy selektory były długie, a każdy z nich uwzględniał niewielkie różnice. Wygoda zagnieżdżania to jedna z najczęstszych przyczyn stosowania procesora wstępnego.
Po @nest powtórzenie zniknęło. Prawie każda funkcja zagnieżdżania z użyciem preprocesora zostanie udostępniona w CSS.
article {
color: darkgray;
}
article > a {
color: var(--link-color);
}
/* with @nest becomes */
article {
color: darkgray;
& > a {
color: var(--link-color);
}
}
W zagnieżdżonym selektorze najważniejszy jest to, aby kontekst stylu nie powtarzał się (article) w zagnieżdżonym selektorze.
Zamiast odsyłać z jednego selektora i jego stylów do innego selektora z stylami (przykład 1), czytelnik może pozostać w kontekście artykułu i zobaczyć umieszczone w nim linki do artykułu. Intencje dotyczące relacji i stylu są łączone, więc element article wydaje się mieć własne style.
Własność można też określić jako centralizację. Zamiast rozglądać się po arkuszu stylów pod kątem odpowiednich stylów, wszystkie są zagnieżdżone w kontekście. Dotyczy to zarówno relacji nadrzędny-podrzędny, ale także podrzędnych wobec rodziców.
Weźmy komponent podrzędny, który chce dostosować się do siebie w innym kontekście nadrzędnym, a nie w przypadku elementu nadrzędnego, który jest właścicielem stylu i zmienia element podrzędny:
/* parent owns this, adjusting children */
section:focus-within > article {
border: 1px solid hotpink;
}
/* with @nest becomes */
/* article owns this, adjusting itself when inside a section:focus-within */
article {
@nest section:focus-within > & {
border: 1px solid hotpink;
}
}
@nest pomaga ogólnie w zdrowszym stylu, centralizacji i własności. Komponenty mogą grupować i znajdować własne style, dzięki czemu nie są rozdzielone między inne bloki stylów. Może się wydawać, że jest to niewielkie w tych przykładach, ale może mieć
bardzo duży wpływ, zarówno pod względem wygody, jak i czytelności.
Zasoby
Style określania zakresu są bardzo trudne
Obsługa przeglądarek
- 118
- 118
- x
- 17,4
Przed @scope istniało wiele strategii, ponieważ style w arkuszu CSS dziedziczą, dziedziczą i domyślnie mają zakres globalny. W wielu przypadkach te funkcje CSS są bardzo wygodne, ale w przypadku złożonych witryn i aplikacji z potencjalnie wieloma różnymi stylami komponentów globalna przestrzeń i natura kaskady mogą sprawiać wrażenie przecieku.
Po @scope style można nie tylko ograniczać do kontekstu, na przykład klasy, ale też określać, gdzie style się kończą, i nie przejść kaskadowo ani do dziedziczenia.
W poniższym przykładzie konwencję nazewnictwa BEM można przywrócić do rzeczywistej intencji. Selektor BEM próbuje określić zakres koloru elementu header do kontenera .card z zastosowaniem konwencji nazewnictwa. Wymaga to umieszczenia w nagłówku tej nazwy klasy, co pozwoli zrealizować cel. W przypadku @scope nie są wymagane żadne konwencje nazewnictwa do osiągnięcia tego samego celu bez zaznaczania elementu nagłówka:
.card__header {
color: var(--text);
}
/* with @scope becomes */
@scope (.card) {
header {
color: var(--text);
}
}
Oto kolejny przykład, mniej związany z komponentami i więcej o globalnym zakresie CSS. Ciemne i jasne motywy muszą współistnieć w arkuszu stylów, gdzie kolejność ma znaczenie przy wyborze zwycięskiego stylu. Zwykle oznacza to, że style ciemnego motywu są umieszczone po jasnym motywie. Oznacza to, że domyślnym stylem jest jasny, a ciemny jako styl opcjonalny. Unikaj rywalizacji z zastosowaniem metody @scope w zakresie kolejności i zakresu:
@scope (.light-theme) {
a { color: purple; }
}
@scope (.dark-theme) {
a { color: plum; }
}
Aby zakończyć opisywanie historii, @scope umożliwia też określenie, gdzie kończy się zakres stylu. Nie można tego zastosować w żadnej konwencji nazewnictwa ani przy użyciu mechanizmu wstępnego przetwarzania nazw. Jest to funkcja wyjątkowa, która jest dostępna wyłącznie w przeglądarce z zastosowaniem CSS. W poniższym przykładzie style img i .content są stosowane wyłącznie wtedy, gdy element podrzędny elementu .media-block jest nadrzędny lub nadrzędny wobec elementu .content:
@scope (.media-block) to (.content) {
img {
border-radius: 50%;
}
.content {
padding: 1em;
}
}
Zasoby
Brak możliwości użycia CSS dla układu betonowego
Przed murowaniem CSS z siatką najlepszym sposobem na uzyskanie układu murarskiego był JavaScript, ponieważ każda metoda CSS zawierająca kolumny lub Flexbox niedokładnie odzwierciedlała kolejność treści.
Po połączeniu arkusza CSS z siatką nie są wymagane żadne biblioteki JavaScript, a kolejność treści będzie prawidłowa.
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
Poprzednia prezentacja jest dostępna w następującym kodzie CSS:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
Dobrze jest wiedzieć, że wciąż brakuje odpowiedniej strategii układu. Można ją wypróbować już dziś w przeglądarce Firefox.
Zasoby
- Specyfikacja układu kamiennego
- Układ murarski w sieci MDN
- Magazyn Smashing: natywny układ murowany CSS z siatką CSS
Usługa porównywania cen nie może pomóc użytkownikom w zmniejszeniu ilości danych
Przed zapytaniem o media prefers-reduced-data kod JavaScript i serwer mogły zmieniać swoje działanie w zależności od systemu operacyjnego użytkownika lub opcji „oszczędzania danych” w przeglądarce, ale usługi porównywania cen nie mogły tego robić.
Po wysłaniu zapytania o media prefers-reduced-data usługa porównywania cen może dołączyć do poprawiania wrażeń użytkownika i odegrać swoją rolę w zapisywaniu danych.
@media (prefers-reduced-data: reduce) {
picture, video {
display: none;
}
}
Poprzedni kod CSS jest używany w tym komponencie przewijania multimediów, a oszczędności mogą być ogromne. W zależności od wielkości widocznego obszaru strony, tym więcej oszczędności można uzyskać przy wczytywaniu strony. Zapisywanie będzie kontynuowane w miarę interakcji użytkowników z suwakami multimediów. Wszystkie obrazy zawierają atrybuty loading="lazy", co w połączeniu z ukrywaniem elementu CSS w całości sprawia, że żądanie sieciowe dotyczące obrazu nie jest wysyłane.
Podczas testów w średnim widocznym obszarze początkowo wczytywano 40 żądań i 700 KB zasobów. W miarę jak użytkownik przewija wybrany multimedia, wczytywanych jest więcej żądań i zasobów. CSS i zmniejszone zapytanie o media danych wczytuje 10 żądań i 172 KB zasobów. To pół megabajta oszczędności, a użytkownik nawet nie przewinął żadnych multimediów, więc nie są wysyłane żadne dodatkowe żądania.
Mniejsza ilość danych ma więcej zalet niż tylko oszczędność danych. Wyświetla się więcej tytułów, a okładki nie rozpraszają uwagi. Wielu użytkowników korzysta z trybu oszczędzania danych, bo płaci za każdy megabajt danych. Dobrze jest wiedzieć, że CSS może w tym pomóc.
Zasoby
- preferuje specyfikację ograniczonych danych
- prefers-red-data-data on MDN
- preferuje ograniczone dane w wyzwaniu GUI
- Magazyn Smashing: ulepszone podstawowe wskaźniki internetowe, studium przypadku: A Smashing Magazine
Funkcje przyciągania przewijania są zbyt ograniczone
Wcześniej napisanie własnego JavaScriptu do zarządzania karuzelą, suwakiem lub galerią mogło szybko stać się skomplikowane, ponieważ wymagało od wszystkich obserwatorów i zarządzania stanem. Poza tym, jeśli nie zachowasz ostrożności, naturalne szybkości przewijania mogą zostać znormalizowane przez skrypt, przez co interakcja użytkownika będzie wyglądać nieco nienaturalnie i potencjalnie niestabilnie.
Nowe interfejsy API
snapChanging()
Zdarzenie to jest uruchamiane natychmiast po zwolnieniu przez przeglądarkę użytkownika zrzutu dysku podrzędnego. Dzięki temu interfejs użytkownika może odzwierciedlać brak lub nieokreślony stan przyciągania podczas przewijania, ponieważ jest on teraz używany i trafia gdzieś w nowym miejscu.
document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
console.log('Snap is changing', event.snappedTargetsList);
});
snapChanged()
To zdarzenie jest uruchamiane natychmiast po przyciągnięciu przeglądarki do nowego elementu podrzędnego i unieruchomieniu przewijania. Dzięki temu każdy interfejs użytkownika, który zależy od przyciągniętego elementu podrzędnego, może zaktualizować i odzwierciedlić połączenie.
document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
console.log('Snap changed', event.snappedTargetsList);
});
scroll-start
Przewijanie nie zawsze rozpoczyna się od początku. Rozważ stosowanie przesuwanych komponentów, w przypadku których przesunięcie w lewo lub w prawo powoduje wywoływanie różnych zdarzeń, lub pasek wyszukiwania, który podczas wczytywania strony jest początkowo ukryty, dopóki nie przewiniesz strony do góry. Ta właściwość CSS umożliwia programistom określenie, że przewijanie ma zaczynać się w określonym miejscu.
:root { --nav-height: 100px }
.snap-scroll-y {
scroll-start-y: var(--nav-height);
}
:snap-target
Ten selektor arkusza CSS dopasuje elementy w kontenerze przewijania, które są aktualnie przyciągane przez przeglądarkę.
.card {
--shadow-distance: 5px;
box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
transition: box-shadow 350ms ease;
}
.card:snapped {
--shadow-distance: 30px;
}
Po przewinięciu ofert przyciągania tworzenie suwaka, karuzeli lub galerii jest znacznie łatwiejsze, ponieważ przeglądarka oferuje wiele udogodnień, które pozwalają wyeliminować obserwacje i przewijanie kodu administracyjnego i zastąpić się wbudowanymi interfejsami API.
Te funkcje CSS i JS są wciąż w początkowej fazie rozwoju, ale wypatrujcie kodu polyfill, który może pomóc w jego wdrażaniu i testowaniu.
Zasoby
Jazda na rowerze między znanymi stanami
Przed toggle() do określania stylu i interakcji można było używać tylko stanów wbudowanych w przeglądarkę. Pole wyboru zawiera na przykład :checked, czyli wewnętrznie zarządzany stan przeglądarki, którego CSS może używać do wizualnej zmiany elementu.
Po toggle() stany niestandardowe można tworzyć w dowolnym elemencie, aby CSS mógł je zmieniać i używać do określania stylu. Umożliwia grupy, jazdę na rowerze, przełączanie się i wykonywanie innych czynności.
W poniższym przykładzie ten sam efekt przekreślenia elementu listy w momencie zakończenia zostaje osiągnięty, ale bez elementów pól wyboru:
<ul class='ingredients'>
<li>1 banana
<li>1 cup blueberries
...
</ul>
Oraz odpowiednie style CSS toggle():
li {
toggle-root: check self;
}
li:toggle(check) {
text-decoration: line-through;
}
Jeśli znasz się na maszynach stanowych, z pewnością zauważysz, jak dużo jest crossover w przypadku toggle(). Ta funkcja pozwoli deweloperom w lepszy sposób wykorzystać stan w CSS, być może przełoży się na bardziej przejrzyste i semantyczne sposoby administrowania interakcjami i stanami.
Zasoby
Dostosowywanie wybranych elementów
Przed <selectmenu> CSS nie mógł dostosowywać elementów <option> za pomocą sformatowanego kodu HTML ani wprowadzać dużych zmian w wyświetlaniu listy opcji.
Deweloperzy uruchamiali wtedy zewnętrzne biblioteki, które odtwarzały funkcje <select>, co okazało się pracochłonne.
Po <selectmenu> deweloperzy będą mogli wzbogacać kod HTML elementów opcji i dostosowywać je do swoich potrzeb przy zachowaniu zgodności z ułatwieniami dostępu i zapewniania semantycznego kodu HTML.
W przykładzie poniżej (zaczerpniętym z objaśnienia funkcji <selectmenu>) zostało utworzone nowe menu wyboru z podstawowymi opcjami:
<selectmenu>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>
CSS może kierować reklamy na części elementu i określać ich styl:
.my-select-menu::part(button) {
color: white;
background-color: red;
padding: 5px;
border-radius: 5px;
}
.my-select-menu::part(listbox) {
padding: 10px;
margin-top: 5px;
border: 1px solid red;
border-radius: 5px;
}
Możesz wypróbować element <selectmenu> w Chromium w wersji Canary z włączoną flagą eksperymentów internetowych. W 2023 roku i później wypuszczaj menu z opcjami, które można dostosować.
Zasoby
Zakotwiczenie elementu
Przed anchor() strategiami pozycji bezwzględnej i względnej były strategiami pozycji, które umożliwiały programistom poruszanie się elementów podrzędnych w obrębie elementu nadrzędnego.
Po anchor() deweloperzy mogą umieszczać elementy względem innych elementów, niezależnie od tego, czy są one elementami podrzędnymi czy nie. Umożliwia też programistom określanie krawędzi, przy której ma się znajdować, oraz inne przydatne funkcje do tworzenia relacji pozycji między elementami.
Jeśli chcesz dowiedzieć się więcej, wyjaśnienie zawiera kilka świetnych przykładów i przykładów kodu.