Styl internetowy nowej generacji

Dowiedz się więcej o niektórych ciekawych funkcjach nowoczesnych usług porównywania cen.

Adam Argyle

Una Kravets

W tej chwili w CSS jest mnóstwo ciekawych rzeczy, a także wiele z nich jest już obsługiwanych przez współczesne przeglądarki! Nasza rozmowa na CDS 2019 jest dostępna poniżej: Omówimy kilka nowych i nadchodzących funkcji, którymi warto się zająć.

W tym poście skupiamy się na funkcjach, z których możesz obecnie korzystać, dlatego koniecznie obejrzyjcie prezentację . Dostępne są również wersje demonstracyjne wszystkich funkcji, które omawiamy Strona CSS@CDS.

Spis treści

• Przyciągnięcie przewijania
• :focus-within
• Zapytania o multimedia – poziom 5
• Właściwości logiczne
• position: sticky
• backdrop-filter
• :is()
• gap
• CSS Houdini
• Przenieś

Przyciągnięcie przewijania

Przewiń przyciągnięcie – umożliwia definiowanie punktów przyciągania, które pojawiają się, gdy użytkownik przewija treść w pionie, w poziomie lub w obu tych miejscach. Oferuje wbudowaną bezwładność i zwalnianie przewijania oraz obsługuje dotyk.

Ten przykładowy kod konfiguruje przewijanie w poziomie w elemencie <section> z punktami przyciągania wyrównanymi do lewej krawędzi podrzędnych elementów <picture>:

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

Jak to działa:

• W nadrzędnym elemencie <section>:
  • overflow-x ma wartość auto, by umożliwić przewijanie w poziomie.
  • overscroll-behavior-x ma wartość contain, aby zapobiec przewijaniu elementów nadrzędnych, gdy użytkownik osiągnie granice obszaru przewijania elementu <section>. Nie jest to niezbędne do przyciągania, ale zwykle jest to dobry pomysł.
  • Parametr scroll-snap-type ma wartość x (do przyciągania w poziomie) i mandatory, aby zapewnić, że widoczny obszar zawsze będzie przyciągany do najbliższego punktu przyciągania.
• W przypadku podrzędnych elementów <picture> reguła scroll-snap-align jest ustawiona na początek, czyli punkty przyciągania po lewej stronie każdego obrazu (przy założeniu, że direction ma wartość ltr).

Oto demonstracja na żywo:

Możesz też zobaczyć wersje demonstracyjne przyciągania do przewijania w pionie i przyciągania do przewijania matrycowego.

:focus-within

:focus-within rozwiązuje długotrwały problem z ułatwieniami dostępu: w wielu przypadkach zaznaczenie elementu podrzędnego powinno wpływać na wygląd elementu nadrzędnego, aby interfejs był dostępny dla użytkowników technologii wspomagających osoby z niepełnosprawnością.

Jeśli na przykład masz menu rozwijane z kilkoma elementami, powinno ono być widoczne, dopóki dowolny z nich będzie zaznaczony. W przeciwnym razie menu znika w przypadku użytkowników klawiatury.

:focus-within informuje przeglądarkę, że ma zastosować styl, gdy zaznaczenie jest na dowolnym elemencie podrzędnym danego elementu. Wróćmy do przykładowego menu i poprzez ustawienie atrybutu :focus-within w elemencie menu możesz sprawić, że będzie on widoczny po zaznaczeniu elementów menu:

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

W prezentacji poniżej możesz przechodzić między elementami, które można zaznaczyć, naciskając klawisz Tab. Po wskazaniu pozycji menu będą one nadal widoczne:

Zapytania o multimedia – poziom 5

Nowe zapytania o multimedia dają nam zaawansowane możliwości dostosowywania działania aplikacji do preferencji użytkownika na podstawie jego urządzenia. Zasadniczo przeglądarka działa jako serwer proxy dla preferencji na poziomie systemu, na które możemy odpowiadać w naszym CSS za pomocą grupy zapytań o media prefers-*:

Oto nowe zapytania, które naszym zdaniem najbardziej spodobają się deweloperom:

• preferuje ograniczony ruch
• prefers-color-scheme
• preferuje-kontrast
• preferuje-zmniejszoną-przezroczystość
• wymuszone kolory
• odwrócone kolory

W przypadku ułatwień dostępu takie zapytania są bardzo pomocne. Wcześniej nie mogliśmy się dowiedzieć na przykład, że użytkownik włączył w systemie operacyjnym tryb wysokiego kontrastu. Jeśli w przypadku aplikacji internetowej chcesz udostępnić tryb wysokiego kontrastu, który był zgodny z Twoją marką, trzeba było poprosić użytkowników o wybór z poziomu interfejsu aplikacji. Ustawienie wysokiego kontrastu możesz teraz wykryć w systemie operacyjnym za pomocą prefers-contrast.

