A proposal for context aware CSS selectors

— Updated

Ian Storm Taylor is right, media queries are a hack; they’re just one tool that we need to make the web and our sites as universal as possible. We can’t afford to let ourselves or our clients think that they are a silver bullet, they’re only the start. We need smarter tools to enable us to create truly modular, interoperable CSS components. Making heavy-handed adjustments based on the viewport size works for site layout and large content pieces but it’s not robust enough to handle re-usable modules used in different contexts.

From an authoring point of view it’s clear that using media queries for content-level micro-breakpoints is wrong because we must adjust to a global scope to use them. Tools like Sass get around this uncomfortable fact by allowing nestable media queries, making the @media declaration a language feature which is more author-friendly but still dirty.

/* Plain CSS */
.foo { ... }

@media all and screen(max-width:640px) {
	.foo { ... }
}

/* SCSS nested media queries */
.foo {
	@media all and screen(max-width:640px) { ... }
}

I don’t think it’s a huge jump to make selectors context-aware (Edit: Tab Atkins explains why it is). Level 3 CSS selectors already supports a range of functional pseudo-classes such as :not() and level 4 is proposing extended functionality plus a new :matches() selector. There have been similar proposals for adding media queries as selectors—which is neat—but I propose that the existing pseudo-classes be extended to support media query-like expressions, the only difference being that we are not checking media features but the space available for the matching element.

/* Extending :matches() and :not() selectors */
.module:matches((min-width: 300px) and (max-width: 640px)) { ... }
.module:not((min-width: 1280px)) { ... }

As has been the case with web development from the start, we’ve re-appropriated the tools we have (think table layouts, floats etc.) to suit our needs and extending existing functional selectors to accept property expressions seems like a solid step forwards.

comments powered by Disqus

A photo of Matt Hinchliffe

About Me

I'm a 29 year old web developer building new stuff at the Financial Times based in London. I specialise in crafting scalable, performance-driven code, tackle accessibility issues and keep an opinionated interest in the latest hotness. I like my tea robustly brewed, white and with no sugar, thanks!