Nowoczesny CSS 2024

CSS Container Queries — responsywność oparta na kontenerze nie viewport?

Container Queries: media queries ale dla kontenera rodzica. Nie viewport. Komponent sam decyduje o wyglądzie. Baseline 2023 — wszystkie przeglądarki. Syntax: .card-wrapper { container-type: inline-size. container-name: card }. @container card (min-width: 400px) { .card { flex-direction: row } }. container-type: inline-size — sprawdza szerokość. size — szerokość i wysokość. normal — tylko style queries. Bez nazwy: @container (min-width: 600px) — sprawdza najbliższy kontener. Shorthand: container: card / inline-size. Units kontenerowe: cqw — 1% szerokości kontenera. cqh — 1% wysokości kontenera. cqi — inline direction. cqb — block direction. cqmin/cqmax. Przykład: font-size: clamp(1rem, 3cqw, 2rem). Style Queries (2024): @container style(--type: featured) { .card { background: gold } }. Sprawdza CSS Custom Properties. Conditional classes bez JS. Container Queries vs Media Queries: MQ — layout strony, viewport. CQ — komponent, reużywalność. Design system benefits: Card niezależny od kontekstu. Sidebar automatycznie responsywny. Grid item dostosowuje się. Polyfill: container-query-polyfill (Google Chrome Labs). Baseline support: Chrome 105+, Firefox 110+, Safari 16+.

CSS @layer — Cascade Layers dla organizacji CSS?

CSS Cascade Layers (@layer): kontrola kaskady. Zapobieganie specificity wars. Baseline 2022 — wszystkie przeglądarki. Definicja warstw: @layer base, components, utilities. Kolejność ma znaczenie! Wyższy w liście = niższy priorytet. Warstwy: @layer base { * { box-sizing: border-box } h1 { font-size: 2rem } }. @layer components { .btn { padding: .5rem 1rem } }. @layer utilities { .mt-4 { margin-top: 1rem } }. Specificity: warstwy wyżej w hierarchii zawsze wygrywają. Niezależnie od selektora! .very-specific-selector w base przegrywa z p w utilities. Nie-warstwowe style: wygrywają zawsze. Ważność warstwowa: wyżej dodana = niższy priorytet. Odwrotnie niż !important. Import z warstwą: @import url('./reset.css') layer(base). Zagnieżdżone: @layer components { @layer forms { input { ... } } }. Dostęp: @layer components.forms. Framework integracja: Tailwind CSS @layer base, components, utilities wbudowane. Odpowiada koncepcji warstw. Custom layers: @layer my-overrides { Tailwind styles z mniejszym priorytetem }. Reordering: @layer third-party, my-styles — moje wygrywają. Kiedy @layer: duże projekty CSS. Framework + custom styles. Design system. Reset CSS izolacja.

CSS Nesting — natywne zagnieżdżanie bez preprocesora?

CSS Nesting (native): bez Sass/Less/PostCSS. Baseline 2023. Wszystkie nowoczesne przeglądarki. Podstawy: .card { color: black. .title { font-size: 1.5rem }. &:hover { background: gray }. &.active { border: 2px solid blue } }. & selector: odnosi się do rodzica. Wymagany dla elementów. .parent { div { ... } } — ok od Chrome 120+ (bez &). &:hover — hover na rodzicu. & + .sibling — selektor po. .other & — gdy inside .other. Pseudo-elementy: .btn { &::before { content: '' } }. Media queries: .card { width: 100%. @media (min-width: 768px) { width: 50% } }. Container queries: .card { @container (min-width: 400px) { flex-direction: row } }. Zagnieżdżanie Sass vs Native: Sass: & bez spacji = bezpośrednio. Native: & = parent exactly. Sass &-modifier = .parent-modifier — w native to nie działa. &.modifier — ok (z spacją różnica). PostCSS plugin: postcss-nesting — transpilacja dla starszych. @at-rule nesting: poprawne zagnieżdżanie reguł. Przykład kompleksowy: .nav { display: flex. & ul { list-style: none. & li { padding: .5rem. & a { color: inherit. &:hover { text-decoration: underline } } } } }. Kiedy CSS Nesting: nowoczesne projekty. Nie potrzebujesz Sass. Chcesz mniejszy toolchain.

@scope CSS — scoped styles bez Shadow DOM?

@scope: style ograniczone do zakresu. Bez Shadow DOM. Bez CSS Modules. Baseline 2024 (Chrome 118+, wkrótce Firefox). Składnia: @scope (.card) { p { color: blue } h2 { font-weight: bold } }. Tylko p i h2 wewnątrz .card. Wykluczanie: @scope (.card) to (.nested-card) { styles } — nie dotykaj .nested-card dzieci. Lower boundary. Donut scope: @scope (.card) to (.footer) { h3 { ... } } — h3 w .card ale nie w .footer. Proximity specificity: @scope działa na bliskość, nie specificity. Bliższy kontener wygrywa. vs CSS Modules: Modules — build time class renaming. @scope — runtime, bez build. @scope — natywny CSS. Modules — Webpack/Vite required. vs Shadow DOM: Shadow DOM — pełna enkapsulacja, slot. @scope — lżejsze, bez custom elements. :scope pseudo-class: selectuje korzeń @scope. @scope (.card) { :scope { border: 1px solid } }. Przykład komponent: @scope (.product-card) to (.product-card .inner-card) { h2 { color: var(--brand) }. img { border-radius: 8px }. .price { font-weight: bold } }. Framework integracja: Tailwind — nadal lepszy dla utility classes. @scope — dla component-specific overrides. Polyfill: nie ma dobrego — poczekaj na Firefox. Obsługa: Chrome 118+, Safari 17.4+, Firefox 2024.

CSS View Transitions, Scroll-Driven Animations i nowe funkcje 2024?

View Transitions API: płynne animacje między stanami. SPA routing. Document transitions. startViewTransition(() => { updateDOM() }). CSS: ::view-transition-old(root) — stary stan. ::view-transition-new(root) — nowy stan. Named: view-transition-name: hero-image. Animacje z named: ::view-transition-old(hero-image). ::view-transition-new(hero-image). Astro wbudowane. React Router 7 eksperymentalne. Scroll-Driven Animations: animacje bazowane na scroll. Bez JS scrollowania. animation-timeline: scroll(). animation-timeline: view(). scroll() — viewport scroll. view() — gdy element w widoku. @keyframes fade { from { opacity: 0 } to { opacity: 1 } }. .element { animation: fade linear both. animation-timeline: view() }. Scroll progress bar: .progress { width: 100%. animation: grow-bar linear both. animation-timeline: scroll(root) }. @keyframes grow-bar { from { transform: scaleX(0) } }. Prefers-reduced-motion: zawsze uwzględnij. @media (prefers-reduced-motion) { animation: none }. CSS anchor positioning: popover relatywny do anchora. anchor() function. position-anchor: --my-anchor. Inne nowości 2024: color-mix() — mieszanie kolorów. color-mix(in oklch, red 50%, blue). light-dark() — automatyczny dark mode. :has() — parent selector. :is(), :where() — grupowanie. @starting-style — animacje przy wstawieniu do DOM. popover attribute — wbudowane popovery. interpolate-size: allow-keywords — animuj height: auto.

Wyślij zapytanie