Stan CSS 2022

Funkcje stylizacji stron internetowych dziś i w przyszłości, zaprezentowane na konferencji Google I/O 2022, oraz kilka dodatków.

Adam Argyle

Rok 2022 będzie jednym z najlepszych w historii CSS, zarówno pod względem funkcji, jak i wspólnych wydań funkcji przeglądarki. Wspólnym celem jest wdrożenie 14 funkcji.

Przegląd

Ten post to artykułowa wersja prezentacji wygłoszonej na konferencji Google IO 2022. Nie jest to szczegółowy przewodnik po poszczególnych funkcjach, ale raczej wprowadzenie i krótki przegląd, który ma wzbudzić Twoje zainteresowanie. Zamiast szczegółowych informacji znajdziesz tu ogólny zarys. Jeśli Cię to zainteresowało, na końcu sekcji znajdziesz linki do materiałów z dodatkowymi informacjami.

Spis treści

Aby przejść do interesującego Cię tematu, skorzystaj z poniższej listy:

Zgodność z przeglądarką

Głównym powodem, dla którego tak wiele funkcji CSS jest wdrażanych wspólnie, są wysiłki podjęte w ramach inicjatywy Interop 2022. Zanim przeanalizujesz działania w ramach Interop, warto przyjrzeć się działaniom w ramach Compat 2021.

Compat 2021

W 2021 roku, na podstawie opinii deweloperów uzyskanych w ankietach, wyznaczyliśmy sobie następujące cele: ustabilizować obecne funkcje, ulepszyć zestaw testów i zwiększyć odsetek pozytywnych wyników testów przeglądarek w przypadku 5 funkcji:

1. sticky określanie położenia
2. aspect-ratio rozmiar
3. Układ flex
4. Układ grid
5. transform pozycjonowanie i animacja,

Wyniki testów wzrosły w każdym przypadku, co świadczy o większej stabilności i niezawodności. Wielkie gratulacje dla tych zespołów!

Interop 2022

W tym roku przedstawiciele przeglądarek spotkali się, aby omówić funkcje i priorytety, nad którymi zamierzają pracować, i połączyć swoje wysiłki. Planowali udostępnić deweloperom te funkcje internetowe:

1. @layer
2. Przestrzenie kolorów i funkcje
3. Zawieranie
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ć.

Nowości na 2022 r.

Nie jest zaskoczeniem, że na stan CSS w 2022 roku ogromny wpływ miały prace nad Interop 2022.

Warstwy kaskadowe

Przed @layer kolejność wczytywania arkuszy stylów miała duże znaczenie, ponieważ style wczytane jako ostatnie mogły zastąpić style wczytane wcześniej. W efekcie powstały starannie zarządzane arkusze stylów wejściowych, w których deweloperzy musieli najpierw wczytywać mniej ważne style, a dopiero potem te ważniejsze. Istnieją całe metodologie, które pomagają deweloperom zarządzać tym znaczeniem, np. ITCSS.

W przypadku @layer plik wejściowy może z wyprzedzeniem zdefiniować warstwy i ich kolejność. Następnie, gdy style są wczytywane, wczytane lub zdefiniowane, można je umieścić w warstwie, co pozwala zachować ważność zastąpienia stylu, ale bez starannie zarządzanej orkiestracji wczytywania.

Film pokazuje, jak zdefiniowane warstwy kaskadowe umożliwiają bardziej swobodne i dowolne tworzenie i wczytywanie, przy jednoczesnym zachowaniu kaskady w razie potrzeby.

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

Zasoby

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

Podsiatka

Przed subgrid siatka w innej siatce nie mogła się wyrównać do komórek ani linii siatki nadrzędnej. Każdy układ siatki był niepowtarzalny. Wielu projektantów umieszcza jedną siatkę na całym projekcie i stale wyrównuje w niej elementy, czego nie można zrobić w CSS.

Po subgrid element podrzędny siatki może przyjąć kolumny lub wiersze elementów nadrzędnych jako własne i wyrównać do nich siebie lub elementy podrzędne.

W poniższym przykładzie element body tworzy klasyczną siatkę z 3 kolumnami: środkowa kolumna ma nazwę main, a lewa i prawa nazywają swoje linie 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;
}

Dzieci w wieku <nav> lub <main> lat mogą wyrównywać lub zmieniać rozmiar elementów za pomocą kolumn i linii fullbleed i main.

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

.fullbleed {
  grid-column: fullbleed;
}

Narzędzia deweloperskie pomogą Ci wyświetlić linie i podsieci (obecnie tylko w Firefoxie). Na poniższym obrazie nałożono na siebie siatkę nadrzędną i siatki podrzędne. Teraz przypomina to, jak projektanci wyobrażali sobie układ.

W panelu elementów w narzędziach deweloperskich możesz sprawdzić, które elementy są siatkami i podsiatkami. Jest to bardzo przydatne podczas debugowania lub sprawdzania układu.

Zasoby

• Specyfikacja podsieci
• Subgrid w MDN
• Bramus: Practical CSS Subgrid Video Tutorials

Zapytania dotyczące kontenerów

Przed @container elementy strony internetowej mogły reagować tylko na rozmiar całego widocznego obszaru. Jest to przydatne w przypadku układów makro, ale w przypadku układów mikro, w których kontener zewnętrzny nie zajmuje całego widocznego obszaru, układ nie może się odpowiednio dostosować.

Po @container elementy mogą reagować na rozmiar lub styl kontenera nadrzędnego. Jedynym warunkiem jest to, że kontenery muszą deklarować się jako potencjalne cele zapytań, co jest niewielkim wymaganiem w porównaniu z dużymi korzyściami.

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

