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.
Category: Front-end
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.
Why a $50k design system culture still lost to one-off CSS
A SaaS team had Storybook, Figma tokens and a dedicated Slack channel, and still shipped one-off CSS for every feature. Strict linting made it worse. A contribution bridge is what finally moved them.
Twelve fade-in keyframes in one stylesheet, and the fix
One WooCommerce stylesheet had twelve @keyframes definitions for a single fade-in, spelled three different ways. Here is the tokens file that replaced them, and how reduced-motion support fits in at the token level.
Modern CSS features that let me delete a client’s JavaScript
A client’s WooCommerce site shipped a JavaScript bundle whose main job was resizing a textarea. field-sizing does it in one line. Here are the modern CSS features that are baseline now, and the code they let you delete.
Debugging the Gamepad API with CSS cascade layers
Console logging the Gamepad API at 60 frames per second tells you nothing useful. Here is the visual debugger I built instead, with its styles isolated in a CSS cascade layer so they stop fighting the theme.
How to split text into letters without breaking screen readers
CSS still has no :nth-letter selector, so letter-by-letter text effects mean splitting a header into spans, which screen readers then read out one letter at a time. Here is the ARIA markup and the PHP helper that avoid that.
Fixing link underline alignment with text-decoration-inset
A client kept flagging link underlines that ran a couple of pixels past the letters. The CSS property text-decoration-inset clips them without pseudo-element hacks, and it animates on hover. Firefox only for now.
Overlapping CSS avatars that respond to their container
A Meet the Team row of overlapping avatars broke every time the client added a person. Here is the CSS that works out the negative margin itself, using sibling-count() and container query units.