Nowoczesne funkcje CSS - część 1

Nowoczesne CSS to prawdziwa skarbnica narzędzi, które pozwalają tworzyć bardziej elastyczne, czytelne i responsywne strony internetowe. W tym rozdziale poznasz cztery potężne funkcje:

clamp()

,

aspect-ratio

,

:is()

i

:where()

. Każda z nich rozwiązuje konkretny problem, z którym deweloperzy zmagali się latami - tak jak starożytni architekci Egiptu rozwiązywali problemy konstrukcyjne piramid.

Funkcja clamp() - elastyczne wartości

Funkcja

clamp()

pozwala określić wartość, która automatycznie dostosowuje się do dostępnej przestrzeni, ale nigdy nie wyjdzie poza określone granice. Przyjmuje trzy argumenty: wartość minimalną, preferowaną i maksymalną.

To jak budowanie kolumn w świątyni - mają minimalną i maksymalną wysokość, ale dostosowują się do przestrzeni pomiędzy nimi.

1/* Składnia: clamp(minimum, preferowana, maximum) */
2
3/* Fluid typography - czcionka rośnie z viewportem */
4h1 {
5  font-size: clamp(1.5rem, 4vw, 3rem);
6  /* Minimum 1.5rem, preferowane 4vw, max 3rem */
7}
8
9/* Elastyczna szerokość kontenera */
10.container {
11  width: clamp(300px, 80%, 1200px);
12  margin: 0 auto;
13}
14
15/* Responsywny padding */
16.section {
17  padding: clamp(1rem, 3vw, 4rem);
18}
19
20/* Fluid spacing między elementami */
21.grid {
22  gap: clamp(0.5rem, 2vw, 2rem);
23}

Funkcja

clamp()

jest szczególnie przydatna przy fluid typography, gdzie rozmiar czcionki płynnie dostosowuje się do szerokości ekranu bez potrzeby używania media queries.

Właściwość aspect-ratio - zachowanie proporcji

Właściwość

aspect-ratio

pozwala zachować proporcje elementu niezależnie od jego rozmiaru. Wcześniej wymuszenie proporcji wymagało trików z padding-top - teraz wystarczy jedna linia CSS.

Pomyśl o proporcjach piramid - ich kąt nachylenia musiał być idealny, aby konstrukcja była stabilna. Podobnie aspect-ratio zapewnia idealne proporcje Twoich elementów.

1/* Kwadrat - proporcje 1:1 */
2.avatar {
3  width: 100px;
4  aspect-ratio: 1 / 1;
5  border-radius: 50%;
6  object-fit: cover;
7}
8
9/* Wideo - proporcje 16:9 */
10.video-container {
11  width: 100%;
12  aspect-ratio: 16 / 9;
13  background: #000;
14}
15
16/* Zdjęcie - proporcje 4:3 */
17.photo {
18  width: 100%;
19  aspect-ratio: 4 / 3;
20  object-fit: cover;
21}
22
23/* Karta z zachowanymi proporcjami */
24.card-image {
25  width: 100%;
26  aspect-ratio: 3 / 2;
27  object-fit: cover;
28  border-radius: 8px;
29}

Pseudo-klasa :is() - uproszczenie selektorów

Pseudo-klasa

:is()

pozwala na grupowanie wielu selektorów w jeden, co znacznie redukuje powtórzenia w kodzie CSS. Zamiast pisać długą listę selektorów, możesz je wszystkie umieścić wewnątrz

:is()

.

To jak hieroglify skrótowe - zamiast rysować każdy symbol osobno, używamy jednego symbolu do reprezentowania grupy.

1/* Bez :is() - dużo powtórzeń */
2header h1, header h2, header h3,
3nav h1, nav h2, nav h3,
4footer h1, footer h2, footer h3 {
5  color: gold;
6}
7
8/* Z :is() - zwięzle i czytelne */
9:is(header, nav, footer) :is(h1, h2, h3) {
10  color: gold;
11}
12
13/* Stylowanie linków w różnych kontekstach */
14:is(article, section, aside) a:hover {
15  text-decoration: underline;
16  color: #c9a66b;
17}
18
19/* Zagnieżdżone listy */
20:is(ol, ul) :is(ol, ul) {
21  margin-left: 1.5rem;
22  font-size: 0.9em;
23}

Ważna cecha

:is()

- przejmuje specyficzność najwyższego selektora z listy. Jeśli w

:is(h1, .title, #main)

mamy ID, cały selektor będzie miał specyficzność ID.

Pseudo-klasa :where() - selektory bez specyficzności

Pseudo-klasa

:where()

działa identycznie jak

:is()

, ale z jedną kluczową różnicą - ma zawsze specyficzność równą 0. To czyni ją idealnym narzędziem do tworzenia resetów CSS i domyślnych stylów, które można łatwo nadpisać.

1/* :where() - specyficzność 0 */
2:where(header, nav, footer) a {
3  color: inherit;
4  text-decoration: none;
5}
6
7/* Łatwo nadpisać zwykłym selektorem klasy */
8.nav-link {
9  color: gold; /* To wygra z regułą powyżej */
10}
11
12/* Reset stylów list - łatwy do nadpisania */
13:where(ul, ol) {
14  list-style: none;
15  padding: 0;
16  margin: 0;
17}
18
19/* Porównanie :is() vs :where() */
20/* :is() - wysoka specyficzność (jak #id) */
21:is(#main, .content) p {
22  color: #333;
23}
24
25/* :where() - zerowa specyficzność */
26:where(#main, .content) p {
27  color: #333; /* Łatwo nadpisać */
28}

Praktyczna zasada: używaj

:is()

gdy chcesz zachować specyficzność selektorów, a

:where()

gdy tworzysz bazowe/domyślne style, które powinny być łatwo nadpisywalne.