Te style umożliwiają wysyłanie zapytań dotyczących kolumn Pon, Wt, Śr, Czw i Pt w filmie poniżej za pomocą elementów zdarzenia.

Oto kod CSS do wysyłania zapytań do kontenera calendar-day o jego rozmiar, a następnie 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: komponent książki dostosowuje się do miejsca dostępnego w kolumnie, do której został przeciągnięty:

Una ma rację, oceniając sytuację jako nowy elastyczny. Podczas korzystania z @container można podejmować wiele ciekawych i istotnych decyzji projektowych.

Zasoby

• Specyfikacja zapytań o kontenery
• Wyjaśnienie zapytań dotyczących kontenerów
• Zapytania o kontenery w MDN
• Nowe materiały o projektowaniu elastycznym w web.dev
• Prezentacja Kalendarza przez Unę
• Świetna kolekcja zapytań dotyczących kontenerów
• Jak stworzyliśmy Designcember w witrynie web.dev
• Ahmad Shadeed: Say Hello To CSS Container Queries

accent-color

Przed wprowadzeniem accent-color, gdy potrzebny był formularz z kolorami pasującymi do marki, można było skończyć z złożonymi bibliotekami lub rozwiązaniami CSS, którymi z czasem trudno było zarządzać. Chociaż udostępnili Ci wszystkie opcje i mamy nadzieję, że uwzględnili ułatwienia dostępu, ciągłe wybieranie wbudowanych komponentów lub własnych staje się uciążliwe.

Po accent-color jeden wiersz kodu CSS wprowadza kolor marki do wbudowanych komponentów. Oprócz odcienia przeglądarka inteligentnie wybiera odpowiednie kolory kontrastowe dla dodatkowych części komponentu i dostosowuje się do schematów kolorów systemu (jasnego lub ciemnego).

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

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

Więcej informacji o accent-color znajdziesz w moim poście na web.dev, w którym omawiam wiele innych aspektów tej przydatnej właściwości CSS.

Zasoby

• specyfikacja accent-color
• accent-color w MDN
• accent-color w witrynie web.dev
• Bramus Tint User-Interface Controls with CSS accent-color

Poziom koloru 4 i 5

W ostatnich dziesięcioleciach w internecie dominował standard sRGB, ale w rozwijającym się świecie cyfrowym, w którym coraz więcej jest wyświetlaczy o wysokiej rozdzielczości i urządzeń mobilnych wyposażonych w ekrany OLED lub QLED, sRGB nie wystarcza. Oczekuje się też dynamicznych stron, które dostosowują się do preferencji użytkowników, a zarządzanie kolorami staje się coraz ważniejsze dla projektantów, systemów projektowania i osób odpowiedzialnych za utrzymanie kodu.

Nie w 2022 r. CSS ma kilka nowych funkcji i przestrzeni kolorów: - Kolory, które wykorzystują możliwości wyświetlaczy w zakresie kolorów HD. – przestrzenie kolorów, które odpowiadają intencji, np. jednolitość percepcyjna; – przestrzenie kolorów gradientów, które drastycznie zmieniają wyniki interpolacji; – funkcje kolorów, które pomogą Ci mieszać i kontrastować kolory oraz wybrać przestrzeń, w której chcesz pracować;

Przed wprowadzeniem tych wszystkich funkcji związanych z kolorami systemy projektowania musiały wstępnie obliczać odpowiednie kolory kontrastowe i zapewniać odpowiednio żywe palety, a całą ciężką pracę wykonywały preprocesory lub JavaScript.

Po zastosowaniu tych wszystkich funkcji związanych z kolorami przeglądarka i arkusz stylów CSS mogą wykonać całą pracę dynamicznie i w odpowiednim momencie. Zamiast wysyłać użytkownikom wiele kilobajtów kodu CSS i JavaScript, aby umożliwić im stosowanie motywów i kolorów wizualizacji danych, kod CSS może wykonywać koordynację i obliczenia. CSS lepiej sprawdza obsługę przed użyciem lub elegancko obsługuje powroty.

@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 skrót od hue, whiteness i blackness (odcień, biel i czerń). Jest to przyjazny dla użytkownika sposób określania koloru, ponieważ składa się tylko z odcienia oraz ilości bieli lub czerni, które rozjaśniają lub przyciemniają kolor. Artyści, którzy mieszają kolory z białym lub czarnym, mogą docenić to rozszerzenie składni kolorów.

Użycie tej funkcji koloru powoduje uzyskanie kolorów z przestrzeni kolorów sRGB, tak samo jak w przypadku HSL i RGB. W 2022 r. nie wprowadzimy nowych kolorów, ale może to ułatwić niektóre zadania fanom tej składni i modelu myślowego.

Zasoby

• Specyfikacja HWB
• HWB w MDN
• Stefan Judis: hwb() – a color notation for humans?

Przestrzenie kolorów

Sposób reprezentowania kolorów jest określany przez przestrzeń kolorów. Każda przestrzeń kolorów oferuje różne funkcje i kompromisy w zakresie pracy z kolorami. Niektórzy mogą umieścić wszystkie jasne kolory razem, a inni mogą najpierw ustawić je w kolejności jasności.

W 2022 r. CSS ma oferować 10 nowych przestrzeni kolorów, z których każda ma unikalne funkcje ułatwiające projektantom i programistom wyświetlanie, wybieranie i mieszanie kolorów. Wcześniej sRGB było jedyną opcją pracy z kolorami, ale teraz CSS otwiera nowe możliwości i nową domyślną przestrzeń kolorów – LCH.

color-mix()

