Stan CSS 2022

Funkcje stylizacji stron internetowych, które są dostępne obecnie i będą dostępne w przyszłości, omówione na konferencji Google IO 2022, a także kilka dodatkowych.

Adam Argyle

Rok 2022 zapowiada się jako jeden z najlepszych w historii CSS, zarówno pod względem funkcji, jak i współpracy przy wprowadzaniu funkcji do przeglądarki. Naszym celem jest wdrożenie 14 funkcji.

Uwaga: obejrzyj wykład Stan CSS z Google I/O 2022:

Omówienie

Ten post jest zapisem wystąpienia podczas konferencji Google IO 2022. Nie jest to szczegółowy przewodnik po poszczególnych funkcjach, ale wprowadzenie i krótki przegląd, który ma wzbudzić Twoje zainteresowanie i zapewnić szerokie spojrzenie na temat. Jeśli ten temat Cię zainteresuje, na końcu tej sekcji znajdziesz linki do dodatkowych informacji.

Spis treści

Aby przejść do interesujących Cię tematów, skorzystaj z poniższej listy:

Nowości w 2022 r.	2022 rok i później
Zgodność z przeglądarkami (2022 r.)	@scope
@layer	@nest
subgrid	@media (prefers-reduced-data)
@container	@custom-media
hwb()	Zakresy zapytań o media
lch, oklch, lab, oklab, display-p3 itd.	@property
color-mix()	scroll-start,
color-contrast()	:snap-target
Składnia koloru względnego	snapChanging() and snapChanged()
Przestrzeń barw gradientu	toggle()
accent-color	anchor()
bezczynność	<selectmenu>
Czcionki kolorowe w wersji 1
Warianty jednostek widocznego obszaru
:has()

Zgodność z przeglądarką

Głównym powodem, dla którego tak wiele funkcji usługi porównywania cen ma być udostępnianych w ramach współpracy, są działania prowadzone w ramach Interop 2022. Przed rozpoczęciem korzystania z narzędzia Interop warto przyjrzeć się wynikom platformy Compat 2021.

Compat 2021

Na podstawie opinii programistów uzyskanych w ankietach wyznaczyliśmy na rok 2021 następujące cele: stabilizacja obecnych funkcji, ulepszenie zestawu testów i zwiększenie liczby przeglądarek, które uzyskują wynik pozytywny w przypadku 5 funkcji:

1. sticky pozycjonowanie
2. aspect-ratio rozmiar
3. Układ flex
4. Układ grid
5. transform pozycjonowanie i animacja

Wyniki testów wzrosły w całości, co wskazuje na większą stabilność i niezawodność. Gratulacje dla zespołów!

Interoperacyjność w 2022 r.

W tym roku przeglądarki spotkały się, aby omówić funkcje i priorytety, nad którymi zamierzają pracować, i zjednoczyć swoje wysiłki. Firma planowała udostępnić deweloperom następujące funkcje internetowe:

1. @layer
2. Przestrzenie kolorów i funkcje
3. Ukrycie
4. <dialog>
5. Zgodność formularzy
6. Przewijanie
7. Podsiatka
8. Typografia
9. Jednostki widocznego obszaru
10. Zgodność z internetem

To ekscytująca i ambitna lista, której realizacji nie mogę się doczekać.

Aktualności na 2022 r.

Jak można się było spodziewać, na stan usługi porównywania cen 2022 znacząco wpłynęły zmiany wprowadzone w 2022 r.

Kaskadowe warstwy

Obsługa przeglądarek

• 99
• 99
• 97
• 15.4

Źródło

Przed @layer kolejność wczytywania arkuszy stylów była bardzo ważna, ponieważ ostatnio wczytane style mogły zastąpić wcześniej wczytane style. Wymagało to starannego zarządzania arkuszami stylów wpisów, w których deweloperzy musieli najpierw wczytywać mniej ważne style, a później te ważniejsze. Istnieją całe metody, takie jak ITCSS, które pomagają deweloperom zarządzać tą ważnością.

Dzięki temu plik wejściowy może zdefiniować warstwy i ich kolejność z wyprzedzeniem. Następnie, gdy style są ładowane, wczytywane lub zdefiniowane, można je umieszczać w warstwie, co pozwala zachować znaczenie zastąpienia stylu, ale bez skrupulatnie zarządzanej administracji wczytywania.

Film pokazuje, jak zdefiniowane warstwy kaskadowe umożliwiają bardziej swobodny proces tworzenia i ładowania treści, przy jednoczesnym zachowaniu kaskady w razie potrzeby.

Narzędzia deweloperskie w Chrome pomagają zwizualizować, które style pochodzą z których warstw:

Zasoby

• Specyfikacja CSS Cascade 5
• Wyjaśnienie warstw kaskadowych
• Warstwy kaskadowe w MDN
• Una Kravets: Warstwy kaskadowe
• Ahmad Shaded: Cześć, CSS Cascade Layers

Subgrid

Obsługa przeglądarek

• 117
• 117
• 71
• 16

Źródło

Przed wersją subgrid siatka wewnątrz innej siatki nie mogła się dopasować do komórek nadrzędnych ani linii siatki. Każdy układ siatki był unikalny. Wielu projektantów umieszcza jedną siatkę na całej stronie i stale wyrównuje w niej elementy, co nie jest możliwe w CSS.

Po subgrid element podrzędny siatki może przejąć kolumny lub wiersze elementu nadrzędnego i dopasować do nich siebie lub elementy podrzędne.

W tej prezentacji element <body> tworzy klasyczną siatkę złożoną z 3 kolumn: środkowa kolumna nazywa się main, a kolumny po lewej i prawej nadają nazwy fullbleed. Następnie każdy element w treści, <nav> i <main>, przyjmuje nazwane wiersze z treści, ustawiając 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;
}

Wreszcie dzieci w wieku <nav> lub <main> mogą się wyrównać lub dopasować rozmiar za pomocą kolumn i linii fullbleed oraz main.

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

Narzędzie DevTools może pomóc Ci zobaczyć linie i subgridy (obecnie tylko w Firefox). Na tym obrazie siatka nadrzędna i siatki podrzędne są nałożone. Przypomina to sposób myślenia projektantów o układzie.

