Styl internetowy nowej generacji

Bądź na bieżąco z ekscytującymi funkcjami nowoczesnej usługi porównywania cen.

Adam Argyle

Una Kravets

Obecnie w CSS dzieją się wiele ciekawych rzeczy, a wiele z nich jest już obsługiwanych w współczesnych przeglądarkach. Nasza prezentacja na CDS 2019, którą możesz obejrzeć poniżej, omawiamy kilka nowych i nadchodzących funkcji, które naszym zdaniem powinny zwrócić uwagę.

W tym poście skupimy się na funkcjach, z których możesz korzystać. Obejrzyj prezentację, aby dowiedzieć się więcej o nadchodzących funkcjach, takich jak Houdini. Prezentacje wszystkich funkcji, które omawiamy, znajdziesz też na stronie CSS@CDS.

Spis treści

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

Przyciąganie po przewinięciu

Przyciąganie umożliwia definiowanie punktów przyciągania, gdy użytkownik przewija treść w pionie, w poziomie lub w obu tych miejscach. Ma wbudowane opcje bezwładności i zwalniania przewijania. Obsługuje także funkcje dotykowe.

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

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

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

Działa to w następujący sposób:

• W nadrzędnym elemencie <section>
  • overflow-x ma wartość auto, aby umożliwić przewijanie w poziomie.
  • overscroll-behavior-x ma wartość contain, aby uniemożliwiać przewijanie elementów nadrzędnych, gdy użytkownik dotrze do granic obszaru przewijania elementu <section>. (Nie jest to konieczne do robienia zdjęć, ale zwykle jest to dobry pomysł).
  • Komponent scroll-snap-type ma wartość x (przy przyciąganiu w poziomie), a zasadę mandatory – zapewnia, że widoczny obszar zawsze jest przyciągany do najbliższego punktu przyciągania.
• W przypadku podrzędnych elementów <picture> na początku ustawiana jest opcja scroll-snap-align, która ustawia punkty przyciągania po lewej stronie każdego zdjęcia (przy założeniu, że direction ma wartość ltr).

Oto demonstracja na żywo:

Możesz też zapoznać się z wersjami demonstracyjnymi przyciągania do przewijania w pionie i przyciągania z przewijania według matrycy.

Uwaga: chociaż przyciąganie w pionie obsługuje przyciąganie w pionie, zachowaj ostrożność podczas korzystania z tej funkcji na poziomie strony, ponieważ w niektórych przypadkach może się wydawać, że użytkownik przejmuje kontrolę. Zwykle najlepiej jest zastosować przyciąganie do komponentu na stronie zamiast do samej strony.

:focus-within

Narzędzie :focus-within rozwiązuje długotrwały problem z ułatwieniami dostępu: w wielu przypadkach zaznaczenie elementu podrzędnego powinno wpływać na sposób wyświetlania elementu nadrzędnego, tak aby interfejs był dostępny dla użytkowników technologii wspomagających.

Jeśli na przykład masz menu z kilkoma elementami, to menu powinno pozostać widoczne, gdy dowolny z nich jest aktywny. W przeciwnym razie menu znika u użytkowników klawiatury.

:focus-within informuje przeglądarkę, że ma zastosować styl, gdy zaznaczony jest dowolny element podrzędny określonego elementu. Wracając do przykładowego menu – ustawiając w elemencie menu element :focus-within, możesz sprawić, że będzie on widoczny, gdy element menu jest zaznaczony:

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

W poniższej demonstracji spróbuj przechodzić między elementami, które można zaznaczyć klawiszem Tab. Warto zauważyć, że menu pozostają widoczne, gdy kursor jest ustawiony na poszczególnych elementach menu:

Zapytania o multimedia – poziom 5

Nowe zapytania o multimedia zapewniają nam zaawansowane sposoby dostosowywania wrażeń użytkownika z aplikacji do jego ustawień urządzenia. Ogólnie rzecz biorąc, przeglądarka działa jak serwer proxy dla ustawień systemowych, na które możemy odpowiadać w naszym CSS za pomocą grupy zapytań o multimedia prefers-*:

Oto nowe zapytania, które naszym zdaniem najbardziej interesują deweloperów:

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

Takie zapytania są bardzo przydatne w kontekście ułatwień dostępu. Wcześniej nie mieliśmy możliwości sprawdzenia, na przykład, że użytkownik ustawił w systemie operacyjnym tryb wysokiego kontrastu. Jeśli chcesz udostępnić tryb wysokiego kontrastu dla aplikacji internetowej, która pozostała wierna marce, trzeba poprosić użytkowników o wybranie tego trybu w interfejsie aplikacji. Teraz możesz wykryć ustawienie wysokiego kontrastu w systemie operacyjnym za pomocą prefers-contrast.