Wcześniej color-mix() deweloperzy i projektanci musieli używać preprocesorów, takich jak Sass, aby mieszać kolory, zanim zobaczy je przeglądarka. Większość funkcji mieszania kolorów nie pozwalała też określić, w której przestrzeni kolorów ma się odbywać mieszanie, co czasami dawało niejasne wyniki.

Po color-mix() programiści i projektanci mogą mieszać kolory w przeglądarce, wraz z innymi stylami, bez uruchamiania procesów kompilacji ani dołączania kodu JavaScript. Mogą też określić, w której przestrzeni kolorów ma się odbywać mieszanie, lub użyć domyślnej przestrzeni kolorów mieszania LCH.

Kolor marki jest często używany jako podstawa, na której tworzone są warianty, np. jaśniejsze lub ciemniejsze kolory dla stylów najechania. Oto jak to wygląda w przypadkucolor-mix():

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

Jeśli chcesz zmieszać 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 znajdziesz demonstrację motywów z użyciem właściwości color-mix(). Spróbuj zmienić kolor marki i zobacz, jak motyw się aktualizuje:

W 2022 roku możesz swobodnie mieszać kolory w różnych przestrzeniach kolorów w arkuszach stylów.

Zasoby

• Specyfikacja color-mix()
• color-mix() w MDN
• Wersja demonstracyjna motywów
• Kolejna wersja demonstracyjna motywów
• Fabio Giolito: Tworzenie motywu kolorystycznego za pomocą tych nadchodzących funkcji CSS

color-contrast()

Wcześniej color-contrast() autorzy arkuszy stylów musieli z wyprzedzeniem znać dostępne kolory. Paleta często zawiera czarny lub biały tekst na próbce koloru, aby wskazać użytkownikowi systemu kolorów, jakiego koloru tekstu należy użyć, aby uzyskać odpowiedni kontrast z tą próbką.

Po color-contrast() autorzy arkuszy stylów mogą całkowicie przekazać to zadanie przeglądarce. Możesz nie tylko użyć przeglądarki, aby automatycznie wybrać czarny lub biały kolor, ale też podać jej listę kolorów odpowiednich dla systemu projektowania i sprawdzić, który z nich jako pierwszy spełnia wymagane kryterium kontrastu.

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

Podstawy składni wyglądają tak, że do funkcji przekazywany jest kolor szary, a przeglądarka określa, czy większy kontrast ma kolor czarny czy biały:

color: color-contrast(gray);

Funkcję można też dostosować za pomocą listy kolorów, z której wybierze ona kolor o najwyższym kontraście:

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

Jeśli nie chcesz wybierać koloru o najwyższym kontraście z listy, możesz podać docelowy współczynnik kontrastu. Wybrany zostanie pierwszy kolor, który go osiągnie:

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 */
);

Ta funkcja może być używana nie tylko w przypadku koloru tekstu, ale szacuję, że będzie to jej główne zastosowanie. Pomyśl, jak łatwiej będzie tworzyć dostępne i czytelne interfejsy, gdy wybór odpowiednich kontrastujących kolorów zostanie wbudowany w sam język CSS.

Zasoby

• Specyfikacja color-contrast()
• color-contrast() w MDN
• Prezentacja

Składnia koloru względnego

Przed wprowadzeniem względnej składni kolorów, aby obliczać kolory i dokonywać korekt, kanały kolorów musiały być umieszczane pojedynczo we właściwościach niestandardowych. To ograniczenie sprawiło też, że HSL stał się podstawową funkcją kolorów do manipulowania kolorami, ponieważ odcień, nasycenie lub jasność można było łatwo dostosować za pomocą calc().

Po składni koloru względnego każdy kolor w dowolnej przestrzeni może zostać rozłożony, zmodyfikowany i zwrócony jako kolor w jednym wierszu CSS. Brak ograniczeń w przypadku HSL – manipulacje można przeprowadzać w dowolnej przestrzeni kolorów, a do tego celu trzeba utworzyć znacznie mniej właściwości niestandardowych.

W poniższym przykładzie składni podano podstawowy kod szesnastkowy, a na jego podstawie utworzono 2 nowe kolory. Pierwszy kolor --absolute-change tworzy nowy kolor w przestrzeni LCH na podstawie koloru podstawowego, a następnie zastępuje jasność koloru podstawowego wartością 75%, zachowując chromatyczność (c) i odcień (h). Drugi kolor --relative-change tworzy nowy kolor w przestrzeni LCH na podstawie koloru podstawowego, ale tym razem zmniejsza chromatyczność (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 rzutować kolor z innego koloru, uzyskując dostęp do 3 wartości kanałów o nazwach określonych przez używaną funkcję koloru, z możliwością dostosowania tych kanałów. Podsumowując, jest to bardzo fajna i potężna składnia koloru.

W poniższym przykładzie użyłem względnej składni kolorów, aby utworzyć jaśniejsze i ciemniejsze warianty koloru podstawowego, a następnie użyłem funkcji color-contrast(), aby zapewnić odpowiedni kontrast etykiet:

Tej funkcji można też używać do generowania palet kolorów. Oto wersja demonstracyjna, w której całe palety są generowane na podstawie podanego koloru podstawowego. Ten jeden zestaw CSS obsługuje wszystkie różne palety, a każda paleta zapewnia po prostu inną podstawę. Dodatkowo, ponieważ użyłem przestrzeni LCH, zobacz, jak równomiernie postrzegane są palety – nie widać żadnych miejsc o nadmiernej lub zbyt małej intensywności, dzięki tej przestrzeni koloró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);
}

