Making Sense of Modern CSS Priorities
CSS has moved far beyond the days of hacky workarounds. With container queries, cascade layers, nesting, the :has selector, grid and subgrid, and new color spaces, the language is more capable than ever. Still, some of its foundational concepts — the cascade and specificity — remain a source of confusion for many developers.
Andy Bell's primer on the cascade and specificity breaks down how the browser decides which CSS rules win when multiple declarations compete. The guide demystifies specificity scoring and uses practical examples to show why certain property types get prioritized over others. It's a useful mental model for predicting whether a given rule will actually apply — no guessing required.
Using CSS as a Testing Tool
CSS selectors have grown powerful enough that they can now serve as a testing mechanism for HTML structure. Heydon Pickering has documented how to test HTML with CSS, covering accessibility checks, HTML bloat detection, and general usability validation — all without writing a line of JavaScript.
CSS-based testing is particularly handy when you're working directly in the browser and prefer visual regression inspection over command-line output. It also works well in client scenarios where you don't have access to their stack: hand over a test stylesheet, and the client can identify problematic patterns on their own, without needing you onboarded to their toolchain.
Self-Modifying Custom Properties
The CSS custom properties specification doesn't allow a property to reference itself, a limitation with plenty of real-world use cases. Lea Verou proposed an inherit() function back in 2018, and the CSSWG added it to the specs in 2021 — though it hasn't been formally edited in. Roman Komarov has found a workaround that approximates the behavior using container-style queries.
The technique reads the previous state of a custom property through a style query. It's useful for cycling through hues without maintaining a static list, visually aligning border-radius values, or nesting menu items. The approach remains strictly experimental and shouldn't ship to production — style queries will likely gain broad browser support well before inherit() does.
The Subtle Side of Hanging Punctuation
The hanging-punctuation property extends opening quotes and other punctuation marks into the margin, producing cleaner text blocks. It's currently supported only in Safari, but that doesn't mean you should avoid it. As a progressive enhancement, unsupported browsers simply ignore it while Safari users get the extra polish.
There is a catch, though. Jeremy Keith noticed an unintended side effect when applying hanging-punctuation globally: it also affects form fields. If text inside an input or textarea starts with a quotation mark, that character gets pushed outside the visible field area and becomes hidden. The fix is straightforward — add input, textarea { hanging-punctuation: none; } — and it prevents disappearing quotation marks in form controls.
When aspect-ratio Lets You Down
The aspect-ratio property is invaluable for fluid layouts, letting you create square elements or match a 16:9 video frame without hard-coding dimensions. Most of the time it just works. But it can break, and Chris Coyier has documented three common causes.
One issue is simply setting both dimensions — which might seem obvious, but it becomes confusing when a dimension is set indirectly from an unexpected source. Stretching behavior and content that forces height can also produce unexpected results. Knowing these failure modes helps you debug aspect-ratio issues quickly when they appear.
The Masonry Layout Debate
CSS Grid handles a wide range of layouts, but masonry-style arrangements remain out of reach. The CSS Working Group is currently weighing two proposals and wants input from real-world developers and designers before deciding.
One approach would extend the existing CSS Grid spec to accommodate masonry. The other would introduce a dedicated display: masonry value as its own display type. Jen Simmons has summarized the key points of the discussion. Rachel Andrew's post on the topic explains why the Chrome team has reservations about folding masonry into the grid specification and clarifies what the alternate proposal would offer.
