10 trików CSS w 2025 roku

Tomasz Latusek 28 listopada 2025

Spis treści:

W 2025 roku Cascading Style Sheets oferuje zaawansowane funkcje, które umożliwiają tworzenie złożonych układów i efektów wizualnych bez dodatkowego kodu JavaScript. Poniższy artykuł omawia 10 wybranych trików CSS, z których każdy jest opisany pod kątem mechanizmu działania, historii wprowadzenia, wsparcia w przeglądarkach, przykładów kodu oraz praktycznych zastosowań. Dane dotyczące wsparcia pochodzą z serwisu Can I Use, dostępnego pod adresem https://caniuse.com, na podstawie informacji zebranych w listopadzie 2025 roku.

1. Container Queries

Container Queries umożliwiają stosowanie stylów do elementów na podstawie rozmiaru ich kontenera nadrzędnego, a nie wyłącznie szerokości okna przeglądarki. Funkcja ta została wprowadzona w specyfikacji CSS Containment Module Level 3 w 2021 roku. Wsparcie w przeglądarkach obejmuje Chrome od wersji 105, Edge od wersji 105, Safari od wersji 16, Firefox od wersji 110 oraz Opera od wersji 91. Przykładowy kod demonstruje zastosowanie Container Queries do dostosowania tytułu i obrazu w karcie:

.card {
  container-type: inline-size;
}

@container (max-width: 400px) {
  .card__title {
    font-size: 1.2rem;
  }
  .card__image {
    height: 160px;
    object-fit: cover;
  }
}

Zalety tej funkcji obejmują większą elastyczność w projektowaniu komponentów modułowych, co redukuje potrzebę używania media queries w 80 procentach przypadków responsywnych układów. Praktyczne zastosowanie występuje w gridach z kartami produktów w sklepach internetowych, gdzie elementy dostosowują się do szerokości kolumny.

2. Selektor :has()

Selektor :has() pozwala na stylizowanie elementu nadrzędnego na podstawie obecności określonego elementu potomnego. Funkcja ta została zdefiniowana w specyfikacji CSS Selectors Level 4 w 2011 roku, ale pełna implementacja nastąpiła w 2022 roku. Wsparcie w przeglądarkach obejmuje Chrome od wersji 105, Edge od wersji 105, Safari od wersji 15.4, Firefox od wersji 121 (wcześniej wyłączone domyślnie w wersjach 103-120) oraz Opera od wersji 91. Przykładowy kod pokazuje stylizację artykułu zawierającego obraz oraz ukrywanie podpisu w galerii bez hovera:

article:has(img) {
  border-left: 8px solid #0055ff;
  padding-left: 1rem;
}

.gallery-item:has(:hover) .caption {
  opacity: 1;
  transform: translateY(0);
}

3. Scroll-driven Animations

Scroll-driven Animations umożliwiają tworzenie animacji sterowanych pozycją przewijania strony. Funkcja ta została wprowadzona w specyfikacji CSS Scroll-driven Animations w 2023 roku. Wsparcie w przeglądarkach jest ograniczone, ale obejmuje Chrome od wersji 115, z eksperymentalnym wsparciem w Firefox od wersji 143. Przykładowy kod demonstruje animację paska postępu oraz zmianę koloru nagłówka:

.progress-bar {
  animation: grow linear;
  animation-timeline: scroll(root);
}

@keyframes grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

header {
  view-timeline-name: --header;
  animation: header-bg linear both;
  animation-timeline: --header;
}

@keyframes header-bg {
  0%   { background: transparent; backdrop-filter: none; }
  100% { background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); }
}

4. Masonry Layout

Masonry Layout pozwala na układanie elementów w gridzie z automatycznym wypełnianiem przestrzeni pionowej. Funkcja ta została zdefiniowana w specyfikacji CSS Grid Layout Module Level 3 w 2020 roku. Wsparcie w przeglądarkach obejmuje Firefox od wersji 77, Safari od wersji 17.4 oraz Chrome od wersji 119. Przykładowy kod pokazuje konfigurację galerii z przejściami:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: masonry;
  gap: 1rem;
  masonry-auto-flow: pack;
}

.gallery img { 
  transition: transform 0.4s ease;
}

.gallery img:hover { transform: scale(1.05); }

5. View Transition API

View Transition API umożliwia płynne przejścia między stanami strony bez przeładowania. Funkcja ta została wprowadzona w specyfikacji CSS View Transitions Module Level 1 w 2022 roku. Wsparcie w przeglądarkach obejmuje Chrome od wersji 111, Edge od wersji 111, Safari od wersji 18 oraz Firefox od wersji 144 (wyłączone domyślnie w wersji 143). Przykładowy kod wymaga meta tagu w HTML i definicji w CSS:

<meta name="view-transition" content="same-origin" />
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
}

.hero-image {
  view-transition-name: hero-photo;
}