Mamy nadzieję, że teraz widzisz, jak przestrzenie kolorów i różne funkcje kolorów mogą być wykorzystywane do różnych celów w zależności od ich zalet i wad.

Zasoby

• Specyfikacja składni koloru względnego
• Tworzenie palet kolorów za pomocą składni kolorów względnych
• Tworzenie wariantów kolorystycznych za pomocą składni koloru względnego

Przestrzenie kolorów gradientu

Przed wprowadzeniem przestrzeni kolorów gradientu domyślnie używano przestrzeni kolorów sRGB. Jest ona na ogół niezawodna, ale ma pewne wady, np. szarą strefę martwą.

Po przestrzeniach kolorów gradientu podaj przeglądarce przestrzeń kolorów, której ma używać do interpolacji kolorów. Dzięki temu programiści i projektanci mogą wybrać preferowany gradient. Domyślna przestrzeń kolorów zmieni się też na LCH zamiast sRGB.

Dodatek do składni występuje po kierunku gradientu, korzysta z nowej składni in i jest opcjonalny:

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

Oto podstawowy i niezbędny gradient od czerni do bieli. Sprawdź zakres wyników w każdej przestrzeni kolorów. Niektóre osiągają ciemną czerń wcześniej niż inne, a niektóre zbyt późno przechodzą w biel.

W tym przykładzie kolor czarny jest przekształcany w niebieski, ponieważ jest to znany problem w przypadku gradientów. Większość przestrzeni kolorów wkracza w zakres fioletu podczas interpolacji kolorów lub, jak lubię to określać, gdy kolory przemieszczają się w przestrzeni kolorów z punktu A do punktu B. Gradient będzie przebiegać po linii prostej od punktu A do punktu B, więc kształt przestrzeni kolorów drastycznie zmienia punkty, przez które przechodzi ścieżka.

Więcej informacji, przykładów i komentarzy znajdziesz w tym wątku na Twitterze.

Zasoby

• Specyfikacja interpolacji gradientu
• Demo porównujące gradienty w przestrzeniach
• Notatnik Observable porównujący gradienty

inert

Przed inert zalecano kierowanie uwagi użytkownika na obszary strony lub aplikacji, które wymagały natychmiastowej uwagi. Ta strategia kierowania fokusu stała się znana jako „pułapka fokusu”, ponieważ deweloperzy umieszczali fokus w interaktywnym obszarze, nasłuchiwali zdarzeń zmiany fokusu i jeśli fokus opuścił interaktywny obszar, był do niego z powrotem przenoszony. Użytkownicy korzystający z klawiatury lub czytnika ekranu są kierowani z powrotem do interaktywnej przestrzeni, aby upewnić się, że zadanie zostało wykonane, zanim przejdą dalej.

Po inert nie jest wymagane żadne przechwytywanie, ponieważ możesz zamrozić lub zabezpieczyć całe sekcje strony lub aplikacji. Kliknięcia i próby zmiany fokusu są po prostu niedostępne, gdy te części dokumentu są nieaktywne. Można to też porównać do strażników zamiast pułapki. inert nie chce, abyś gdzieś został, tylko chce, aby inne miejsca były niedostępne.

Dobrym przykładem jest funkcja alert() w JavaScript:

Zwróć uwagę, że na powyższym filmie strona była dostępna za pomocą myszy i klawiatury, dopóki nie wywołano funkcji alert(). Po wyświetleniu okna alertu reszta strony została zamrożona lub inert. Użytkownik nie może skupić się na niczym innym niż alert. Gdy użytkownik wejdzie w interakcję z alertem i wykona żądanie funkcji alertu, strona znów będzie interaktywna. inert umożliwia programistom łatwe uzyskanie tego samego efektu skupienia uwagi.

Oto krótki 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 inert przydaje się też w przypadku menu bocznego wysuwanego z boku ekranu. Gdy użytkownik wysunie menu boczne, nie należy zezwalać myszy ani klawiaturze na interakcję ze stroną znajdującą się za nim. Jest to dla użytkowników nieco kłopotliwe. Zamiast tego, gdy menu boczne jest widoczne, spraw, aby strona była nieaktywna. Użytkownicy będą musieli zamknąć menu boczne lub poruszać się po nim, a nie zgubią się na stronie z otwartym menu.

Zasoby

• Specyfikacja bezwładności
• Inert on MDN
• Chrome Developers: Introducing inert

Czcionki COLRv1

Przed wprowadzeniem czcionek 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ły one jednak być bardzo duże, a chociaż umożliwiały edytowanie tekstu, nie dawały zbyt wielu możliwości dostosowywania.

Po wprowadzeniu czcionek COLRv1 w internecie pojawiły się mniejsze, skalowalne wektorowo, przestawne, gradientowe i wykorzystujące tryby mieszania czcionki, które akceptują parametry umożliwiające dostosowanie czcionki do konkretnego zastosowania lub do marki.

Oto przykład z artykułu na blogu Chrome Developer na temat emoji. Być może zauważyliście, że jeśli powiększycie rozmiar czcionki emotikona, nie pozostanie on ostry. Jest to obraz, a nie grafika wektorowa. Często w aplikacjach, gdy używany jest emoji, jest on zastępowany elementem o wyższej jakości. W przypadku czcionek COLRv1 emotikony są wektorowe i piękne:

Czcionki ikon mogą w tym formacie robić niesamowite rzeczy, np. oferować niestandardowe dwukolorowe palety i nie tylko. Wczytywanie czcionki COLRv1 jest takie samo jak w przypadku każdego innego pliku czcionki:

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

