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.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Nowoczesne funkcje CSS - czesc 1</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Nowoczesne funkcje CSS</h1>
12        <p class="subtitle">clamp(), aspect-ratio, :is(), :where()</p>
13
14        <section>
15            <h2>Fluid Typography z clamp()</h2>
16            <p class="fluid-text">Ten tekst skaluje sie plynnie dzieki clamp().</p>
17            <p class="fluid-small">Mniejszy tekst rowniez uzywa clamp().</p>
18        </section>
19
20        <section>
21            <h2>Galeria z aspect-ratio</h2>
22            <div class="gallery">
23                <div class="gallery-item ratio-16-9">16:9</div>
24                <div class="gallery-item ratio-1-1">1:1</div>
25                <div class="gallery-item ratio-4-3">4:3</div>
26            </div>
27        </section>
28
29        <section>
30            <h2>Uproszczone selektory z :is()</h2>
31            <article>
32                <h3>Naglowek artykulu</h3>
33                <p>Paragraf w artykule z <a href="#">linkiem</a>.</p>
34            </article>
35            <nav>
36                <h3>Nawigacja</h3>
37                <p>Paragraf w nawigacji z <a href="#">linkiem</a>.</p>
38            </nav>
39        </section>
40
41        <section>
42            <h2>Reset z :where()</h2>
43            <ul class="custom-list">
44                <li>Element 1</li>
45                <li>Element 2</li>
46                <li>Element 3</li>
47            </ul>
48        </section>
49    </div>
50</body>
51</html>