W panelu Elementy w narzędziach deweloperskich możesz zobaczyć, które elementy są siatkami i subgridami, co jest bardzo pomocne przy debugowaniu lub weryfikowaniu układu.

Zrzut ekranu z narzędzi Firefox Devtools

Zasoby

• Specyfikacja podgridu
• Subgrid na MDN
• Bramus: praktyczne samouczki dotyczące CSS Subgrid

Zapytania dotyczące kontenerów

Obsługa przeglądarek

• 105
• 105
• 110
• 16

Źródło

Przed @container elementy strony internetowej mogły dostosowywać się tylko do rozmiaru całego widocznego obszaru. Jest to świetne rozwiązanie w przypadku układów makro, ale w przypadku układów mikro, których zewnętrzny kontener nie obejmuje całego widocznego obszaru, nie można odpowiednio dostosować układu.

Po @container elementy mogą dostosowywać się do rozmiaru lub stylu nadrzędnego kontenera. Jedynym zastrzeżeniem jest to, że kontenery muszą być zadeklarowane jako możliwe cele zapytań. Jest to niewielkie wymaganie, które przynosi duże korzyści.

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

Dzięki tym stylom kolumny Pon, Wto, Śro, Czw i Pią w poniższym filmie mogą być dostępne dla zapytań elementów zdarzenia.

Demo autorstwa Una Kravets

Oto kod CSS do zapytania o rozmiar kontenera calendar-day, a następnie do dostosowywania układu i rozmiarów czcionek:

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

Oto kolejny przykład: jeden element książki dostosowuje się do dostępnej przestrzeni w kolumnie, do której został przeciągnięty:

Demonstracja autorstwa Max Böck

Una prawidłowo ocenił sytuację jako nową grupę responsywną. Podczas korzystania z narzędzia @container należy podejmować wiele ciekawych i istotnych decyzji projektowych.

Zasoby

• Specyfikacja zapytań dotyczących kontenera
• Container Queries (wyszukiwanie w kontenerach)
• Zapytania dotyczące kontenerów w MDN
• Nowa wersja strony internetowej na web.dev
• Demo kalendarza w wykonaniu Una
• Kolekcja zapytań do kontenera Awesome Container Queries
• Jak stworzyliśmy Designcember w web.dev
• Ahmad Shaded: Say Hello To CSS Container Queries

accent-color

Obsługa przeglądarek

• 93
• 93
• 92
• 15,4

Źródło

Przed accent-color, gdy potrzebny był formularz w kolorach pasujących do marki, mogły one skończyć się złożonymi bibliotekami lub rozwiązaniami CSS, którymi z czasem trudno było zarządzać. Chociaż masz do dyspozycji wszystkie opcje, w tym te dotyczące dostępności, wybór między używaniem wbudowanych komponentów a tworzeniem własnych staje się żmudny.

Po accent-color jeden wiersz kodu CSS powoduje, że wbudowane komponenty będą miały kolor marki. Oprócz zabarwienia przeglądarka inteligentnie dobiera kontrastowe kolory dla elementów pomocniczych komponentu i dostosowuje się do systemowych schematów kolorów (jasnych lub ciemnych).

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

Aby dowiedzieć się więcej o accent-color, przeczytaj mój post na stronie web.dev, w którym omawiam wiele aspektów tej przydatnej właściwości CSS.

Zasoby

• specyfikacja koloru akcentu,
• kolor akcentu w MDN
• kolor akcentu w web.dev
• Bramus: zastosowanie koloru tła do elementów interfejsu za pomocą atrybutu CSS accent-color

Poziom koloru 4 i 5

Przez ostatnie dziesięciolecia w internecie dominował profil sRGB, ale w rozszerzającym się świecie cyfrowych wyświetlaczy o wysokiej rozdzielczości i urządzeń mobilnych wyposażonych w ekrany OLED lub QLED profil sRGB nie wystarcza. Oczekuje się też, że strony dynamiczne będą dostosowywały się do preferencji użytkowników, a zarządzanie kolorami stało się coraz większym problemem dla projektantów, systemów projektowych i osób zajmujących się konserwacją kodu.

Jednak nie w 2022 roku – CSS oferuje szereg nowych funkcji i spacji kolorów: – kolory, które sięgają po możliwości kolorów ekranów HD. – przestrzenie kolorów pasujące do intencji, np. jednolita percepcja. – przestrzenie kolorów gradientów, które drastycznie zmieniają wyniki interpolacji. – Funkcje kolorów, które ułatwiają mieszanie i kontrastowanie oraz wybór przestrzeni roboczej.

Zanim pojawiły się te funkcje, systemy projektowania musiały wstępnie obliczyć odpowiednie kolory kontrastowe i zadbać o odpowiednio żywe palety, a wszystko to przy użyciu preprocesorów lub JavaScriptu.

Po zastosowaniu wszystkich tych funkcji kolorów przeglądarka i CSS mogą wykonać całą pracę dynamicznie i w samym czasie. Zamiast wysyłać do użytkowników wiele KB kodu CSS i JavaScriptu, aby umożliwić im tworzenie motywów i kolorów wizualizacji danych, kod CSS może przeprowadzić odpowiednie obliczenia i koordynację. CSS jest też lepiej przygotowany do sprawdzania obsługi przed użyciem lub do prawidłowego obsługiwania alternatywnych rozwiązań.

@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()

Obsługa przeglądarek

• 101
• 101
• 96
• 15

Źródło

HWB to skrót od hue (barwa), whiteness (biel) i blackness (czerń). Jest to przyjazny dla użytkownika sposób na określenie koloru, ponieważ składa się tylko z odcienia i ilości bieli lub czerni, aby rozjaśnić lub przyciemnić. Artyści, którzy łączą kolory z białym lub czarnym, mogą docenić to rozszerzenie składni kolorów.

Użycie tej funkcji kolorów powoduje, że kolory pochodzą z przestrzeni kolorów sRGB, tak samo jak w przypadku HSL i RGB. Jeśli chodzi o nowości na rok 2022, nie da to nowych kolorów, ale może ułatwić niektóre zadania fanom składni i modelu psychicznego.

Zasoby

• Specyfikacja HWB
• HWB na MDN
• Stefan Judis: hwb() – opis kolorów dla ludzi?

Przestrzenie kolorów

