Frontend & UI
7 posts tagged #css on DiCodeWeb, from fundamentals to production, newest first.
7 postsUpdated Sep 21, 2026
In 2026 the browser ships primitives that used to require Floating UI, Radix or an animation library. This post covers popover, invoker commands, anchor positioning and View Transitions: what they do, how to combine them, where support really stands, and where a library is still the right call.
How View Transitions snapshot the page and build a pseudo-element tree, startViewTransition in an SPA, transitions between documents, view-transition-name, view-transition-class and types, a list-to-detail shared element, reduced motion, performance traps, and using React's ViewTransition component in Next.js 16.
Why CSS in large projects always drifts toward !important, how @layer changes who wins the cascade, traps like unlayered styles and the !important inversion, @scope with donut scopes and proximity, native nesting gotchas, and a step-by-step path for moving a legacy codebase into layers.
Splitting tokens into three tiers, naming by purpose, building light/dark themes with prefers-color-scheme plus a user override without a flash, color-scheme, mapping tokens into Tailwind v4's @theme, contrast checks and common mistakes.
How fonts affect LCP and CLS, choosing font-display, preloading the critical font, subsetting with unicode-range for Vietnamese, variable fonts, self-hosting versus CDNs, fallback metric overrides and next/font in Next.js.
Why viewport media queries fall short for reusable components, how to use container-type, named containers and cqi units, how to combine them with clamp() and :has(), plus a complete responsive card and a fallback strategy.
Normal flow, block vs inline, flexbox (one dimension, content-out) vs grid (two dimensions, layout-in), intrinsic sizing, and why min-width: 0 rescues overflowing flex items — so you write layout from understanding instead of trying properties until it works.