Nowe CSS API 2024

CSS Anchor Positioning — co to jest i jak działa?

CSS Anchor Positioning: natywne pozycjonowanie elementów względem innych. Bez JavaScript! Bez Floating UI / Popper.js. Nowe w Chrome 125+ (2024). Podstawy: anchor-name: --my-anchor (na elemencie referencyjnym). position-anchor: --my-anchor (na elemencie pozycjonowanym). position: absolute lub fixed. Pozycja: top: anchor(bottom) — pod elementem. left: anchor(left) — wyrównaj w lewo. bottom: anchor(top) — nad elementem. right: anchor(right) — wyrównaj w prawo. center: anchor(center). Przykład tooltip: button { anchor-name: --btn }. div.tooltip { position: absolute. position-anchor: --btn. top: calc(anchor(bottom) + 8px). left: anchor(left) }. Fallback pozycja: position-try-fallbacks: flip-block, flip-inline. Automatyczne przełączenie. Gdy tooltip wychodzi poza viewport. position-try: custom fallback. @position-try --above { top: auto. bottom: anchor(top) }. Wielokrotne anchory: top: anchor(--anchor-a bottom). left: anchor(--anchor-b right). Rozmiar: width: anchor-size(width). height: anchor-size(height). Dopasuj do anchor. Inline anchoring: bez position:absolute. anchor() w margin, padding (eksperymentalnie). Wsparcie: Chrome 125+. Safari 18 (częściowy). Firefox — w trakcie. Polyfill: @oddbird/css-anchor-positioning. Produkcja: z polyfill ok. Zastępuje: Popper.js. Floating UI (częściowo). Custom JavaScript positioning.

Popover API — natywne popupy bez JavaScript?

Popover API: natywne popupy. Baseline 2024. Dostępność wbudowana. Keyboard navigation. popover atrybut: button popovertarget='my-pop' — trigger. div id='my-pop' popover — zawartość. Działanie: click na button -> toggle popover. ESC zamyka. Outside click zamyka (light dismiss). Focus trap opcjonalny. Typy popover: popover (domyślny = 'auto'): light dismiss. Jeden aktywny naraz. Skupia się automatycznie. popover='manual': programmatic control. Brak light dismiss. Wiele naraz. Metody JS: el.showPopover(). el.hidePopover(). el.togglePopover(). ToggleEvent: el.addEventListener('toggle', (e) => { if (e.newState === 'open') {} }). Styling: [popover] { display: none } — domyślnie. :popover-open — gdy widoczny. Animacje: @starting-style. transition: display. Pojawianie się z animacją. overlay: top-layer — ponad resztą. backdrop: ::backdrop (jak dialog). Anchor + Popover: Idealne połączenie! Tooltip/dropdown z anchor positioning. button { anchor-name: --trigger. popovertarget: menu }. div[popover] { position: absolute. position-anchor: --trigger. top: anchor(bottom) }. Dostępność: role='tooltip' lub 'menu'. aria-expanded. Focus management wbudowany. Zastępuje: custom dropdown. tooltip komponenty. React Portals (częściowo). Wsparcie: Chrome 114+, Safari 17+, Firefox 125+. Powszechny (2024). Nie zastępuje: dialog — modal z focus trap. Złożone menu ARIA.

CSS :has() — parent selector i zaawansowane wzorce?

