search

whatwg / html

HTML Standard
https://html.spec.whatwg.org/multipage/
Other
8.18k stars 2.71k forks source link

Loading CSS Style Sheet with Feature Queries #6064

Open tntrifonov opened 4 years ago

tntrifonov commented 4 years ago

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 commented 8 months ago

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 commented 3 weeks ago

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 commented 3 weeks ago

cc @whatwg/css

cdoublev commented 3 weeks ago

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 commented 3 weeks ago

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

Crissov commented 2 weeks ago

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 commented 2 weeks ago

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.