Ogromną zaletą tych zapytań o media jest to, że możemy przygotowywać wiele kombinacji preferencji użytkownika na poziomie systemu, aby dostosować je do szerokiej gamy preferencji i potrzeb związanych z ułatwieniami dostępu. Możesz to zrobić, jeśli użytkownik chce korzystać z ciemnego trybu o wysokim kontraście w słabym oświetleniu.

Ważne jest dla Adama, aby ustawienie „preferowane dla zmniejszonego ruchu” nie było stosowane jako „brak ruchu”. Użytkownik twierdzi, że woli mniej ruchu i nie chce żadnych animacji. Twierdzi, że ograniczony ruch to nie brak ruchu. Oto przykład z animacją przenikania w sytuacji, gdy użytkownik preferuje zmniejszony ruch:

Uwaga: w Chrome Canary możesz przetestować CSS, który korzysta z prefers-reduced-motion lub prefers-color-scheme, wybierając odpowiednie ustawienia w panelu Narzędzi deweloperskich Renderowanie. Aby uzyskać dostęp do Renderowania, otwórz menu poleceń i uruchom polecenie Show Rendering.

Właściwości logiczne

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

Podczas projektowania stron w różnych językach z różnymi trybami pisania deweloperzy musieli dostosowywać wszystkie te parametry z osobna pod kątem wielu elementów, co szybko staje się koszmarem dla obsługi.

Właściwości logiczne pozwalają zachować integralność układu w przypadku różnych tłumaczeń i trybów pisania. Dynamicznie aktualizują się w zależności od semantycznej kolejności treści, a nie ich układu przestrzennego. W przypadku właściwości logicznych każdy element ma 2 wymiary:

• Wymiar bloku jest prosty względem przepływu tekstu w wierszu. (W języku angielskim block-size jest równoznaczny z height).
• Wymiar wbudowany jest równoległy do przepływu tekstu w linii. (W języku angielskim inline-size jest równoznaczny z width).

Te nazwy wymiarów mają zastosowanie do wszystkich właściwości układu logicznego. Na przykład w języku angielskim block-start jest taki sam jak top, a inline-end jest taki sam jak right.

Właściwości logiczne pozwalają automatycznie aktualizować układ w przypadku 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 w poszczególnych elementach.

Działanie właściwości logicznych możesz zobaczyć w poniższej wersji demonstracyjnej, ustawiając dla właściwości writing-mode elementu <body> różne wartości:

position: sticky

Element z atrybutem position: sticky pozostaje w przepływie blokowym, dopóki nie zacznie wychodzić poza ekran. Gdy to nastąpi, przestanie przewijać się wraz z resztą strony i pozostanie w pozycji określonej przez wartość top elementu. Przestrzeń przypisana do tego elementu pozostaje w przepływie, a element powraca do niego, gdy użytkownik przewinie z powrotem w górę.

Pozycjonowanie przyklejone umożliwia tworzenie wielu przydatnych efektów, które wcześniej wymagały obsługi JavaScriptu. Aby pokazać niektóre możliwości, przygotowaliśmy kilka wersji demonstracyjnych. Każda wersja demonstracyjna wykorzystuje głównie ten sam kod CSS i jedynie nieznacznie dostosowuje znaczniki HTML w celu utworzenia poszczególnych efektów.

Stos przyklejony

W tej wersji demonstracyjnej wszystkie elementy przyklejone znajdują się w tym samym kontenerze. Oznacza to, że każdy przyklejony element przesuwa się nad poprzednim, gdy użytkownik przewija stronę w dół. Elementy przyklejone znajdują się w tej samej pozycji.

Slajd przyklejony

W tym przypadku elementy przyklejone to kuzyni. (To znaczy, że ich rodzice są rodzeństwem). Gdy element przyklejony dotrze do dolnej granicy kontenera, przesuwa się w górę razem z kontenerem, co daje wrażenie, że dolne elementy przyklejone wypychają je wyżej. Innymi słowy, rywalizują one o zablokowaną pozycję.

Trwałe despera

Podobnie jak w tej wersji demonstracyjnej przyklejone elementy są kuzynami. Zostały one jednak umieszczone w kontenerach z ustawionym 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. W ten sposób można uzyskać mnóstwo świetnych efektów, które do tej pory były dostępne tylko przy użyciu skomplikowanych technik hakowania CSS i JavaScript, za pomocą jednego wiersza kodu CSS.

Na przykład w tej wersji demonstracyjnej użyto funkcji backdrop-filter, aby uzyskać efekt rozmycia podobnego do używanego w systemie operacyjnym:

Utworzyliśmy już świetnego posta na temat: backdrop-filter. Znajdziesz w nim więcej informacji.

:is()

Choć pseudoklasa :is() ma w rzeczywistości ponad 10 lat, nadal nie spełnia jej oczekiwań. Jego argumentem jest rozdzielona przecinkami lista selektorów i pasuje do wszystkich selektorów na tej liście. Dzięki tej elastyczności usługa jest niezwykle przydatna i może znacznie zmniejszyć ilość przesyłanych 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 przypadku układu siatki CSS od jakiegoś czasu dostępna jest wartość gap (wcześniej grid-gap). Określenie odstępów wewnętrznych w elemencie, a nie między elementami podrzędnymi, gap rozwiązuje wiele częstych problemów z układem. Dzięki przerwom nie musisz się na przykład martwić, że marginesy elementów podrzędnych będą powodowały niechciane białe spacje wokół krawędzi elementu zawierającego:

Jeszcze lepsza wiadomość: gap wkrótce pojawi się w flexbox, zapewniając dostęp do wszystkich bonusów związanych z odstępami co w przypadku siatki:

• Jest tylko jedna deklaracja dotycząca spacji zamiast wielu.
• Nie musisz ustanawiać w projekcie konwencji, które określają, które elementy podrzędne powinny być oznaczone odstępami, ponieważ są one stosowane w elemencie zawierającym.
• Kod jest bardziej zrozumiały niż starsze strategie, np. sowa zlobotomowana.

Na filmie poniżej pokazano korzyści płynące z używania tej samej właściwości gap w przypadku 2 elementów – jednego w układzie siatki, a drugiego w układzie elastycznym:

Obecnie tylko FireFox obsługuje w układach elastycznych tylko język gap, ale obejrzyj tę wersję demonstracyjną, aby zobaczyć, jak to działa:

CSS – Houdini

Houdini to zestaw niskopoziomowych interfejsów API dla mechanizmu renderowania przeglądarki, dzięki którym możesz poinformować przeglądarkę, jak ma interpretować niestandardowy kod CSS. Innymi słowy, daje Ci on dostęp do obiektowego modelu CSS, który umożliwia rozszerzanie CSS za pomocą JavaScriptu. Ma to kilka zalet:

• Daje to dużo więcej możliwości tworzenia niestandardowych funkcji CSS.
• Ułatwia to oddzielenie problemów z renderowaniem od logiki aplikacji.
• Jest wydajniejsze niż kodowanie CSS stosowane obecnie w przypadku JavaScriptu, ponieważ przeglądarka nie musi już analizować skryptów i wykonywać drugiego cyklu renderowania. Kod Houdini jest analizowany w pierwszym cyklu renderowania.

Houdini to ogólna nazwa kilku interfejsów API. Jeśli chcesz dowiedzieć się więcej o firmie i jej obecnym stanie, zajrzyj do sekcji Czy Houdini jeszcze jest gotowa? W naszej rozmowie omówiliśmy interfejsy Właściwości i wartości API, Paint API oraz Worklet animacji, ponieważ są one obecnie najbardziej obsługiwane. Moglibyśmy bez trudu opublikować całego posta na temat każdego z tych ekscytujących interfejsów API, ale warto zapoznać się z naszym omówieniem, w którym przedstawiliśmy kilka ciekawych informacji i poznaliśmy w nich możliwości tych interfejsów.

Rozszerzone menu

Na horyzoncie jest jeszcze kilka rzeczy, o których chcieliśmy porozmawiać, ale nie mieliśmy czasu, by je szczegółowo omówić, więc przeanalizowaliśmy je tak szybko, jak to możliwe. ✔ Jeśli jeszcze nie znasz niektórych z tych funkcji, obejrzyj ostatnią część naszej prezentacji.

• size: właściwość, która umożliwia jednoczesne ustawienie wysokości i szerokości
• aspect-ratio: właściwość określająca format obrazu dla elementów, które nie mają go z założenia.
• min(), max() i clamp(): funkcje umożliwiające ustawienie ograniczeń liczbowych w dowolnej właściwości CSS, nie tylko szerokości i wysokości.
• list-style-type dotychczasową właściwość, ale wkrótce będzie ona obsługiwać szerszy zakres wartości, w tym emotikony i SVG;
• display: outer inner: właściwość display będzie wkrótce akceptować 2 parametry, co pozwoli Ci jednoznacznie określić układ zewnętrzny i wewnętrzny, zamiast używać złożonych słów kluczowych, takich jak inline-flex.
• Regiony CSS: pozwalają wypełnić określony, nieprostokątny obszar, do którego mogą trafiać treści.
• Moduły CSS: JavaScript będzie mógł zażądać modułu CSS i odzyskać obiekt sformatowany, na którym można łatwo wykonać na nim operacje.