:has(): parent selector. Baseline 2023. Powszechny support. Zmienia możliwości CSS. Podstawy: form:has(input:invalid) — formularz z błędnym polem. article:has(img) — artykuł z obrazem. li:has(+ li) — li przed następnym li. Negacja: :not(:has(img)) — bez obrazka. Złożone selektory: section:has(h2 + p) — sekcja z h2 za którym jest p. nav:has(a[aria-current='page']) — nawigacja z aktywnym linkiem. :has(:focus-visible) — kontener z sfocusowanym elementem. React alternatywy: CSS :has vs JavaScript className. :has zmniejsza liczbę event listenerów. Formularze: label:has(input:required) — wymagane pole. input:has(+ .error) — nie działa (sibling nie parent). :has(.error) — kontener z błędem. Karty: .card:has(img:hover) { transform: scale(1.02) } — hover na obrazku zmienia kartę. Warunki mediów: nie można używać :has z media queries bezpośrednio. Ale :has w selektorach absolutnie ok. Zagnieżdżenie: .parent:has(.child:hover) .sibling — zmień sibling gdy child hover. Ukrywanie: .section:has(.empty-state) .controls { display: none }. Dostępność: .form-group:has([aria-invalid='true']) — styluj grupę. Dark mode: html:has([data-theme='dark']) — alternatywa dla html.dark. Performance: :has jest droższy niż proste selektory. Unikaj :has z deepnymi selectorami. Wsparcie: Chrome 105+, Safari 15.4+, Firefox 121+. Polyfill niedostępny (zbyt złożony).

CSS View Transitions API — animacje między stronami i stanami?

View Transitions API: animacje przy zmianach DOM i nawigacji. Dwie wersje: Same-Document (Level 1) i Cross-Document (Level 2, MPA). Same-Document: document.startViewTransition(() => { updateDOM() }). Domyślna animacja: fade 400ms. Natywna — przeglądarka robi screenshot. Animuje opacity. Nazwane transakcje: view-transition-name: hero. Pasujące elementy animują się jako morph. Shrink/grow + fade. Wiele elementów: każdy z unikalną nazwą. Kontener bez animacji: view-transition-name: none. Własna animacja: ::view-transition-old(hero) { animation: slide-out 300ms }. ::view-transition-new(hero) { animation: slide-in 300ms }. Pseudo-elementy: ::view-transition-image-pair(root). ::view-transition-old(name). ::view-transition-new(name). React + View Transitions: flushSync + startViewTransition. startViewTransition(() => { flushSync(() => setState(newState)) }). Lub @astrojs/transitions (Astro). Cross-Document (Level 2): bez JavaScript! @view-transition { navigation: auto }. Animuje między pełnymi stronami. transition:name w HTML. Wsparcie: Same-Document — Chrome 111+, Firefox (partial). Cross-Document — Chrome 126+. Safari nie (2024). Dostępność: prefers-reduced-motion: @media (prefers-reduced-motion) { ::view-transition-group(*) { animation: none } }. Przypadki użycia: filtrowanie listy. Zmiana widoku (list/grid). SPA nawigacja. Karuzele. Tabs. Mastercard layout transitions.

CSS Scroll-Driven Animations — animacje napędzane scrollem?

Scroll-Driven Animations: animacje CSS napędzane scrollem lub widocznością elementu. Bez JavaScript! Bez IntersectionObserver. Bez GSAP ScrollTrigger (dla prostych przypadków). Baseline 2024. Scroll Timeline: animation-timeline: scroll(). scroll(root) — globalny scroll. scroll(nearest) — najbliższy scrollable container. Oś: scroll(block) — wertykalny. scroll(inline) — horyzontalny. Przykład progress bar: @keyframes grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }. .progress { animation: grow auto linear. animation-timeline: scroll(root) }. View Timeline: animation-timeline: view(). Element wchodzi/wychodzi z viewportu. view(block 200px 400px) — marginy. Inset: animation-range: entry 0% entry 100%. exit 0% exit 100%. cover, contain, entry, exit. Sticky reveal: :root { --scale: 0 }. @keyframes reveal { to { --scale: 1 } }. .card { animation: reveal linear both. animation-timeline: view() }. JavaScript: ScrollTimeline API. new ScrollTimeline({scrollSource: el, axis: 'block'}). el.animate(keyframes, {timeline: scrollTimeline}). Przypadki użycia: parallax effects. Sticky header opacity. Section reveal. Image lazy motion. Reading progress. Horizontal scroll gallery. Ograniczenia: CSS animacje tylko — nie JavaScript callbacks. Złożona logika: JavaScript + ScrollTimeline. Wsparcie: Chrome 115+. Firefox, Safari — nie (2024). Polyfill: scroll-driven-animations polyfill (Google). Fallback: IntersectionObserver dla starszych.

Wyślij zapytanie