Styling the ::search-text pseudo-element in Chrome 144
Chrome 144 added the ::search-text pseudo-element, which finally lets you style find-in-page highlights. Relative color syntax keeps matches readable on dark themes and saturated backgrounds.
Category: Front-end
CSS custom-media: name your media queries once
Firefox Nightly has a flag for @custom-media, the at-rule that lets you alias a media query behind a name and reuse it. Notes on what it fixes, how Open Props packages ready-made queries, and how to write the syntax today with postcss-custom-media.
A responsive hexagon grid without the CSS hacks
A honeycomb layout that keeps its geometry without floats, magic numbers or a JavaScript grid calculator. corner-shape handles the bevel, cos(30deg) sets the aspect ratio, and sibling-index() works out which rows need the half-item shift.
Design intent: why pixel perfect layouts keep breaking
Matching a 1440px Figma file coordinate for coordinate produces CSS full of magic numbers that breaks on the first foldable phone or bumped font size. What to agree on with designers instead: tokens, fluid units, and rules about behavior.
The DailyDev Squad I use instead of a pile of RSS feeds
Keeping up with CSS is a filtering problem more than a reading problem. I traded years of RSS folders for the I Heart CSS squad on DailyDev, and this is what a curated feed does that a raw aggregator never did.
CSS scroll-driven animations instead of 50KB of JavaScript
Notes from the Web Directions Dev Summit in Sydney, where the argument was that CSS scroll-driven animations make most JS scroll libraries pointless. Includes the CSS, and why prefers-reduced-motion is not optional.
Anchor positioning and @scope just went Baseline
Chrome 144 and Firefox 147 moved anchor positioning and @scope to Baseline, so tooltips and style isolation no longer need a JS library. Also here: the Temporal API in Chrome, the dead HTML document outline, and using your OS as a CMS.
CSS relative colour and OKLCH for WordPress themes
Hand-calculated HEX palettes break the moment a base color changes. This walks through CSS Relative Colour and OKLCH in WordPress themes, and how @property lets you animate one channel at a time.
CodePen slideVars turns CSS variables into sliders
CodePen slideVars reads the CSS custom properties on :root and builds a slider panel from them, so an interactive demo no longer needs hand-wired range inputs. Covers slideVars.init(), the config object for scoped variables, and the decimal-step bug I hit.
The CSS :drag pseudo-class and the JavaScript it replaces
Notes on the proposed CSS :drag pseudo-class and ::drag-image pseudo-element, and how they replace the dragstart and dragend listeners we currently use to style drag states in WordPress UIs.