Dostosowywanie czcionki COLRv1 odbywa się za pomocą reguły @font-palette-values, specjalnej reguły CSS, która służy do grupowania i nadawania nazw zestawom opcji dostosowywania w pakiecie, do którego można się później odwoływać. Zwróć uwagę, jak określasz nazwę niestandardową, podobnie jak właściwość 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;
}

Ostatnim krokiem jest zastosowanie palety do elementu, który używa rodziny czcionek kolorowych, przy czym --colorized jest aliasem dostosowań:

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

Coraz więcej czcionek zmiennych i kolorowych sprawia, że typografia internetowa zmierza w bardzo dobrym kierunku, jeśli chodzi o bogate możliwości dostosowywania i kreatywne wyrażanie siebie.

Zasoby

• Specyfikacja COLRv1 w serwisie GitHub
• Chrome Developers: Colrv1 Fonts
• Film z wyjaśnieniem dla programistów na temat BlinkOn

Jednostki widocznego obszaru

Zanim pojawiły się nowe warianty widocznego obszaru, w internecie dostępne były jednostki fizyczne, które pomagały dopasowywać widoczne obszary. Były to wysokość, szerokość, najmniejszy rozmiar (vmin) i największy bok (vmax). Sprawdzały się w wielu sytuacjach, ale przeglądarki mobilne wprowadziły pewne komplikacje.

Na urządzeniach mobilnych podczas wczytywania strony wyświetla się pasek stanu z adresem URL, który zajmuje część obszaru widoku. Po kilku sekundach i interakcji użytkownika pasek stanu może się schować, aby zapewnić większy obszar widoku. Gdy jednak pasek się wysunie, wysokość widocznego obszaru się zmieni, a wszystkie jednostki vh przesuną się i zmienią rozmiar, ponieważ zmieni się ich rozmiar docelowy. W późniejszych latach jednostka vh musiała zdecydować, którego z 2 rozmiarów widocznego obszaru będzie używać, ponieważ powodowało to problemy z układem wizualnym na urządzeniach mobilnych. Ustalono, że vh zawsze będzie oznaczać największy widoczny obszar.

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

Po udostępnieniu nowych wariantów widocznego obszaru (małego, dużego i dynamicznego) dodano logiczne odpowiedniki jednostek fizycznych. Chodzi o to, aby programiści i projektanci mogli wybrać jednostkę, której chcą użyć w danym scenariuszu. Może niewielkie przesunięcie układu, gdy znika pasek stanu, nie jest problemem, więc można bez obaw używać dvh (dynamicznej wysokości obszaru wyświetlania).

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

Mamy nadzieję, że zapewnią one programistom i projektantom elastyczność potrzebną do tworzenia elastycznych projektów stron.

Zasoby

• Specyfikacja jednostek względnych obszaru wyświetlania
• Bramus The Large, Small, and Dynamic Viewports

:has()

Przed :has() obiekt selektora zawsze znajdował się na końcu. Na przykład podmiotem tego selektora jest element listy: ul > li. Selektory pseudoklas mogą zmieniać selektor, ale nie zmieniają obiektu: ul > li:hover lub ul > li:not(.selected).

Po :has() temat wyżej w drzewie elementów może pozostać tematem, a jednocześnie dostarczać zapytanie o elementy podrzędne: ul:has(> li). Łatwo zrozumieć, dlaczego :has() zyskał nazwę „selektor nadrzędny”, ponieważ w tym przypadku obiekt selektora jest teraz elementem nadrzędnym.

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 atrybut :focus-visible:

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

Selektor :has() znów staje się przydatny, gdy pojawiają się bardziej praktyczne zastosowania. Obecnie nie można na przykład wybierać tagów <a>, gdy otaczają one obrazy, co utrudnia nauczenie tagu kotwicy, jak zmieniać style w takim przypadku. Możesz to zrobić za pomocą :has():

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

W tych przykładach :has() wygląda tylko jak selektor nadrzędny. Rozważ zastosowanie obrazów w elementach <figure> i dostosowanie stylów obrazów, jeśli element figure ma <figcaption>. W poniższym przykładzie wybrano rysunki z podpisami, a następnie obrazy w tym kontekście. :has() jest używane i nie zmienia tematu, ponieważ tematem, na którym się skupiamy, są obrazy, a nie liczby:

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

Kombinacji jest nieskończenie wiele. Połącz :has() z zapytaniami o ilość i dostosuj układy siatki CSS na podstawie liczby elementów podrzędnych. Połącz :has() ze stanami interaktywnych pseudoklas i twórz aplikacje, które reagują w nowy, kreatywny sposób.

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

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

Zasoby

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

2022 r. i później

Nawet po wprowadzeniu tych wszystkich niesamowitych funkcji w 2022 roku nadal będzie wiele rzeczy, które będą trudne do zrobienia. W następnej sekcji przyjrzymy się niektórym pozostałym problemom i rozwiązaniom, które są aktywnie opracowywane w celu ich wyeliminowania. Te rozwiązania są eksperymentalne, nawet jeśli są określone lub dostępne za flagami w przeglądarkach.

Z kolejnych sekcji powinno wynikać, że wiele osób z wielu firm szuka rozwiązania wymienionych problemów, a nie że te rozwiązania zostaną udostępnione w 2023 roku.

Słabo typizowane właściwości niestandardowe

Właściwości niestandardowe CSS są świetne. Umożliwiają one przechowywanie w nazwanej zmiennej różnego rodzaju informacji, które można następnie rozszerzać, obliczać, udostępniać i wykonywać na nich inne działania. Są tak elastyczne, że przydałoby się mieć też takie, które są mniej elastyczne.

