Reconciliace

Flexbox (Flexible Box Layout) je jednorozměrný CSS model rozvržení navržený pro distribuci prostoru a zarovnání prvků v kontejneru podél jedné osy — horizontální nebo vertikální. Vyniká při práci s dynamickými velikostmi obsahu, centrování elementů a tvorbě flexibilních navigačních lišt, řad karet a formulářových rozvržení. Vlastnosti jako `justify-content`, `align-items` a `flex-grow` poskytují detailní kontrolu nad sdílením dostupného prostoru.

Container Queries umožňují CSS stylům reagovat na velikost rodičovského kontejneru místo viewportu prohlížeče, čímž řeší dlouhodobé omezení media queries. Označením elementu jako kontejneru pomocí `container-type` mohou jeho potomci využívat pravidla `@container` k přizpůsobení rozvržení podle rozměrů kontejneru. To umožňuje skutečně znovupoužitelné komponenty — komponenta karty se může přeuspořádat, ať už je v postranním panelu nebo v sekci na celou šířku.

Optimistické UI je vzor, při kterém rozhraní okamžitě zobrazí očekávaný výsledek akce uživatele, ještě než ji server potvrdí. Například tlačítko „lajk" okamžitě ukáže stav po liknutí, zatímco API požadavek probíhá na pozadí. Díky tomu aplikace působí výrazně rychleji a responzivněji. Pokud požadavek na server selže, UI se vrátí do předchozího stavu a uživatele upozorní.

Barevný kontrast je měřitelný rozdíl v jasu mezi textem (nebo UI prvky) v popředí a jejich pozadím. Směrnice WCAG vyžadují minimální kontrastní poměr 4,5:1 pro běžný text a 3:1 pro velký text, aby byla zajištěna čitelnost pro uživatele se zrakovým postižením. Nástroje jako Chrome DevTools, Stark a WebAIM contrast checker pomáhají vývojářům ověřovat shodu během vývoje.

CSS-in-JS je přístup, při kterém se styly píší přímo v JavaScriptových souborech, často společně s komponentami, které stylují. Knihovny jako Styled Components, Emotion a Stitches generují unikátní názvy tříd při sestavení nebo za běhu, čímž eliminují konflikty stylů. Ačkoli tento přístup umožňuje dynamické stylování na základě props a plné zapouzdření, trend se kvůli výkonnostním obavám přesouvá k řešením bez runtime zátěže a utility-first CSS.

Media queries jsou funkce CSS, která umožňuje podmíněně aplikovat styly na základě vlastností zařízení, jako je šířka viewportu, výška, orientace, preference barevného schématu nebo omezení pohybu. Jsou základem responzivního webového designu a umožňují různá rozvržení pro mobily, tablety a desktopy. Moderní media queries také podporují detekci uživatelských preferencí pomocí `prefers-color-scheme` a `prefers-reduced-motion` pro přístupnější zážitky.