Loading CSS Style Sheet with Feature Queries

[tntrifonov]

Introduction

Loading a CSS file conditionally is a powerful feature. It allows separating styles in different files for each use case.

It's currently possible to load a style sheet using media queries:

<link rel="stylesheet" media='screen and (max-width: 768px)' href="site.css"/>

This uses the <link> element's media attribute. It detects screen width and acts accordingly.

The Problem

However, we can't detect feature support. This seems like the perfect place for it, yet we can't detect browser features and load the correct style sheet?

Proposal

I propose a new attribute for the <link> and <style> elements with the name supports:

<link rel="stylesheet" supports='(display: grid)' href="site-modern.css"/>

This new attribute supports copies the functionality of the media attribute, however it works with feature queries instead of media queries.

Use Case

Ability to load styles conditionally based on browser features allows developers to split CSS styles into files - this means they can have a modern.css and old-browsers.css, the same way they can have a mobile.css and desktop.css with media queries.

[Crissov]

The big difference between media queries and support queries is that MQ are specified by the CSSWG in a language-agnostic way, while SQ are inherently tied to CSS and therefore are misplaced in an HTML attribute.

[cdoublev]

MQ are specified by the CSSWG in a language-agnostic way

This does not seem obvious as it uses the CSS value definition syntax and the CSS parser:

To parse a <media-query-list> production, parse a comma-separated list of component values, then parse each entry in the returned list as a <media-query>.

[annevk]

cc @whatwg/css

[cdoublev]

Perhaps @Crissov's point was that media queries allow conditional loading of any resource type while loading anything other than a CSS file based on a (CSS value) support query might not be useful.

[cdoublev]

And fwiw, @import "site-modern.css" supports(display: grid); works in almost all browsers today.

[Crissov]

Yes, that was roughly my point. If Support Queries also supported, for instance, image file formats or ECMAScript features, I’d see the point to add them to HTML, but for now they are CSS-only.

Unlike MQ, which have a distinct specification without CSS in its title, <supports-condition> is part of CSS Conditional (like the at rules @media and @supports).

[annevk]

I remember discussing this functionality with the CSS WG at some TPAC so I think there is at least some appetite for this. And how exactly features are organized or what their specification title is at the moment can all be re-arranged if the idea makes sense and has support.