Jedną z ciekawych zalet tych zapytań o multimedia to fakt, że możemy projektować z myślą o różnych kombinacjach preferencji użytkownika na poziomie systemu, aby uwzględniać różne preferencje użytkowników i potrzeby związane z ułatwieniami dostępu. Jeśli użytkownik chce korzystać z wysokiego kontrastu w trybie ciemnym przy słabym oświetleniu, jest to możliwe.

Dla Adama ważne jest, że „preferuje ograniczony ruch” nie zostanie zaimplementowany jako „brak ruchu”. Użytkownik twierdzi, że woli mniej ruchu, a nie że nie chce żadnej animacji. Twierdzi, że ograniczenie ruchu to nie ruch. Oto przykład animacji przenikającej, gdy użytkownik preferuje ograniczenie ruchu:

Właściwości logiczne

Właściwości logiczne rozwiązują problem, który staje się widoczny w miarę jak coraz więcej deweloperów zajmuje się internacjonalizacją. Wiele właściwości układu, takich jak margin i padding, przyjmuje, że język czyta się od góry do dołu i od lewej do prawej.

Projektując strony dla wielu języków z różnymi trybami pisania, programiści musieli dostosować wszystkie te właściwości osobno w kilku elementach, co szybko stało się koszmarem łatwości obsługi.

Właściwości logiczne umożliwiają zachowanie integralności układu w trybach tłumaczenia i pisania. Są aktualizowane dynamicznie zgodnie z semantyczną kolejnością treści, a nie jej układem przestrzennym. Dzięki właściwościom logicznym każdy element ma 2 wymiary:

• Wymiar blokady jest odległy do przepływu tekstu w wierszu. (W języku angielskim block-size to to samo, co height).
• Wymiar wpisany jest równoległy do przepływu tekstu w wierszu. (W języku angielskim inline-size to to samo, co width).

Te nazwy wymiarów mają zastosowanie do wszystkich właściwości układu logicznych. Na przykład w języku angielskim block-start to to samo, co top, a inline-end to to samo co right.

Dzięki właściwościom logicznym możesz automatycznie aktualizować układ pod kątem innych języków. Wystarczy, że zmienisz właściwości writing-mode i direction strony, zamiast aktualizować dziesiątki właściwości układu poszczególnych elementów.

W poniższej wersji demonstracyjnej możesz zobaczyć, jak działają właściwości logiczne, ustawiając różne wartości właściwości writing-mode w elemencie <body>:

position: sticky

Element z atrybutem position: sticky pozostaje w blokowaniu, dopóki nie rozpocznie się poza jego ekranem. gdy przestaje się przewijać wraz z pozostałą częścią strony i trzyma się do pozycji określonej przez wartość top elementu. Obszar przypisany do tego elementu pozostaje niezmieniony, a element wraca do niego, gdy użytkownik przewinie stronę z powrotem w górę.

Pozycjonowanie przyklejone umożliwia tworzenie wielu przydatnych efektów, które wcześniej wymagały JavaScriptu. Aby przedstawić niektóre możliwości, stworzyliśmy kilka wersji demonstracyjnych. Każda wersja demonstracyjna wykorzystuje zasadniczo taki sam styl CSS i w niewielkim stopniu dostosowuje znaczniki HTML w celu utworzenia każdego efektu.

Stos przyklejony

W tej wersji demonstracyjnej wszystkie przyklejone elementy znajdują się w tym samym kontenerze. Oznacza to, że każdy przyklejony element przesuwa się na poprzedni, gdy użytkownik przewija stronę w dół. Elementy przyklejone mają takie samo zablokowane położenie.

Slajd przyklejony

W tym przypadku elementy przyklejone to kuzyni. (To znaczy, że ich rodzice są rodzeństwem). Gdy przyklejony element osiąga dolną granicę kontenera, porusza się razem z kontenerem, tworząc wrażenie, że dolne elementy przyklejone wypychają wyższe. Innymi słowy, wyglądają na rywalizujące o ustaloną pozycję.

Klepki desperado

Podobnie jak slajdy przyklejone, elementy przyklejone w tej wersji demonstracyjnej to kuzyny. Zostały one jednak umieszczone w kontenerach z dwukolumnowym układem siatki.

backdrop-filter

Właściwość backdrop-filter umożliwia stosowanie efektów graficznych do obszaru za elementem, a nie do samego elementu. Pozwala to uzyskać wiele fajnych efektów, które wcześniej można było osiągnąć wyłącznie przy użyciu skomplikowanych technik hakowania CSS i JavaScript, które można było osiągnąć za pomocą jednej linii kodu CSS.