Rozważmy scenariusz, w którym box-shadow używa właściwości niestandardowych dla swoich wartości:

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

Wszystko działa dobrze, dopóki jedna z właściwości nie zostanie zmieniona na wartość, której CSS nie akceptuje, np. --x: red. Cały cień zostanie przerwany, jeśli brakuje którejkolwiek z zagnieżdżonych zmiennych lub ma ona nieprawidłowy typ wartości.

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

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

Gdy box-shadow używa var(--x), a później następuje próba użycia --x: red, red jest ignorowany, ponieważ nie jest <length>. Oznacza to, że cień nadal działa, mimo że jednej z jego właściwości niestandardowych przypisano nieprawidłową wartość. Zamiast tego wraca do wartości initial-value – 0px.

Animacja

Oprócz bezpieczeństwa typów otwiera też wiele możliwości animacji. Elastyczność składni CSS sprawia, że animowanie niektórych elementów, takich jak gradienty, jest niemożliwe. @property pomaga w tym przypadku, ponieważ wpisana właściwość CSS może informować przeglądarkę o intencjach programisty w ramach skomplikowanej interpolacji. Ogranicza ona zakres możliwości w takim stopniu, że przeglądarka może animować aspekty stylu, których wcześniej nie mogła.

Rozważ ten przykład demonstracyjny, w którym gradient promienisty jest używany do utworzenia części nakładki, co daje efekt skupienia światła. JavaScript ustawia współrzędne x i y kursora myszy, gdy jest naciśnięty klawisz Alt/Option, a następnie zmienia rozmiar punktu na mniejszą wartość, np. 25%, tworząc okrąg punktu w pozycji kursora 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%
  );
}

Nie można jednak animować gradientów. Są one zbyt elastyczne i zbyt złożone, aby przeglądarka mogła „po prostu wywnioskować”, jak mają być animowane. W przypadku @property można jednak wpisać i animować jedną właściwość w izolacji, dzięki czemu przeglądarka może łatwo zrozumieć intencję.

Gry wideo, które korzystają z tego efektu, zawsze animują okrąg, od dużego do małego. Aby użyć @property w naszej wersji demonstracyjnej, tak 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;
}

Przeglądarka może teraz animować rozmiar gradientu, ponieważ ograniczyliśmy obszar modyfikacji do jednej właściwości i określiliśmy typ wartości, dzięki czemu przeglądarka może inteligentnie interpolować długości.

@property może robić o wiele więcej, ale te drobne ułatwienia mogą mieć duże znaczenie.

Zasoby

• @property specification
• @property w MDN
• @property w witrynie web.dev
• Wersja demonstracyjna funkcji Zoom Focus
• CSS Tricks: Exploring @property and its animating powers

Odwiedzone miejsca: min-width lub max-width

Przed wprowadzeniem zakresów zapytań o media zapytanie o media w CSS używało znaków min-width i max-width do określania warunków „większe niż” i „mniejsze niż”. Może to wyglądać tak:

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

Po zakresach zapytań o multimedia to samo zapytanie o multimedia może wyglądać tak:

@media (width >= 320px) {
  …
}

Zapytanie o multimedia CSS, które używa zarówno min-width, jak i max-width, może wyglądać tak:

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

Po zakresach 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 w programowaniu jeden z tych kodów będzie znacznie bardziej czytelny od drugiego. Dzięki dodatkom do specyfikacji deweloperzy będą mogli wybrać, które rozwiązanie wolą, lub nawet używać ich zamiennie.

Zasoby

• Specyfikacja składni zakresu zapytania o media
• Składnia zakresu zapytań o media w MDN
• Składnia zakresu zapytań o media w pluginie PostCSS

Brak zmiennych zapytań o multimedia

Przed @custom-media zapytania o media musiały się wielokrotnie powtarzać lub polegać na preprocesorach, które generowały odpowiednie dane wyjściowe na podstawie zmiennych statycznych w czasie kompilacji.

Po @custom-media CSS umożliwia tworzenie aliasów zapytań o media i odwoływanie się do nich, tak jak w przypadku właściwości niestandardowej.

Nadawanie nazw jest bardzo ważne: może ono dopasować cel do składni, co ułatwia udostępnianie i korzystanie z funkcji w zespołach. Oto kilka niestandardowych zapytań o media, które stosuję 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ć jednej z nich w ten sposób:

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

Znajdź pełną listę niestandardowych zapytań o media, których używam w bibliotece niestandardowych właściwości CSS Open Props.

Zasoby

• Specyfikacja niestandardowych zapytań o media
• Własne zapytania o media w PostCSS

Zagnieżdżanie selektorów jest bardzo wygodne

Przed @nest w arkuszach stylów było dużo powtórzeń. Stawało się to szczególnie niewygodne, gdy selektory były długie i każdy z nich dotyczył niewielkich różnic. Wygoda zagnieżdżania jest jedną z najczęstszych przyczyn stosowania preprocesora.

Po @nest powtórzenie zniknie. Niemal wszystkie funkcje zagnieżdżania z użyciem preprocesora będą dostępne w CSS.

article {
  color: darkgray;
}

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

/* with @nest becomes */

