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.
Tag: Block Styles
January 2026 wallpapers: a clean desktop to start the year
A new year is a decent excuse to refactor your desktop. Three picks from the January 2026 wallpaper collection, plus the CSS I use when an image like that becomes a hero background.
Going Beyond Size: Using Scroll-State and Style Container Query
CSS Container Queries have evolved far beyond simple size checks. From scroll-state detection in Chrome 144 to anchored queries for tooltips, the spec is replacing heavy JavaScript hacks with native browser performance. Ahmad Wael breaks down why size queries were just the start and how state-based querying is the future of WordPress component design.
How To Master Simple Ambient Animations Fast
Stop using heavy JS libraries for simple movement. Ahmad Wael explains how to master ambient animations using lightweight CSS and SVG techniques. Learn to identify natural motion cues, optimize for performance, and respect accessibility settings while bringing your static designs to life with organic, buttery-smooth background animations that don’t tank your LCP.
How To Master Component Variants With This Simple Hack
Stop the nightmare of inconsistent UI. Ahmad Wael explains how to leverage Component Variants in Penpot to build scalable, production-ready design systems. Learn why grouping logic is better than just using CSS variables and how to sync your tokens with code-friendly structures like the W3C DTCG format for faster dev handoff.
How To Master Clean SVG CSS Custom Properties
SVG symbols are powerful for performance, but the Shadow DOM often blocks standard CSS animations. Ahmad Wael explains how to use SVG CSS Custom Properties as a bridge to animate reusable symbols independently. Learn to build lightweight, maintainable graphics without duplicating code or bloating your WordPress site’s DOM.
How to optimize holiday visuals for performance
When a client wants to add “holiday magic” with high-res winter desktop wallpapers, it often turns into a performance nightmare. Senior developer Ahmad Wael shares his trenches-tested approach to optimizing seasonal site assets without destroying your Core Web Vitals or LCP scores. Learn why 4K PNGs are the enemy of fast sites.
How To Create Perfect Adaptive SVGs With Symbols
Stop fighting with rigid vector graphics. Ahmad Wael explains how to use SVG symbols and CSS media queries to build high-performance, Adaptive SVGs that look perfect on any screen. Learn the senior-level trick for managing complex illustrations without the performance bloat of duplicated assets or heavy JavaScript swaps.
Transform Broken Styles With Simple CSS Cascade Layers Right Now
Inheriting a messy CSS project with specificity issues is a developer’s nightmare. Ahmad Wael explains how to pragmatically integrate CSS Cascade Layers to de-tangle legacy code, handle !important inversions, and build a maintainable style architecture that stops the specificity wars once and for all.
Fixing Stiff UI: Natural SVG Animations the Easy Way
A few months ago, a client came to me with a high-end WooCommerce build. They wanted “personality.” Specifically, they wanted the UI to feel alive—nothing…