Programming — HTML — CSS — November 20th, 2025

Should We Even Have :closed?
For the past few months, I've been writing a lot of entries on pseudo-selectors in CSS, like ::picker() or ::checkmark. And, in the process, I noticed I tend to use the :open pseudo-selector a lot in my examples — and in my work in general.
November 20, 2025 — Source

Why Headings Are Important in HTML: Structure, Accessibility, and SEO
In HTML, headings do far more than add visual style to a page. Misusing or not using headings in HTML hurts usability, accessibility, and search performance.
November 20, 2025 — Source

Programming — HTML — CSS — November 13th, 2025

The Range Syntax Has Come to Container Style Queries and if()
The range syntax isn't a new thing. We're already able to use it with media queries to query viewport dimensions and resolutions, as well as container size queries to query container dimensions. Being able to use it with container style queries — which we can do starting with Chrome 142 — means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the attr() function.
November 13, 2025 — Source

Programming — HTML — CSS — November 7th, 2025

Smashing Animations Part 6: Magnificent SVGs With And CSS Custom Properties
SVG is one of those web technologies that's both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements that are hidden in the Shadow DOM.
November 7, 2025 — Source

Programming — HTML — CSS — November 6th, 2025

Explaining the Accessible Benefits of Using Semantic HTML Elements
This is one of those code smells that makes me stop in my tracks because we know there's a semantic element that we can use instead. There's a whole other thing about conflating anchors (e.g., ) and buttons, but that's not exactly what we're talking about here, and we have a great guide on it.
November 6, 2025 — Source

Programming — HTML — CSS — October 24th, 2025

Chrome DevTools MCP Server : AI Web Development Just Got Easier
What if you could eliminate one of the most frustrating bottlenecks in web development with a single tool? For years, developers have wrestled with the inefficiency of manually transferring CSS tweaks made in the browser into their codebase, a tedious, error-prone process that disrupts creative flow. Enter the Chrome DevTools MCP server, a new solution from Google that promises to transform how we design, debug, and test web applications. With features like persistent CSS updates, automated UI interactions, and seamless integration with design platforms like Figma, this tool is poised to become a fantastic option for modern developers.
October 24, 2025 — Source

CSS Animations That Leverage the Parent-Child Relationship
Modern CSS has great ways to position and move a group of elements relative to each other, such as anchor positioning. That said, there are instances where it may be better to take up the old ways for a little animation, saving time and effort.
October 24, 2025 — Source

Programming — HTML — CSS — October 20th, 2025

Google Chrome & Iframe `allow` Permissions Problems
At CodePen we have Embedded Pens which are shown in an