article {
  color: darkgray;

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

Najważniejsze w zagnieżdżaniu jest dla mnie to, że oprócz braku powtórzeń article w zagnieżdżonym selektorze kontekst stylizacji pozostaje w jednym bloku stylu. Zamiast przechodzić od jednego selektora i jego stylów do innego selektora ze stylami (przykład 1), czytelnik może pozostać w kontekście artykułu i zobaczyć, że artykuł zawiera linki. Relacja i styl są połączone, więc article może mieć własne style.

Własność można też traktować jako centralizację. Zamiast szukać odpowiednich stylów w arkuszu stylów, wszystkie style są zagnieżdżone w kontekście. Działa to w przypadku relacji nadrzędna-podrzędna, ale też podrzędna-nadrzędna.

Rozważmy komponent podrzędny, który chce się dostosować, gdy znajduje się w innym kontekście nadrzędnym, w przeciwieństwie do komponentu nadrzędnego, 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 organizowaniu, centralizowaniu i przejmowaniu kontroli nad stylami. Komponenty mogą grupować i mieć własne style, zamiast rozdzielać je na inne bloki stylów. W tych przykładach może się to wydawać niewielkie, ale może mieć bardzo duży wpływ zarówno na wygodę, jak i czytelność.

Zasoby

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

Określanie zakresu stylów jest bardzo trudne

Przed wprowadzeniem @scope istniało wiele strategii, ponieważ style w CSS kaskadowo dziedziczą i mają domyślnie globalny zakres. Te funkcje CSS są bardzo przydatne w wielu sytuacjach, ale w przypadku złożonych witryn i aplikacji, które mogą mieć wiele różnych stylów komponentów, globalna przestrzeń i kaskadowy charakter mogą sprawiać, że style będą się przenikać.

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

W przykładzie poniżej zakres konwencji nazewnictwa BEM można odwrócić, aby uzyskać rzeczywisty zamiar. Selektor BEM próbuje ograniczyć zakres koloru elementu header do kontenera .card z konwencjami nazewnictwa. Wymaga to, aby nagłówek miał tę nazwę klasy, co pozwoli osiągnąć cel. W przypadku @scope nie są wymagane żadne konwencje nazewnictwa, aby osiągnąć ten sam cel bez oznaczania elementu nagłówka:

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

/* with @scope becomes */

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

Oto kolejny przykład, który jest mniej związany z konkretnym komponentem, a bardziej z globalnym zakresem CSS. Ciemny i jasny motyw muszą współistnieć w arkuszu stylów, w którym kolejność ma znaczenie przy określaniu zwycięskiego stylu. Zwykle oznacza to, że style ciemnego motywu występują po jasnym motywie. Dzięki temu jasny motyw jest domyślny, a ciemny – opcjonalny. Unikaj konfliktów dotyczących kolejności i zakresu za pomocą @scope:

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

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

Aby dokończyć historię, @scope umożliwia również określenie, gdzie kończy się zakres stylu. Nie można tego zrobić za pomocą żadnej konwencji nazewnictwa ani preprocesora. Jest to specjalna funkcja, którą może wykonać tylko wbudowany w przeglądarkę CSS. W poniższym przykładzie style img i .content są stosowane wyłącznie wtedy, gdy element podrzędny elementu .media-block jest elementem sąsiadującym 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 utworzenie układu murarskiego za pomocą CSS

Przed wprowadzeniem układu kaskadowego CSS z siatką najlepszym sposobem na uzyskanie układu kaskadowego był JavaScript, ponieważ żadna z metod CSS z kolumnami lub flexboxem nie odzwierciedlała dokładnie kolejności treści.

Po zastosowaniu układu kaskadowego CSS z siatką nie będą wymagane żadne biblioteki JavaScript, a kolejność treści będzie prawidłowa.

Powyższy przykład został utworzony za pomocą tego kodu CSS:

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

Miło wiedzieć, że ta strategia układu jest w kręgu zainteresowań jako brakująca funkcja. Możesz ją też wypróbować już dziś w Firefoxie.

Zasoby

• Specyfikacja układu kaskadowego
• Układ kaskadowy na MDN
• Smashing Magazine: Native CSS Masonry Layout with CSS Grid

CSS nie może pomóc użytkownikom w ograniczaniu danych

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ędzanie danych” w przeglądarce, ale CSS nie mógł tego robić.

Po zapytaniu o media prefers-reduced-data CSS może przyczynić się do poprawy komfortu użytkownika i pomóc w oszczędzaniu danych.

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

Powyższy kod CSS jest używany w tym komponencie przewijania multimediów, a oszczędności mogą być ogromne. Im większy jest widoczny obszar, tym większe oszczędności można uzyskać podczas wczytywania strony. Zapisywanie jest kontynuowane, gdy użytkownicy wchodzą w interakcję z przewijarkami multimediów. Wszystkie obrazy mają atrybuty loading="lazy", co w połączeniu z ukrywaniem elementu za pomocą CSS oznacza, że żądanie sieciowe dotyczące obrazu nigdy nie jest wysyłane.

W moich testach na widocznym obszarze średniej wielkości początkowo wczytano 40 żądań i 700 KB zasobów. Gdy użytkownik przewija wybór multimediów, wczytywane są kolejne żądania i zasoby. W przypadku CSS i zapytania o media dotyczącego zmniejszonych danych ładowanych jest 10 żądań i 172 KB zasobów. To oszczędność pół megabajta, a użytkownik nie przewinął jeszcze żadnego z tych plików. W tym momencie nie są wysyłane żadne dodatkowe żądania.

Ograniczenie ilości danych ma więcej zalet niż tylko oszczędność danych. Więcej tytułów jest widocznych i nie ma rozpraszających obrazów okładek, które odciągają uwagę. Wielu użytkowników przegląda strony w trybie oszczędzania danych, ponieważ płacą za każdy megabajt danych. Miło jest widzieć, że CSS może w tym pomóc.

Zasoby

• prefers-reduced-data specification
• prefers-reduced-data w MDN
• prefers-reduced-data w GUI Problem
• Smashing Magazine: Improving Core Web Vitals, A Smashing Magazine Case Study

Funkcje przyciągania przewijania są zbyt ograniczone

Przed wprowadzeniem tych propozycji dotyczących przyciągania przewijania pisanie własnego kodu JavaScript do zarządzania karuzelą, suwakiem lub galerią mogło szybko stać się skomplikowane ze względu na wszystkie obserwatory i zarządzanie stanem. Jeśli nie zachowasz ostrożności, skrypt może znormalizować naturalne prędkości przewijania, przez co interakcja użytkownika będzie nienaturalna i potencjalnie nieporęczna.

Nowe interfejsy API

snapChanging()

To zdarzenie jest uruchamiane, gdy tylko przeglądarka zwolni element podrzędny przyciągania. Dzięki temu interfejs będzie odzwierciedlać brak elementu podrzędnego przyciąganego do krawędzi i nieokreślony stan przyciągania przewijanej listy, ponieważ jest ona teraz używana i zostanie umieszczona w nowym miejscu.

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

snapChanged()

To zdarzenie jest uruchamiane, gdy przeglądarka przejdzie do nowego elementu podrzędnego, a przewijanie zostanie zakończone. Dzięki temu każdy interfejs, który zależy od przyciągniętego elementu podrzędnego, może się zaktualizować i odzwierciedlić 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. Rozważ użycie komponentów, które można przesuwać, gdzie przesunięcie w lewo lub w prawo wywołuje różne zdarzenia, lub paska wyszukiwania, który po załadowaniu strony jest początkowo ukryty, dopóki nie przewiniesz do góry. Ta właściwość CSS umożliwia deweloperom określenie, że przewijanie ma się zaczynać w określonym punkcie.

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

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

:snap-target

Ten selektor CSS dopasuje elementy w kontenerze przyciągania 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;
}

