Tag
20 articles tagged #CSS.
P.01The :open pseudo-class, Baseline since May 2026, styles <details>, <dialog>, and <select> in their expanded state with one selector. No JS classes needed.
P.02The CSS if() function lets a single property branch on media, container, or feature conditions. What it does, the syntax, and where it still can't replace JS.
P.03One CSS property finally styles the browser's own select, options and icons included, with no dropdown library. The syntax, an example, and real support.
P.04column-rule now works in grid and flexbox, and row-rule joins it. Draw dividers between items in two lines of CSS, plus what to do about support.
P.05Chrome 147, Firefox 146, and Safari 26 all ship contrast-color(), which picks black or white text to meet WCAG AA on any background. Syntax and fallback.
P.06Chrome 152 shipped CSS pseudo-classes matching video and audio state, a CPU Performance API for device tiers, and the start of the end for client-side XSLT.
P.07Chrome 152 added :playing, :paused, :buffering, and :muted as real pseudo-classes. A runnable custom player built on them, plus the JS fallback.
P.08@scope applies CSS only inside part of the DOM, with a lower bound that excludes nested components. No BEM, no Shadow DOM. Syntax and where it falls short.
P.09field-sizing: content reached Baseline in June 2026. The one line of CSS that replaces the scrollHeight hack for auto-growing textareas, and where it stops.
P.10Frontend developer means different things to different teams. The core screen: HTML semantics, CSS fundamentals, Core Web Vitals, and skill beyond React.
P.11CSS @layer lets you set explicit priority between your reset, base, components, and utilities. Here's how cascade layers work in production stylesheets.
P.12Three different approaches to styling a web application — Tailwind, CSS Modules, and CSS-in-JS libraries — and the team contexts where each one actually makes sense.
P.13Three animation options dominate web development right now: CSS, Framer Motion, and GSAP. Here's how to pick the right one for your project and why the native platform is better than you might expect.
P.14The View Transitions API and scroll-driven animations are now baseline in every major browser. Here's what they replace and working code for both.
P.15Media queries ask 'how wide is the viewport?' Container queries ask 'how wide is my parent?' That shift changes how you think about reusable components.
P.16Position one element relative to another in pure CSS. No Popper.js, no positioning logic, no recalculation on scroll. How anchor positioning works.
P.17Tailwind v4 moves configuration from JavaScript to CSS, drops the content array, and ships a faster engine. Here's what the breaking changes actually mean for a real project migration.
P.18CSS has changed more in the last 2 years than the previous 10. Here is what is production-ready, what to adopt now, and what you can stop using.
P.19Dark mode is expected by users, but implementing it correctly involves more than swapping colors. Here's how to build a robust, accessible dark mode that users will love.
P.20Mobile-first design in 2026 means designing for device capabilities, context, and user preferences, not just responsive breakpoints and screen size.