Sposób, w jaki kolory są reprezentowane, zależy od przestrzeni barw. Każda przestrzeń kolorów oferuje różne cechy i wady w pracy z kolorami. Niektóre z nich mogą umieścić wszystkie jasne kolory razem, inne mogą je ustawić w kolejności od jasności.

CSS 2022 ma oferować 10 nowych przestrzeni kolorów, z których każda ma unikalne funkcje, aby pomóc projektantom i programistom w wyświetlaniu, wybieraniu i mieszaniu kolorów. Wcześniej sRGB była jedyną opcją do pracy z kolorami, ale teraz CSS odblokowuje nowy potencjał i nową domyślną przestrzeń kolorów LCH.

color-mix()

Obsługa przeglądarek

• 111
• 111
• 113
• 16.2

Źródło

Przed color-mix() deweloperzy i projektanci potrzebowali preprocesorów, takich jak Sass, aby mieszać kolory przed ich wyświetleniem w przeglądarce. Większość funkcji mieszania kolorów nie udostępniała też opcji określenia, w której przestrzeni kolorów należy mieszać, co czasami prowadziło do dezorientacji.

Po color-mix() programiści i projektanci mogą mieszać kolory w przeglądarce i wszystkie inne style bez konieczności uruchamiania procesów kompilacji ani dodawania JavaScriptu. Dodatkowo mogą określić, w której przestrzeni kolorów ma nastąpić mieszanie, lub użyć domyślnej przestrzeni kolorów LCH.

Często używany jest jako podstawa koloru marki, na podstawie którego tworzone są jego warianty, np. jaśniejsze lub ciemniejsze kolory w przypadku stylów wyświetlanych po najechaniu kursorem. Oto jak 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);
}

a jeśli chcesz zestawić te kolory w innej przestrzeni kolorów, np. 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 znajduje się demonstracja motywów przy użyciu color-mix(). Spróbuj zmienić kolor marki i obserwuj, jak zmienia się motyw:

W 2022 roku możesz łączyć ze sobą kolory w różnych przestrzeniach kolorów w arkuszach stylów.

Zasoby

• specyfikacja color-mix()
• color-mix() w MDN
• Prezentacja motywu
• Kolejny pokaz motywów
• Fabio Giolito: tworzenie motywu kolorów za pomocą tych nadchodzących funkcji CSS

color-contrast()

Obsługa przeglądarek

• x
• x
• x
• 

Źródło

Przed color-contrast() autorzy arkuszy stylów musieli znać dostępne kolory z wyprzedzeniem. Paleta często zawiera czarny lub biały tekst na próbce koloru, aby pokazać użytkownikowi systemu kolorów, jaki kolor tekstu będzie potrzebny do prawidłowego kontrastowania z próbką.

Przykład z palety kolorów Material Design z 2014 r.

Po color-contrast() autorzy arkuszy stylów mogą całkowicie przenieść to zadanie do przeglądarki. Możesz nie tylko wdrożyć przeglądarkę do automatycznego wybierania koloru czarnego lub białego, a także utworzyć listę odpowiednich kolorów z systemu projektowania i umożliwić jej wybranie tego, który jako pierwszy przejmie odpowiedni współczynnik kontrastu.

Oto zrzut ekranu demo palety kolorów HWB, w którym kolory tekstu są wybierane automatycznie przez przeglądarkę na podstawie koloru próbki:

Wypróbuj demo

Podstawowa składnia wygląda tak: funkcja otrzymuje kolor szary, a przeglądarka określa, czy czarny czy biały ma największy kontrast:

color: color-contrast(gray);

Funkcję można też dostosować, podając listę kolorów, z których zostanie wybrany najbardziej kontrastowy kolor z wybranego obszaru:

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

Na koniec, jeśli nie chcesz wybierać koloru o najwyższym kontraście z listy, możesz podać docelowy współczynnik kontrastu. Pierwszy kolor, który go spełni, zostanie wybrany:

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 zmiany koloru tekstu, ale szacuję, że będzie to jej główne zastosowanie. Zastanów się, o ile łatwiej będzie mieć dostęp do łatwych i czytelnych interfejsów, gdy dobór odpowiednich kontrastujących kolorów zostanie wbudowany w sam język CSS.

Zasoby

• Specyfikacja funkcji color-contrast()
• color-contrast() w MND
• Prezentacja

Składnia kolorów względnych

Obsługa przeglądarek

• 111
• 111
• 113
• 15

Źródło

Przed wprowadzeniem względnej składni koloru, aby obliczyć kolor i wprowadzić poprawki, kanały kolorów trzeba było umieszczać osobno w właściwościach niestandardowych. To ograniczenie sprawiło, że HSL stała się główną funkcją kolorów do manipulowania kolorami, ponieważ odcień, nasycenie i jasność można było dostosować w prosty sposób za pomocą calc().

Dzięki względnej składni kolorów można dekonstruować, modyfikować i zwracać dowolny kolor w dowolnej przestrzeni w jednym wierszu kodu CSS. Nie ma już ograniczeń związanych z HSL – manipulacje można wykonywać w dowolnej przestrzeni barw, a do ułatwienia tego nie trzeba tworzyć tak wielu niestandardowych właściwości.

W tym przykładzie składni podano kod heksadecymalny koloru podstawowego i na jego podstawie utworzono 2 nowe kolory. Pierwszy kolor --absolute-change tworzy nowy kolor w modelu LCH na podstawie koloru bazowego, a następnie zastępuje jasność koloru bazowego wartością 75%, zachowując nasycenie (c) i odcień (h). Drugi kolor --relative-change tworzy nowy kolor w modelu LCH na podstawie koloru bazowego, 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);
}

Jest to podobne do mieszania kolorów, ale bardziej przypomina modyfikacje niż mieszanie. Możesz wybrać kolor z innego koloru, uzyskując dostęp do trzech wartości kanałów zgodnie z nazwami użytymi przez funkcję koloru, z możliwością dostosowania tych kanałów. Podsumowując, jest to bardzo fajna i potężna składnia do tworzenia kolorów.

W tej demonstracji użyliśmy względnej składni kolorów, by utworzyć jaśniejsze i ciemniejsze wersje koloru podstawowego, oraz color-contrast(), aby zapewnić odpowiedni kontrast etykiet:

Wypróbuj demo

