Modern CSS 2024

Co to są Container Queries i jak je używać w CSS?

Container Queries (@container): media queries na poziomie komponentu. Nie okno przeglądarki — rodzic decyduje. Definiowanie kontenera: .card-wrapper { container-type: inline-size; container-name: card; }. Reguła: @container card (min-width: 400px) { .card { display: flex; } }. container-type wartości: inline-size (szerokość), size (szer+wys), normal (tylko style queries). container-name: nazwa opcjonalna, do wielu kontenerów. Przykład: sidebar ma 300px — komponent wyświetla stacked. Main ma 800px — komponent wyświetla grid. Ten sam CSS, inne zachowanie. Style Queries (@container style()): warunki na podstawie custom properties. @container style(--theme: dark) { .text { color: white; } }. Przekazywanie danych przez custom props. Nie wymaga JavaScript. Wsparcie: Chrome 105+, Firefox 110+, Safari 16+. Polyfill: container-query-polyfill (Google Chrome Labs). cqw, cqh, cqi, cqb: jednostki relative do kontenera. 1cqw = 1% szerokości kontenera. cqi = inline size. Porównanie z media queries: Media — globalny viewport. Container — lokalny kontener. Container = true component-driven CSS. Dobre dla: design system komponentów. Card layouts. Sidebar + main. Reusable components różnej wielkości. ResizeObserver under the hood. CSS Grid + Container Queries: potężna kombinacja. Grid decyduje o szerokości. Container decyduje o wyglądzie.

CSS :has() pseudo-klasa — parent selector i zaawansowane selektory?

:has() pseudo-klasa (parent selector): pierwszy prawdziwy parent selector w CSS. a:has(img) — link zawierający img. form:has(input:invalid) — form z nieprawidłowym inputem. .card:has(.badge) — card mający badge. div:has(+ .error) — div poprzedzający error. Możliwości: .parent:has(.child:hover) { background: blue; } — hover dziecka zmienia rodzica. Wcześniej niemożliwe bez JavaScript. Zaawansowane selektory: :is() — lista selektorów: :is(h1, h2, h3) { margin: 0; }. Specyficzność = najwyższy selektor w liście. :where() — jak :is() ale specyficzność 0. Nadpisywanie bez !important. :not() z listą: div:not(.active, .hidden). :has() + :not(): article:not(:has(img)) { background: gray; }. CSS Nesting (native, bez Sass): .parent { color: blue; .child { color: red; } &:hover { opacity: 0.8; } @media (min-width: 768px) { display: grid; } }. Nesting marker & — explicit reference. Bez & — implicit (jak Sass). Wsparcie: Chrome 120+, Firefox 117+, Safari 17.2+. Kaskada logiczna z :has(): nav:has(a.active) — nawigacja z aktywnym linkiem. table:has(th:empty) — tabela z pustym nagłówkiem. Formularze: form:has(input[type=checkbox]:checked) .conditional-field { display: block; }. Pokaż pole gdy checkbox zaznaczony — zero JS.

CSS @layer — kaskada layers i porządkowanie stylów?

CSS Cascade Layers (@layer): deklaratywna kontrola kaskady. Nie specyficzność — layers decydują. Deklaracja kolejności: @layer reset, base, components, utilities. Niższy layer = niższy priorytet. utilities wygrywa z components bez !important. Dodawanie do layer: @layer base { h1 { font-size: 2rem; } }. @layer components { .btn { padding: 0.5rem 1rem; } }. Import z layer: @import url('reset.css') layer(reset). Zagnieżdżanie: @layer components { @layer buttons { ... } }. Dostęp: components.buttons. Unlayered styles: najwyższy priorytet (bez @layer). Trzeba pamiętać. Praktyczne zastosowania: Design system: @layer tokens, base, components, overrides. Tailwind v4 z @layer: utilities mają niski priorytet — nadpisuj bez !important. Third-party CSS: @import 'bootstrap' layer(bootstrap). Bootstrap nie wygrywa z własnym CSS. Porównanie: Bez @layer: !important walki. Hack ze specyficznością. Z @layer: czytelna hierarchia. Przewidywalne nadpisywanie. Browser support: Chrome 99+, Firefox 97+, Safari 15.4+. Revert-layer: animation-name: revert-layer — cofa do poprzedniego layera. Debugging layers: Chrome DevTools — warstwy w Styles panel. Kolejność layerów widoczna. Layer ordering best practices: 1. reset. 2. defaults/base. 3. themes. 4. layout. 5. components. 6. utilities. 7. overrides.