Po wprowadzeniu tych propozycji dotyczących przyciągania przewijania tworzenie suwaków, karuzel i galerii jest znacznie łatwiejsze, ponieważ przeglądarka oferuje teraz udogodnienia w tym zakresie, eliminując obserwatorów i kod orkiestracji przewijania na rzecz korzystania z wbudowanych interfejsów API.

To wciąż wczesny etap rozwoju tych funkcji CSS i JS, ale warto wypatrywać polyfilli, które mogą wkrótce pomóc w ich wdrażaniu i testowaniu.

Zasoby

• Wersja robocza specyfikacji Scroll Snap 2
• Wyjaśnienia dotyczące Scroll Snap 2
• Wersje demonstracyjne Snap

Przełączanie się między znanymi stanami

Wcześniej toggle() można było wykorzystywać do stylizacji i interakcji tylko stany wbudowane w przeglądarkę. Na przykład pole wyboru ma stan :checked, który jest wewnętrznie zarządzanym stanem przeglądarki dla elementu wejściowego, który CSS może wykorzystać do wizualnej zmiany elementu.

Po toggle() można tworzyć stany niestandardowe w dowolnym elemencie, aby CSS mógł je zmieniać i wykorzystywać do stylizowania. Umożliwia m.in. grupowanie, jazdę na rowerze i bezpośrednie przełączanie.

W poniższym przykładzie osiągnięto ten sam efekt przekreślenia elementu listy po jego ukończeniu, ale bez elementów pola wyboru:

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

Odpowiednie style CSS toggle():

li {
  toggle-root: check self;
}

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

Jeśli znasz automaty stanowe, możesz zauważyć, jak wiele mają wspólnego z toggle(). Ta funkcja pozwoli deweloperom tworzyć więcej stanów w CSS, co powinno skutkować bardziej przejrzystymi i semantycznymi sposobami koordynowania interakcji i stanów.

Zasoby

• Specyfikacja wersji roboczej funkcji toggle()
• Bramus: The Future of CSS: CSS Toggles

Dostosowywanie wybranych elementów

Przed <selectmenu> język CSS nie umożliwiał dostosowywania elementów <option> za pomocą rozbudowanego kodu HTML ani wprowadzania wielu zmian w wyświetlaniu listy opcji. Dlatego deweloperzy musieli wczytywać zewnętrzne biblioteki, które odtwarzały większość funkcji <select>, co było bardzo pracochłonne.

Po <selectmenu> deweloperzy mogą podawać rozbudowany kod HTML dla elementów opcji i dostosowywać ich styl w dowolnym stopniu, zachowując 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 wyjaśnieniami tworzone jest nowe menu wyboru z kilkoma podstawowymi opcjami:

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

CSS może kierować na części elementu i nadawać im style:

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

Elementu <selectmenu> możesz wypróbować w Chromium w wersji Canary z włączoną flagą web experiments. W 2023 r. i później pojawią się elementy menu wyboru, które będzie można dostosowywać.

Zasoby

• Specyfikacja menu wyboru
• Wersja demonstracyjna menu wyboru

Zakotwiczanie elementu do innego elementu

Przed anchor() pozycjonowanie bezwzględne i względne było strategią pozycjonowania udostępnianą deweloperom, aby elementy podrzędne mogły się przemieszczać w ramach elementu nadrzędnego.

Po anchor() deweloperzy mogą pozycjonować elementy względem innych elementów, niezależnie od tego, czy są one elementami podrzędnymi, czy nie. Umożliwia też deweloperom określenie, względem której krawędzi ma być pozycjonowany element, oraz inne przydatne funkcje do tworzenia relacji pozycji między elementami.

W wyjaśnieniu znajdziesz kilka świetnych przykładów i przykładowych kodów, jeśli chcesz dowiedzieć się więcej.

Zasoby

• anchor() wyjaśnienie