Nowoczesne funkcje CSS - część 2

W drugiej części naszej podróży po nowoczesnym CSS odkryjemy kolejne potężne narzędzia: scroll-snap,

@supports

,

accent-color

i

color-mix()

. Każde z nich rozwiązuje problem, który wcześniej wymagał JavaScriptu lub skomplikowanych obejść - tak jak odkrycia archeologów w Egipcie ujawniają coraz bardziej zaawansowane techniki starożytnych budowniczych.

Scroll Snap - przyciąganie podczas przewijania

Scroll Snap to mechanizm CSS, który pozwala tworzyć efekt przyciągania elementów do określonych punktów podczas przewijania. Dzięki niemu możesz stworzyć karuzele, galerie i sekcje full-page bez użycia JavaScriptu.

Wyobraź sobie korytarz w piramidzie z kolejnymi komorami - scroll-snap sprawia, że widok automatycznie zatrzymuje się na każdej komorze.

1/* Kontener z scroll-snap */
2.gallery {
3  display: flex;
4  overflow-x: auto;
5  scroll-snap-type: x mandatory;
6  /* mandatory - zawsze przyciąga do najbliższego punktu */
7  /* proximity - przyciąga tylko blisko punktu */
8  gap: 1rem;
9}
10
11/* Każdy element przyciąga do początku */
12.gallery-item {
13  scroll-snap-align: start;
14  /* Opcje: start, center, end */
15  flex-shrink: 0;
16  width: 300px;
17}
18
19/* Sekcje full-page z pionowym snap */
20.fullpage-container {
21  height: 100vh;
22  overflow-y: auto;
23  scroll-snap-type: y mandatory;
24}
25
26.fullpage-section {
27  height: 100vh;
28  scroll-snap-align: start;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32}
33
34/* Scroll padding - offset dla fixed headers */
35.container {
36  scroll-snap-type: y mandatory;
37  scroll-padding-top: 80px;
38  /* Uwzględnia wysokość nagłówka */
39}

@supports - wykrywanie możliwości przeglądarki

Reguła

@supports

(zwana też feature queries) pozwala sprawdzić, czy przeglądarka obsługuje daną właściwość CSS, zanim ją zastosujesz. To narzędzie do progressive enhancement - budowania doświadczenia od podstaw i dodawania zaawansowanych funkcji tam, gdzie są dostępne.

To jak testowanie wytrzymałości materiału przed budową - starożytni Egipcjanie też sprawdzali kamień zanim użyją go do budowy piramidy.

1/* Podstawowe użycie @supports */
2.layout {
3  display: block; /* Fallback */
4}
5
6@supports (display: grid) {
7  .layout {
8    display: grid;
9    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
10    gap: 1rem;
11  }
12}
13
14/* Sprawdzanie Container Queries */
15@supports (container-type: inline-size) {
16  .card-wrapper {
17    container-type: inline-size;
18  }
19
20  @container (min-width: 400px) {
21    .card {
22      flex-direction: row;
23    }
24  }
25}
26
27/* Negacja - jeśli NIE obsługuje */
28@supports not (aspect-ratio: 1 / 1) {
29  .square {
30    padding-top: 100%; /* Stary hack na proporcje */
31    height: 0;
32  }
33}
34
35/* Łączenie warunków */
36@supports (display: grid) and (gap: 1rem) {
37  .modern-grid {
38    display: grid;
39    gap: 1rem;
40  }
41}

accent-color - stylowanie kontrolek formularza

Właściwość

accent-color

pozwala na zmianę koloru akcentu w natywnych kontrolkach formularza, takich jak checkboxy, radio buttony, range slidery i paski postępu. Wcześniej stylowanie tych elementów wymagało całkowitego nadpisania ich wyglądu - teraz wystarczy jedna linia.

1/* Globalny kolor akcentu */
2:root {
3  accent-color: #d4af37; /* Złoty jak egipskie ozdoby */
4}
5
6/* Konkretne kontrolki */
7input[type="checkbox"] {
8  accent-color: #c9a66b;
9  width: 20px;
10  height: 20px;
11}
12
13input[type="radio"] {
14  accent-color: #1e3a5f;
15}
16
17input[type="range"] {
18  accent-color: #30d5c8;
19}
20
21progress {
22  accent-color: #d4af37;
23}
24
25/* Różne kolory dla różnych sekcji */
26.form-section--gold {
27  accent-color: gold;
28}
29
30.form-section--lapis {
31  accent-color: #1e3a5f;
32}

accent-color

automatycznie dobiera kontrastowy kolor tekstu, więc nie musisz się martwić o czytelność.

color-mix() - mieszanie kolorów w CSS

Funkcja

color-mix()

pozwala na mieszanie dwóch kolorów w określonych proporcjach bezpośrednio w CSS. To potężne narzędzie do tworzenia wariantów kolorów, semi-transparentnych wersji i całych palet kolorystycznych.

Pomyśl o tym jak starożytni Egipcjanie mieszali pigmenty - lazuryt z białym dawały różne odcienie niebieskiego.

color-mix()

działa dokładnie tak samo.

1/* Podstawowa składnia */
2/* color-mix(in przestrzen-kolorow, kolor1 procent, kolor2) */
3
4/* Mieszanie w proporcjach */
5.lighter {
6  background: color-mix(in srgb, #d4af37 70%, white);
7  /* 70% złota + 30% białego */
8}
9
10.darker {
11  background: color-mix(in srgb, #d4af37 70%, black);
12  /* 70% złota + 30% czarnego */
13}
14
15/* Tworzenie semi-transparentnych wersji */
16.overlay {
17  background: color-mix(in srgb, #1e3a5f 50%, transparent);
18  /* 50% krycia */
19}
20
21/* Generowanie palety z jednego koloru bazowego */
22:root {
23  --brand: #d4af37;
24  --brand-light: color-mix(in srgb, var(--brand) 30%, white);
25  --brand-lighter: color-mix(in srgb, var(--brand) 15%, white);
26  --brand-dark: color-mix(in srgb, var(--brand) 70%, black);
27  --brand-darker: color-mix(in srgb, var(--brand) 50%, black);
28}
29
30/* Hover efekty */
31.button {
32  background: var(--brand);
33}
34
35.button:hover {
36  background: color-mix(in srgb, var(--brand) 85%, black);
37}
38
39/* Mieszanie w przestrzeni oklch (lepsze wyniki wizualne) */
40.gradient-step {
41  background: color-mix(in oklch, blue 60%, green);
42}

Funkcja

color-mix()

w połączeniu z CSS Variables tworzy potężny system tematyzacji, gdzie cała paleta kolorów może być generowana z jednego koloru bazowego.