Na przykład ta wersja demonstracyjna używa funkcji backdrop-filter, aby uzyskać rozmycie przypominające system operacyjny:

Mamy już ciekawy post na temat: backdrop-filter. Znajdziesz tam więcej informacji.

:is()

Chociaż pseudoklasa :is() ma ponad 10 lat, nadal nie jest używana w takim stopniu, jak naszym zdaniem zasługuje. Jako argument uwzględnia listę oddzielonych przecinkami selektorów i pasuje do wszystkich selektorów na tej liście. Ta elastyczność sprawia, że jest ona niezwykle przydatna i może znacznie zmniejszyć liczbę wysyłanych przez Ciebie usług porównywania cen.

Krótki przykład:

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

W układzie siatki CSS od jakiegoś czasu występuje gap (wcześniej grid-gap). Dzięki określaniu wewnętrznych odstępów elementu nadrzędnego zamiast odstępów wokół elementów podrzędnych, gap rozwiązuje wiele częstych problemów z układem. Na przykład w przypadku luki nie musisz się martwić, że marginesy elementów podrzędnych staną się niepotrzebnymi odstępami na krawędziach elementu zawierającego:

Jeszcze lepsze wieści: gap wkrótce będzie obsługiwać Flexbox, zapewniając te same korzyści co w przypadku odstępów, jakie oferuje siatka:

• Jest 1 deklaracja odstępów zamiast wielu.
• Nie musisz określać w projekcie konwencji, które elementy podrzędne powinny mieć odstępy. Odstępy będą należały do elementu nadrzędnego.
• Kod jest łatwiejszy do zrozumienia niż starsze strategie, np. lobotomizowana sowa.

Ten film przedstawia zalety używania jednej właściwości gap w przypadku 2 elementów – jednego z układem siatki i drugiego z układem elastycznym:

Obecnie w układach elastycznych tylko FireFox obsługuje gap, ale zobacz, jak działa ta wersja demonstracyjna:

CSS – Houdini

Houdini to zestaw niskopoziomowych interfejsów API dla silnika renderowania przeglądarki. Pozwalają one poinformować przeglądarkę, jak interpretować niestandardowy kod CSS. Innymi słowy, zapewnia dostęp do modelu obiektu CSS, co pozwala rozszerzać kod CSS za pomocą JavaScriptu. Ma to kilka korzyści:

• Daje ona znacznie większe możliwości tworzenia niestandardowych funkcji CSS.
• Łatwiej oddzielić problemy z renderowaniem od logiki aplikacji.
• Jest on skuteczniejszy od polyfill CSS, który obecnie wykonujemy w języku JavaScript, ponieważ przeglądarka nie będzie już musiała analizować skryptów i przeprowadzać drugiego cyklu renderowania. Kod Houdini jest analizowany podczas pierwszego cyklu renderowania.

Houdini to zbiorcza nazwa kilku interfejsów API. Więcej informacji na ten temat i jego obecny stan znajdziesz w artykule Czy Houdini Ready jeszcze jest? Omówiliśmy w nim interfejsy Właściwości i Wartości API, Paint API oraz Worklet animacji, bo są one obecnie najskuteczniejsze. Możemy poświęcić cały post na temat tych ekscytujących interfejsów API, ale na razie przeczytaj nasz wykład z ich omówieniem i kilka fajnych demonstracji, dzięki którym dowiesz się, co możesz zrobić za ich pomocą.

Rozwijany

Istnieje jeszcze kilka innych rzeczy, o których chcieliśmy porozmawiać, ale jako że nie mieliśmy czasu szczegółowo mówić, więc omówiliśmy je w krótkim wydaniu.

• size: właściwość, która pozwala ustawić jednocześnie wysokość i szerokość
• aspect-ratio: właściwość, która ustawia współczynnik proporcji dla elementów, które nie mają przypisanego współczynnika.
• min(), max() i clamp(): funkcje, które umożliwiają ustawianie ograniczeń liczbowych w dowolnej właściwości CSS, a nie tylko szerokości i wysokości.
• list-style-type istniejącej właściwości, ale wkrótce będzie obsługiwać szerszy zakres wartości, w tym emotikony i pliki SVG
• display: outer inner: właściwość display będzie wkrótce akceptować 2 parametry, co pozwoli Ci wyraźnie określić układ zewnętrzny i wewnętrzny, zamiast używać złożonych słów kluczowych, takich jak inline-flex.
• Regiony CSS: umożliwiają wypełnienie określonego, nieprostokątnego obszaru, do którego i z którego może trafiać treść.
• Moduły CSS: JavaScript może zażądać modułu CSS i odzyskać obiekt sformatowany, na którym łatwo wykonywać operacje.