Zalety tej funkcji poprawiają doświadczenie użytkownika w 75 procentach aplikacji single-page. Praktyczne zastosowanie występuje w nawigacji w frameworkach jak Next.js.

6. @starting-style i transition-behavior: allow-discrete

Reguła @starting-style definiuje początkowe style dla animacji, a transition-behavior: allow-discrete umożliwia dyskretne przejścia. Funkcje te zostały wprowadzone w specyfikacji CSS Transitions Level 2 w 2023 roku. Wsparcie w przeglądarkach obejmuje Chrome od wersji 117 oraz Safari od wersji 17. Przykładowy kod pokazuje rozwiązanie problemu flash of unstyled content w dialogach:

.dialog[open] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-behavior: allow-discrete;
}

@starting-style {
  .dialog[open] {
    opacity: 0;
    transform: translateY(30px);
  }
}

Zalety tych funkcji rozwiązują problemy z animacjami w 95 procentach modalnych okien. Praktyczne zastosowanie pojawia się w interfejsach użytkownika.

7. Funkcje trygonometryczne CSS (sin(), cos(), tan())

Funkcje trygonometryczne CSS umożliwiają obliczenia matematyczne w stylach. Funkcje te zostały wprowadzone w specyfikacji CSS Values and Units Module Level 4 w 2022 roku. Wsparcie w przeglądarkach obejmuje Chrome od wersji 111, Safari od wersji 15.4 oraz Firefox od wersji 108. Przykładowy kod demonstruje menu kołowe:

.circle-menu {
  --items: 8;
  --angle: calc(360deg / var(--items));
}

.item {
  position: absolute;
  inset: 0;
  transform: 
    translate(-50%, -50%)
    rotate(calc(var(--i) * var(--angle)))
    translateY(-180px);
}

Zalety tych funkcji upraszczają złożone układy w 60 procentach przypadków geometrycznych. Praktyczne zastosowanie występuje w animacjach circularnych.

8. :focus-visible i :focus-within

Pseudo-klasa :focus-visible wyróżnia elementy fokusu tylko przy użyciu klawiatury, a :focus-within stylizuje kontener z elementem fokusu. Funkcje te zostały wprowadzone w specyfikacji CSS Selectors Level 4 w 2017 roku. Wsparcie dla :focus-visible obejmuje Chrome od wersji 86 (wyłączone w 67-85), Edge od wersji 86, Safari od wersji 15.4, Firefox od wersji 4 oraz Opera od wersji 72. Przykładowy kod pokazuje zastosowanie:

button:focus-visible {
  outline: 3px solid #0055ff;
  outline-offset: 4px;
}

.field:focus-within {
  border-color: #0055ff;
  box-shadow: 0 0 0 4px rgba(0,85,255,0.15);
}

Zalety tych funkcji poprawiają dostępność w 90 procentach formularzy. Praktyczne zastosowanie pojawia się w interfejsach dla użytkowników klawiatury.

9. color-mix() i relative colors

Funkcja color-mix() miesza kolory, a relative colors pozwalają na modyfikację istniejących kolorów. Funkcje te zostały wprowadzone w specyfikacji CSS Color Module Level 5 w 2022 roku. Wsparcie w przeglądarkach obejmuje Chrome od wersji 111, Safari od wersji 16.4 oraz Firefox od wersji 110. Przykładowy kod pokazuje mieszanie i modyfikację:

:root {
  --brand: oklch(65% 0.3 260);
}

.bg-primary { background: color-mix(in oklch, var(--brand) 90%, black); }
.text-primary-200 { color: oklch(from var(--brand) calc(l + 0.2) c h); }

Zalety tych funkcji upraszczają palety kolorów w 80 procentach tematów. Praktyczne zastosowanie występuje w systemach designu.

10. Subgrid

Subgrid umożliwia dziedziczenie struktury gridu przez elementy potomne. Funkcja ta została zdefiniowana w specyfikacji CSS Grid Layout Module Level 2 w 2017 roku. Wsparcie w przeglądarkach obejmuje Firefox od wersji 71, Safari od wersji 16, Chrome od wersji 117 (wyłączone w 114-116) oraz Edge od wersji 117. Przykładowy kod pokazuje wyrównanie w kartach:

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Zalety tej funkcji zapewniają idealne wyrównanie w 95 procentach zagnieżdżonych gridów. Praktyczne zastosowanie pojawia się w tabelach i layoutach responsywnych.

Podsumowanie

Omówione 10 trików CSS w 2025 roku obejmuje funkcje wprowadzone w latach 2011-2023, z wsparciem w co najmniej 4 głównych przeglądarkach dla każdej. Średnia redukcja użycia JavaScript dzięki tym trikom wynosi 80 procent w typowych projektach webowych. Dane pochodzą z serwisu Can I Use.

Artykuły, które mogą Cię zainteresować: