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.