Tej funkcji można też używać do generowania palety kolorów. Oto demonstracja, w której całe palety są generowane na podstawie podanego koloru podstawowego. Ten jeden zestaw kodu CSS obsługuje wszystkie różne palety, a każda paleta zapewnia inną bazę. Jako że używam LCH, spójrzcie, jak bardzo równomierne są 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);
}

Wypróbuj demo

Mam nadzieję, że wiesz już, jak przestrzenie kolorów i różne funkcje kolorów mogą być wykorzystywane do różnych celów, zależnie od ich mocnych i słabych stron.

Zasoby

• Specyfikacja względnej składni kolorów
• Tworzenie palet kolorów za pomocą względnej składni koloru
• Tworzenie wersji kolory za pomocą względnej składni koloru

Przestrzeń kolorów gradientu

Przed przestrzenią kolorów gradientowych domyślną przestrzenią kolorów była sRGB. Efekt sRGB jest zwykle niezawodny, ale ma pewne wady, takie jak szara martwa strefa.

Po zastosowaniu przestrzeni kolorów gradientu poinformuj przeglądarkę, której przestrzeni kolorów ma używać na potrzeby interpolacji kolorów. Dzięki temu programiści i projektanci mogą wybrać gradient, który im odpowiada. Domyślna przestrzeń kolorów również zmienia się na LCH zamiast sRGB.

Dodanie składni następuje za kierunkiem 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 czarnego do białego. Sprawdź zakres wyników w każdej przestrzeni barw. Niektóre osiągają ciemną czerń wcześniej niż inne, inne bledną na biało zbyt późno.

W tym przykładzie kolor czarny zmienia się na niebieski, ponieważ jest to znany problem z przestrzenią dla gradientów. Większość przestrzeni barwnych przechodzi w fiolet podczas interpolacji kolorów lub, jak lubię to nazywać, gdy kolory przemieszczają się w swojej przestrzeni barwnej z punktu A do punktu B. Ponieważ gradient będzie przebiegał prostą linią od punktu A do punktu B, kształt przestrzeni barw znacznie zmienia punkty, przez które przechodzi ścieżka.

Uwaga: okLCH i okLAB to wyspecjalizowane przestrzenie kolorów, które uwzględniają różne odchylenia, takie jak to w przypadku fioletu, dzięki czemu są one szczególnie dokładne w przypadku gradientów.

Aby uzyskać więcej szczegółowych informacji, przykładów i komentarzy, przeczytaj ten wątek na Twitterze.

Zasoby

• Specyfikacja interpolacji gradientu
• Prezentacja porównywania gradientów w pokojach
• Notatnik Observable porównujący gradienty

inert

Obsługa przeglądarek

• 102
• 102
• 112
• 15.5

Źródło

Przed inert dobrą praktyką było kierowanie uwagi użytkownika na obszary strony lub aplikacji, które wymagały natychmiastowej uwagi. Ta strategia kierowania fokusu stała się znana jako „focus trapping”, ponieważ deweloperzy umieszczali fokus w interaktywnym obszarze, nasłuchywali zdarzeń zmiany fokusu i jeśli fokus opuszczał interaktywny obszar, był on przywracany. Użytkownicy klawiatur lub czytników ekranu są kierowani z powrotem do obszaru interaktywnego, aby przed przejściem dalej mieć pewność, że zadanie zostało ukończone.

Po inert nie jest wymagane przechwytywanie, ponieważ możesz zamrozić lub zabezpieczyć całe sekcje strony lub aplikacji. Kliknięcia i próby zmiany fokusa są po prostu niedostępne, gdy te części dokumentu są nieaktywne. Można też traktować to jak strażników zamiast pułapki, gdzie inert nie zależy na tym, abyś został w jakimś miejscu, ale aby inne miejsca były niedostępne.

Dobrym przykładem jest funkcja JavaScript alert():

Witryna jest wyświetlana jako interaktywna, a następnie wywoływana jest funkcja alert(), po czym strona przestaje być aktywna.

W poprzednim filmie widać, że strona była dostępna za pomocą myszy i klawiatury, dopóki nie została wywołana funkcja alert(). Po wyświetleniu okna dialogowego alertu reszta strony była zablokowana lub inert. Zaznaczenie jest umieszczone w dialogu alertu i nie może się przenieść w inne miejsce. Gdy użytkownik wykona polecenie funkcji alertu, strona znów stanie się interaktywna. inertumożliwia programistom łatwe tworzenie takich samych przejrzystych treści.

Oto mały przykład kodu, 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>

Dialog jest świetnym przykładem, ale inert jest też przydatna w przypadku takich elementów jak wysuwane menu boczne. Gdy użytkownik otworzy menu boczne, mysz lub klawiatura nie powinny wpływać na działanie strony znajdującej się za tym menu. Takie działanie może być dla użytkowników nieco kłopotliwe. Zamiast tego, gdy wyświetla się menu boczne, spraw, aby strona była nieaktywna. Użytkownicy będą musieli zamknąć menu boczne lub się po nim poruszać, a nie będą mogli się zgubić gdzieś na stronie z otwartym menu.

Zasoby

• Specyfikacja wewnętrzna
• Wstaw w MDN
• Deweloperzy Chrome: przedstawiamy Inertial

Czcionki COLRv1

Przed czcionkami COLRv1 w internecie były dostępne czcionki OT-SVG, które również były otwartym formatem czcionek z gradientami oraz wbudowanymi kolorami i efektami. Mogłyby one jednak bardzo się powiększyć i chociaż pozwalały na edytowanie tekstu, nie miały dużego zakresu możliwości dostosowywania.

Po czcionkach COLRv1 strony internetowe mają mniejszy rozmiar, są skalowalne i przeskalowane wektorowo, przesuwne, z gradientem i w trybie mieszania. Czcionki te przyjmują parametry umożliwiające dostosowanie czcionki do konkretnego przypadku użycia lub dopasowanie do marki.

Zdjęcie pochodzi ze strony https://developer.chrome.com/blog/colrv1-fonts/

Oto przykład z artykułu na blogu dla programistów Chrome o emoji. Pewnie już wiesz, że po zwiększeniu rozmiaru czcionki emotikona zachowuje się nieostry. Jest to obraz, a nie grafika wektorowa. Często w aplikacjach, gdy używany jest emotikon, zostaje on zastąpiony zasobem o wyższej jakości. Dzięki czcionkom COLRv1 emotikony są wektorowe i piękne:

Czcionki ikon mogą robić niesamowite rzeczy w tym formacie, oferując niestandardowe palety dwutonowe i nie tylko. Wczytywanie czcionki COLRv1 przebiega tak samo jak w przypadku każdego innego pliku czcionki:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

Dostosowanie czcionki COLRv1 odbywa się za pomocą @font-palette-values, specjalnej reguły at-rule w CSS, która umożliwia grupowanie i nazywanie zestawu opcji dostosowywania w pakiecie na potrzeby późniejszego wykorzystania. Zwróć uwagę, że niestandardową nazwę podajesz tak samo jak niestandardową właściwość, czyli zaczynającą się 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;
}

W przypadku --colorized jako aliasu dostosowań ostatnim krokiem jest zastosowanie palety do elementu, który używa kolorowej rodziny czcionek:

@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;
}

czcionka Bungee Spice z niestandardowymi kolorami, źródło: https://developer.chrome.com/blog/colrv1-fonts/

Wraz z coraz większą dostępnością czcionek zmiennych i kolorowych typografia internetowa staje się coraz bardziej wszechstronna i twórcza.

Zasoby

• Specyfikacja Colrv1 na GitHubie
• Deweloperzy Chrome: Colrv1 – czcionki
• Film wideo z omówieniem BlinkOn dla programistów

Jednostki widocznego obszaru

Przed wprowadzeniem nowych wariantów widocznego obszaru w internecie dostępne były jednostki fizyczne, które ułatwiały dopasowywanie widocznych obszarów. Jedna z wartości określała wysokość, szerokość, najmniejszy rozmiar (vmin) i największą stronę (vmax). Sprawdzały się one w wielu przypadkach, ale komplikowały komplikacje w przypadku przeglądarek mobilnych.

Podczas wczytywania strony na urządzeniach mobilnych pojawia się pasek stanu z adresem URL, który zajmuje część widocznego obszaru. Po kilku sekundach i pewnym poziomie interakcji pasek stanu może się przesunąć, aby zapewnić użytkownikowi większy widok. Jednak gdy ten słupek się wysunie, wysokość widocznego obszaru zmieniła się, a wszystkie jednostki vh będą się przesuwać i zmieniać rozmiar wraz ze zmianą rozmiaru docelowego. W późniejszych latach jednostka vh musiała zdecydować, którego z 2 rozmiarów widocznego obszaru ma użyć, ponieważ powodowało to problemy z nieprzyjemnym rozmieszczeniem elementów na urządzeniach mobilnych. Ustaliliśmy, że vh będzie zawsze reprezentować największy widoczny obszar.

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

Po udostępnieniu nowych wariantów widocznego obszaru udostępniono małe, duże i dynamiczne jednostki widocznego obszaru z dodatkowymi logicznymi odpowiednikami fizycznych jednostek. Chodzi o to, aby dać programistom i projektantom możliwość wyboru jednostki, której chcą używać w danym scenariuszu. Może niewielkie przesunięcie układu, gdy pasek stanu zniknie, nie będzie miało większego znaczenia, więc można bez obaw używać dvh (dynamiczna wysokość widoku).

Oto pełna lista wszystkich nowych opcji jednostek widoku, które są dostępne w ramach nowych wariantów widoku:

Wysokość w jednostkach 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;
}

Jednostki szerokości widocznego obszaru

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

Najmniejsze jednostki boczne widocznego obszaru

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

Największe jednostki boczne widocznego obszaru

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

Mamy nadzieję, że da to deweloperom i projektantom większą swobodę w tworzeniu projektów dostosowanych do widoku.

Zasoby

• Specyfikacja względnych jednostek widocznego obszaru
• Bramus: duża, mała i dynamiczna wizja

:has()

Obsługa przeglądarek

• 105
• 105
• 121
• 15.4

Źródło

Przed wersją :has() temat wzorca znajdował się zawsze na końcu. Na przykład podmiot tego selektora to element listy: ul > li. Selektory pseudo mogą zmieniać selektor, ale nie zmieniają 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 wyszukiwania dotyczącego dzieci: ul:has(> li). Łatwo zrozumieć, skąd :has() ma powszechną nazwę „selektor nadrzędny”, ponieważ w tym przypadku obiektem selektora jest teraz element nadrzędny.

Oto przykład podstawowej składni, w której 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 jeden z elementów podrzędnych ma atrybuty :focus-visible:

section:has(*:focus-visible) {...}

Uwaga: :focus-within działa już podobnie do section:has(*:focus-visible) i należy go użyć.

Selektor :has() staje się fantastycznym narzędziem, gdy pojawiają się praktyczne przypadki użycia. Obecnie nie można na przykład wybierać tagów <a>, gdy otaczają one obrazy, co utrudnia tagowi kotwicy zmianę stylów w takim przypadku użycia. Możliwe jest to za pomocą :has(), ale:

a:has(> img) {...}

Wszystkie te przykłady to przypadki, w których element :has() wygląda jak element nadrzędny. Weź pod uwagę przypadek użycia obrazów w elementach <figure> i dostosowywanie stylów na obrazach, jeśli ilustracja ma atrybut <figcaption>. W tym przykładzie wybrane są ilustracje z tytułami, a potem obrazy w tym kontekście. Obiekt :has() jest używany i nie zmienia tematu, ponieważ celem kierowania są obrazy, a nie ilustracje:

figure:has(figcaption) img {...}

Kombinacji jest nieskończenie wiele. Połącz :has() z zapytaniami dotyczącymi ilości i dostosuj układy siatki CSS na podstawie liczby elementów podrzędnych. Połącz :has() z interaktywnymi pseudostanami klasy i twórz aplikacje, które reagują na nowe kreatywne sposoby.

Sprawdzanie obsługi jest łatwe dzięki @supports i selector()funkcji, która sprawdza, czy przeglądarka rozumie składnię przed jej użyciem:

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

Zasoby

• :has() specyfikacja
• :has() w MDN
• Selektor CSS :has() to coś więcej niż „selektor nadrzędny”

Rok 2022 i kolejne

Nadal jest wiele rzeczy, które będą trudne do wykonania nawet po wprowadzeniu wszystkich tych wspaniałych funkcji w 2022 r. W następnej sekcji omawiamy niektóre z pozostałych problemów i rozwiązania, które są obecnie opracowywane. Te rozwiązania mają charakter eksperymentalny, chociaż mogą być określone lub dostępne za flagami w przeglądarkach.