View Transitions API — płynne przejścia stron w CSS i JavaScript?

View Transitions API: płynne animacje między stanami UI. Wcześniej: JavaScript + CSS = dużo kodu. Teraz: CSS + jeden JS call. Same-document transition: document.startViewTransition(() => { updateDOM(); }). Automatyczny cross-fade. Przechwytuje stary i nowy stan. Animuje z domyślnym fade. Personalizacja: ::view-transition — root overlay. ::view-transition-old(root) — stary stan. ::view-transition-new(root) — nowy stan. @keyframes slide-from-right { from { transform: translateX(100%); } }. ::view-transition-new(root) { animation: slide-from-right 0.3s; }. Named transitions: element { view-transition-name: hero-image; }. Osobna animacja dla tego elementu. Shared element transition (MPA): hero z listy do detalu. Obraz 'leci' między stronami. SPA routing: React Router: router.navigate(path) wewnątrz startViewTransition. Next.js App Router: eksperymentalny support. @next/experimental-view-transitions. useTransitionRouter hook. MPA (Multi Page App): Chrome 126+ nawigacja przez linki. @view-transition { navigation: auto; } w CSS. Automatyczne cross-page transitions. CSS reduce-motion: @media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation-duration: 0.01ms; } }. JavaScript API: const transition = document.startViewTransition(callback). transition.ready — promise, animacja gotowa. transition.finished — promise, animacja zakończona. transition.skipTransition() — pomiń. Browser support: Chrome 111+, Safari 18+, Firefox (w trakcie).

Scroll-driven Animations i CSS Anchor Positioning — co to i jak działają?

Scroll-driven Animations: animacje sterowane przez scroll — zero JavaScript. animation-timeline: scroll() — postęp animacji = postęp scroll. animation-timeline: view() — postęp = widoczność w viewport. Przykład: @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }. .element { animation: fade-in linear; animation-timeline: view(); animation-range: entry 0% entry 100%; }. animation-range: określa kiedy animacja startuje/kończy. entry — wejście w viewport. exit — wyjście. cover — od góry do dołu viewportu. contain — gdy w pełni widoczny. scroll() parametry: scroll() — domyślny block axis, root scroller. scroll(x) — horizontal. scroll(nearest) — najbliższy overflow container. Zastępuje: IntersectionObserver + JS animation. GSAP ScrollTrigger (dla prostych przypadków). Lepsza wydajność — GPU-accelerated. Browser support: Chrome 115+, Safari 18+ (częściowy). Polyfill: scroll-driven-animations polyfill (Google). CSS Anchor Positioning: pozycjonowanie względem innego elementu. Wcześniej: JavaScript getBoundingClientRect(). Teraz: czyste CSS. .anchor { anchor-name: --my-anchor; }. .tooltip { position: absolute; position-anchor: --my-anchor; top: anchor(bottom); left: anchor(center); }. Zastępuje: Floating UI / Popper.js dla prostych tooltips, dropdowns, popovers. @position-try: fallback pozycje gdy poza viewport. @position-try --flip-up { top: auto; bottom: anchor(top); }. position-try-fallbacks: --flip-up, --flip-left. Popover API + Anchor: natywny HTML popover attr + CSS anchor. Zero JavaScript. Browser support: Chrome 125+. Subgrid: grid-template-columns: subgrid — dzieci dziedziczą grid rodzica.

Wyślij zapytanie