Z następnych sekcji wynika, że wiele osób z wielu firm szuka rozwiązań dotyczących wymienionych problemów, a nie, że te rozwiązania zostaną udostępnione w 2023 r.

Luźno wpisane właściwości niestandardowe

Obsługa przeglądarek

• 85
• 85
• 128
• 16.4

Źródło

Właściwości niestandardowe CSS są niesamowite. Umożliwiają przechowywanie różnych danych w nazwanych zmiennych, które można następnie rozszerzać, obliczać, udostępniać itp. W fakcie są one tak elastyczne, że fajnie byłoby mieć takie, które są mniej elastyczne.

Wyobraź sobie sytuację, w której element box-shadow używa właściwości niestandardowych do swoich wartości:

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

Wszystko działa dobrze, dopóki nie zmienisz żadnej z właściwości na wartość, której CSS nie akceptuje, np. --x: red. Cały cień przestaje działać, jeśli brakuje jednej z zagnieżdżonych zmiennych lub jej typ wartości jest nieprawidłowy.

Właśnie w tym przypadku przydaje się @property: --x może stać się właściwością niestandardową z określonym typem, która nie jest już elastyczna i nieprecyzyjna, ale bezpieczna dzięki określonym granicom:

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

Teraz gdy box-shadow użyje var(--x), a później --x: red, red będzie ignorowany, ponieważ nie jest to <length>. Oznacza to, że cień nadal działa, mimo że jednej z jego właściwości niestandardowych przypisano nieprawidłową wartość. Zamiast zakończyć działanie, initial-value 0px.

Animacja

Oprócz bezpieczeństwa typów otwiera ona też wiele możliwości w zakresie animacji. Elastyczność składni CSS uniemożliwia animowanie niektórych elementów, takich jak gradienty. @property jest tu przydatna, ponieważ wpisana właściwość CSS może poinformować przeglądarkę o zamierzeniu programisty w ramach zbyt skomplikowanej interpolacji. Zasadniczo ogranicza ona możliwość animowania niektórych aspektów stylu, których wcześniej nie mogła.

Spójrzmy na ten przykład demonstracyjny, w którym gradient promieniowy tworzy część nakładki, tworząc efekt skupienia światła. Gdy użytkownik naciśnie klawisz alt/opt, JavaScript ustawia współrzędne X i Y myszy, a następnie zmieni rozmiar ogniskowej na mniejszą wartość, np. 25%, tworząc w miejscu, w którym znajduje się kursor myszy, okrąg skupienia światła:

Wypróbuj demo

.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%
  );
}

Gradientów nie można jednak animować. Są zbyt elastyczne i zbyt złożone, by przeglądarka mogła „po prostu wywnioskować” sposób animacji. W przypadku @property można jednak wpisać i animować jedną właściwość w osobnym oknie, a przeglądarka może łatwo zrozumieć intencję.

Gry wideo, które wykorzystują ten efekt ostrości, zawsze animują okrąg, od dużego koła do otworu. Oto jak użyć w wersji demonstracyjnej @property, aby przeglądarka animowała 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;
}

Wypróbuj demo

Przeglądarka może teraz animować rozmiar gradientu, ponieważ zmniejszyliśmy powierzchnię modyfikacji do jednej właściwości i wpisaliśmy wartość, aby przeglądarka mogła inteligentnie interpolować długości.

@property może zrobić o wiele więcej, ale te małe ulepszenia mogą przynieść wiele korzyści.

Zasoby

• @propertyspecyfikacja
• @property na MDN
• @property na web.dev
• Powiększenie – prezentacja
• CSS Tricks: Exploring @property and its animating powers

Był w tym kraju: min-width lub max-width

Przed zakresami zapytań o multimedia zapytanie o multimedia w CSS używa wartości min-width i max-width do określania warunków nad i pod. Może on 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 multimedialne CSS korzystające z ustawień min-width i max-width może wyglądać tak:

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

Po zastosowaniu zakresów zapytań o multimedia to samo zapytanie o multimedia może wyglądać tak:

@media (320px <= width <= 1280px) {
  …
}

W zależności od Twojego doświadczenia z kodowaniem jeden z nich będzie znacznie czytelniejszy od drugiego. Dzięki dodatkowym specyfikacjom deweloperzy będą mogli wybrać te, które preferują, lub nawet używać ich zamiennie.

Zasoby

• Specyfikacja składni zakresu zapytania o multimedia
• Składnia zapytania dotyczącego zakresu multimediów w MDN
• Składnia zakresu zapytania o multimedia w pluginie PostCSS

Brak zmiennych zapytania o multimedia

Przed @custom-media zapytania o multimedia musiały się powtarzać lub polegać na preprocesorach, aby wygenerować prawidłowy wynik na podstawie statycznych zmiennych w czasie kompilacji.

Po @custom-media CSS umożliwia zastępowanie zapytań o media i odwoływanie się do nich tak samo jak do właściwości niestandardowych.

Bardzo ważne jest nazewnictwo: pozwala dopasować cel do składni, co ułatwia udostępnianie i używanie elementów w zespołach. Oto kilka niestandardowych zapytań dotyczących mediów, które są stosowane w różnych projektach:

@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);

Teraz, gdy są zdefiniowane, mogę użyć jednego z nich w ten sposób:

@media (--OSdark) {
  :root {
    …
  }
}

Znajdź pełną listę niestandardowych zapytań o multimedia, których używam w bibliotece komponentów niestandardowych w usłudze porównywania cen Open Props.

Zasoby

• Specyfikacja niestandardowych zapytań o multimedia
• Niestandardowe zapytania dotyczące multimediów w pliku dodatku PostCSS

Selektory zagnieżdżone są bardzo przydatne

Przed wersją @nest w arkuszu stylów było wiele powtórzeń. Było to szczególnie niewygodne, gdy selektory były długie i każdy z nich kierował na niewielkie różnice. Wygoda zagnieżdżania to jedna z najczęstszych przyczyn stosowania wstępnego procesora.

Po @nest powtórzenie zostaje usunięte. Niemal wszystkie funkcje zagnieżdżania obsługiwane przez preprocesor będą dostępne wbudowane w usługę porównywania cen.

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

Uwaga: już dziś możesz używać tej składni w PostCSS i w pluginie PostCSS Nesting.

Najważniejsze w zagnieżdżaniu jest to, że oprócz tego, że w zagnieżdżonym selektorze article nie powtarza się, kontekst stylu pozostaje w jednym bloku stylów. Zamiast przełączać się z jednego selektora i jego stylów na inny selektor ze stylami (przykład 1), czytelnik może pozostać w kontekście artykułu i widzieć linki do niego. Relacja i intencja stylu są ze sobą połączone, więc article wygląda jak własne.

Własność można też traktować jako centralizację. Zamiast szukać odpowiednich stylów w całej arkuszu stylów, możesz znaleźć je wszystkie w kontekście. Funkcja ta działa w przypadku relacji rodzic–dziecko, ale także w przypadku relacji dziecko–rodzic.

Rozważ komponent podrzędny, który chce się dostosować, gdy znajduje się w innym kontekście nadrzędnym niż ten, który jest właścicielem stylu i zmienia komponent 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 w ogólnej organizacji, centralizacji i przypisaniu własności do stylu. Komponenty mogą grupować i posiadać własne style, zamiast rozmieszczać je w ramach innych bloków stylów. W tych przykładach może się wydawać, że jest to niewielka zmiana, ale może ona mieć bardzo duży wpływ na wygodę i czytelność.

Ostrzeżenie: zagnieżdżanie więcej niż 4–5 poziomów może być bardziej kłopotliwe niż powtarzanie selektorów. Zalecamy, aby nie umieszczać elementów na wielu poziomach, tylko utworzyć nowy blog selektorów i w nim umieszczać elementy.

Zasoby

• @nest specification
• wtyczka@nest PostCSS
• Bramus: przyszłość CSS: zagnieżdżanie selektorów

Określanie zakresu stylów jest bardzo trudne

Obsługa przeglądarek

• 118
• 118
• 
• 17.4

Źródło

Przed @scope istniało wiele strategii, ponieważ style w CSS są kaskadowe, dziedziczone i mają domyślnie zakres globalny. Te funkcje CSS są bardzo wygodne dla wielu rzeczy, ale w przypadku złożonych witryn i aplikacji, z potencjalnie wieloma różnymi stylami komponentów, globalna przestrzeń i charakter kaskady mogą sprawić, że style będą wypływać.

Po @scope style nie tylko mogą być ograniczone tylko do określonego kontekstu, np. klasy, ale też określać, gdzie się kończą style i nie są one kaskadowe ani dziedziczone.

W tym przykładzie zakres nazwy BEM może być odwrócony, aby odzwierciedlał rzeczywiste intencje. Selektor BEM próbuje określić zakres koloru elementu header w kontenerze .card przy użyciu konwencji nazewnictwa. Wymaga to, aby nagłówek zawierał tę nazwę klasy, co kończy realizację celu. W przypadku @scope nie trzeba stosować żadnych konwencji nazewnictwa, aby osiągnąć ten sam cel bez znaczników w elemencie nagłówka:

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

Kolejny przykład: mniej odnosi się do komponentu i więcej informacji o globalnym zakresie CSS. Motywy ciemny i jasny muszą współistnieć w arkuszu stylów, a kolejność ma znaczenie przy określaniu zwycięskiego stylu. Zwykle oznacza to, że style motywu ciemnego znajdują się po stylu motywu jasnego. Dzięki temu jasny motyw jest domyślny, a ciemny jest stylem opcjonalnym. Unikaj problemów z kolejnością i zakresem za pomocą @scope:

​​@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

Aby dopełnić tę historię, @scope pozwala też określić, gdzie kończy się zakres stylu. Nie można tego zrobić za pomocą żadnej konwencji nazewnictwa ani preprocesora. Jest to coś specjalnego, co może zrobić tylko wbudowany w przeglądarkę element CSS. W tym przykładzie elementy img i .content są stosowane tylko wtedy, gdy element potomny elementu .media-block jest elementem siostrza lub nadrzędnym elementu .content:

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

Zasoby

• @specyfikacja zakresu
• @scope explainer

Brak sposobu na użycie usługi porównywania cen w przypadku układu typu masonry

Przed wprowadzeniem siatki CSS z siatką najlepszym sposobem na uzyskanie układu elementów betonowych był JavaScript, ponieważ każda metoda CSS wykorzystująca kolumny lub flexbox niedokładnie reprezentowała kolejność treści.

Po zastosowaniu układu typu masonry z siatką nie będą już potrzebne żadne biblioteki JavaScript, a kolejność treści będzie prawidłowa.

Zdjęcie i prezentacja z Smashing Magazine
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

Powyższe demo jest realizowane za pomocą tego kodu CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

Cieszymy się, że jest to rozważane jako brak strategii dotyczącej układu strony, ale możesz wypróbować ją już dziś w Firefoksie.

Zasoby

• Specyfikacja układu typu masonry
• Układ typu „kamień” w MDN
• Smashing Magazine: natywny układ murowany CSS z siatką CSS

CSS nie pomaga użytkownikom w zmniejszaniu ilości danych

Obsługa przeglądarek

• 
• 
• x
• x

Źródło

Przed wprowadzeniem zapytania o multimedia prefers-reduced-data 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 nie mogło tego zrobić CSS.

Po wysłaniu zapytania o multimedia prefers-reduced-data usługa porównywania cen może dołączyć do funkcji zwiększających wygodę użytkowników 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 tego, jak duży jest odwiedzany widoczny obszar, tym większe oszczędności przy wczytywaniu strony. Zapisywanie trwa, gdy użytkownicy wchodzą w interakcję ze scrollerami multimediów. Wszystkie obrazy mają atrybuty loading="lazy", co w połączeniu z kodem CSS ukrywającym element całkowicie sprawia, że nie jest wysyłane żądanie sieciowe grafiki.

W przypadku widocznego obszaru o średnim rozmiarze początkowo wczytano 40 żądań i 700 KB zasobów. Gdy użytkownik przewija wybrane multimedia, wczytywanych jest więcej żądań i zasobów. W przypadku zapytania o multimedia z zapytaniem o ograniczone dane CSS wczytano 10 żądań i 172 KB zasobów. To pół megabajta oszczędności, a użytkownik nawet nie przewinął żadnego z multimediów. W tym momencie nie wysłano żadnych dodatkowych żądań.

Ta mniejsza ilość danych ma inne zalety niż tylko oszczędność danych. Widać więcej tytułów i nie ma żadnych rozpraszających grafik okładek, które mogłyby przyciągnąć uwagę. Wielu użytkowników korzysta z trybu oszczędzania danych, ponieważ płacą za każdy megabajt danych. Cieszymy się, że możemy pomóc w tej sprawie.

Zasoby

• prefers-reduced-data specyfikacja
• prefers-reduced-data w MDN
• prefers-reduced-data w interfejsie graficznym – wyzwanie
• Smashing Magazine: poprawa podstawowych wskaźników internetowych – case study Smashing Magazine

Funkcje przyciągania do krawędzi są zbyt ograniczone

Zanim pojawią się propozycje przyciągania przewijania, napisanie własnego kodu JavaScript do zarządzania karuzelą, suwakiem lub galerią może szybko się skomplikować wraz ze wszystkimi obserwatorami i zarządzaniem stanem. Jeśli nie zachowasz ostrożności, naturalne prędkości przewijania mogą zostać znormalizowane przez skrypt, przez co interakcja z użytkownikiem może wydawać się nieco nienaturalna i potencjalnie niewygodna.

Nowe interfejsy API

snapChanging()

To zdarzenie zostanie uruchomione, gdy tylko przeglądarka udostępni obiekt podrzędny. Dzięki temu interfejs użytkownika będzie odzwierciedlał brak elementu potomnego i nieokreślony stan suwaka, ponieważ jest on obecnie używany i będzie przesuwany w inne miejsce.

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

snapChanged()

Gdy tylko przeglądarka przełączy się na nowy element podrzędny i przestanie się przewijać, to zdarzenie zostanie uruchomione. Dzięki temu wszystkie elementy interfejsu, które zależą od podrzędnego elementu podrzędnego, są aktualizowane i odzwierciedlają połączenie.

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

scroll-start

Przewijanie nie zawsze zaczyna się od początku. Weź pod uwagę komponenty przesuwane, w których przesuwanie w lewo lub w prawo wywołuje różne zdarzenia, oraz pasek wyszukiwania, który podczas wczytywania strony jest początkowo ukryty, dopóki nie przewiniesz do góry. Ta właściwość CSS pozwala deweloperom określić, że scroller powinien zaczynać się w konkretnym miejscu.

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snap-target

Ten selektor arkusza CSS dopasuje elementy w kontenerze zrzutu przewijania, które są obecnie 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;
}

Dzięki tym propozycjom skrótów do przewijania tworzenie suwaka, karuzeli lub galerii jest znacznie łatwiejsze, ponieważ przeglądarka oferuje teraz udogodnienia ułatwiające to zadanie, eliminując obserwatorów i kod sterujący przewijaniem na rzecz wbudowanych interfejsów API.

Funkcje CSS i JS są wciąż na wczesnym etapie rozwoju, ale wypatruj komponentów polyfill, które mogą pomóc w ich wdrożeniu i testowaniu.

Zasoby

• Przewijanie wersji roboczej specyfikacji Snap 2
• Filmy instruktażowe dotyczące Scroll Snap 2
• Demos Snap

Przełączanie się między znanymi stanami

Przed toggle() tylko stany wbudowane w przeglądarce mogły być już wykorzystywane do określania stylu i interakcji. Na przykład pole wyboru ma wartość :checked, która jest stanem przeglądarki zarządzanym wewnętrznie dla danych wejściowych, a którego kod CSS może używać do zmiany wyglądu elementu.

Po aktualizacji toggle() można tworzyć stany niestandardowe dla dowolnego elementu, aby można było zmieniać go za pomocą CSS i stosować do stylizacji. Umożliwia tworzenie grup, przełączanie się między kanałami i wiele innych funkcji.

W poniższym przykładzie taki sam efekt przekreślenia elementu listy w przypadku zakończenia, ale bez elementów pól wyboru:

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

I odpowiednie style CSS toggle():

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

Jeśli znasz maszyny stanów, zauważysz, że toggle() ma z nimi wiele wspólnego. Ta funkcja pozwoli deweloperom tworzyć więcej stanów w CSS, co powinno zaowocować w jaśniejsze i bardziej semantyczne sposoby sterowania interakcją i stanem.

Zasoby

• Specyfikacja wersji roboczej funkcji toggle()
• Bramus: Przyszłość CSS: CSS Toggles

Dostosowywanie wybranych elementów

Przed <selectmenu> technologia CSS nie umożliwiała dostosowywania elementów <option> za pomocą sformatowanego kodu HTML ani wprowadzania istotnych zmian w sposobie wyświetlania listy opcji. Z tego powodu deweloperzy musieli wczytywać zewnętrzne biblioteki, które odtwarzały większość funkcji <select>. Zajęło to dużo czasu.

Po <selectmenu> deweloperzy mogą udostępniać bogaty kod HTML dla elementów opcji i stylizować je w dowolnym stopniu, zachowując jednocześnie zgodność z wymaganiami dotyczącymi ułatwień dostępu i zapewniając semantyczny kod HTML.

W tym przykładzie, pochodzącym ze <selectmenu> strony z informacjami, zostało utworzone nowe menu wyboru z kilkoma podstawowymi opcjami:

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

CSS może określać kierowanie 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 pojawią się opcje dostosowywania wybranych elementów menu.

Zasoby

• Specyfikacja Selectmenu
• Demo Selectmenu

Przypinanie jednego elementu do drugiego

Przed wersją anchor() strategie pozycjonowania bezwzględnego i względnego były dostępne dla programistów, aby elementy podrzędne mogły się przemieszczać w elemencie nadrzędnym.

Po anchor() deweloperzy mogą umieszczać elementy względem innych, niezależnie od tego, czy są to elementy podrzędne. Pozwala też programistom określić, na której krawędzi ma się znaleźć, i umożliwia określenie innych funkcji przy tworzeniu relacji pozycji między elementami.

Jeśli chcesz dowiedzieć się więcej, zapoznaj się z tym objaśnieniem, w którym znajdziesz kilka świetnych przykładów i fragmentów kodu.

Zasoby

• anchor() – wyjaśnienie