Import condition #7658

mirisuzanne · 2022-02-24T18:04:10Z

Draft fix for #7540

At least two implementers are interested (and none opposed):
- …
- …
Tests are written and can be reviewed and commented upon at:
- …
Implementation bugs are filed:
- Chrome: …
- Firefox: …
- Safari: …
- Deno (only for timers, structured clone, base64 utils, channel messaging, module resolution, web workers, and web storage): …
- Node.js (only for timers, structured clone, base64 utils, channel messaging, and module resolution): …

(See WHATWG Working Mode: Changes for more details.)

💥 Error: Wattsi server error 💥

PR Preview failed to build. (Last tried on Jul 18, 2023, 10:57 PM UTC).

More

PR Preview relies on a number of web services to run. There seems to be an issue with the following one:

🚨 Wattsi Server - Wattsi Server is the web service used to build the WHATWG HTML spec.

🔗 Related URL

Parsing MDN data...
Parsing...
Generating HTML variant...
Error: Multiple definitions for term "matches the environment" Parent of first says: "A string matches the environment of the user if it is the empty string, a string   consisting of only ASCII whitespace, or is a media query list that matches the user's   environment according to the definitions given in Media Queries. [MQ]", parent of second says: "A string matches the environment of the user if it is the empty string, a string   consisting of only ASCII whitespace, or is an import condition that matches the user's   environment according to the definitions given in CSS Cascade and Inheritance. "
Error: missing <dfn> for topic "valid import condition or media query list" explicitly from <span> element containing "Valid import condition or media query list"; previous heading contents are "Attributes"
Error count: 2
Saving index-html
Splitting...
Saving index.html
Saving introduction.html
Saving infrastructure.html
Saving common-microsyntaxes.html
Saving urls-and-fetching.html
Saving common-dom-interfaces.html
Saving structured-data.html
Saving dom.html
Saving semantics.html
Saving sections.html
Saving grouping-content.html
Saving text-level-semantics.html
Saving links.html
Saving edits.html
Saving embedded-content.html
Saving images.html
Saving iframe-embed-object.html
Saving media.html
Saving image-maps.html
Saving embedded-content-other.html
Saving tables.html
Saving forms.html
Saving input.html
Saving form-elements.html
Saving form-control-infrastructure.html
Saving interactive-elements.html
Saving scripting.html
Saving canvas.html
Saving custom-elements.html
Saving semantics-other.html
Saving microdata.html
Saving interaction.html
Saving dnd.html
Saving browsers.html
Saving window-object.html
Saving origin.html
Saving history.html
Saving browsing-the-web.html
Saving webappapis.html
Saving dynamic-markup-insertion.html
Saving timers-and-user-prompts.html
Saving system-state.html
Saving imagebitmap-and-animations.html
Saving comms.html
Saving server-sent-events.html
Saving web-messaging.html
Saving workers.html
Saving worklets.html
Saving webstorage.html
Saving syntax.html
Saving parsing.html
Saving named-characters.html
Saving xhtml.html
Saving rendering.html
Saving obsolete.html
Saving iana.html
Saving indices.html
Saving references.html
Saving acknowledgements.html
Generating DEV variant...
Error: Multiple definitions for term "matches the environment" Parent of first says: "A string matches the environment of the user if it is the empty string, a string   consisting of only ASCII whitespace, or is a media query list that matches the user's   environment according to the definitions given in Media Queries. [MQ]", parent of second says: "A string matches the environment of the user if it is the empty string, a string   consisting of only ASCII whitespace, or is an import condition that matches the user's   environment according to the definitions given in CSS Cascade and Inheritance. "
Error count: 1
Splitting...
Saving index.html
Saving introduction.html
Saving infrastructure.html
Saving common-microsyntaxes.html
Saving urls-and-fetching.html
Saving common-dom-interfaces.html
Saving structured-data.html
Saving dom.html
Saving semantics.html
Saving sections.html
Saving grouping-content.html
Saving text-level-semantics.html
Saving links.html
Saving edits.html
Saving embedded-content.html
Saving images.html
Saving iframe-embed-object.html
Saving media.html
Saving image-maps.html
Saving embedded-content-other.html
Saving tables.html
Saving forms.html
Saving input.html
Saving form-elements.html
Saving form-control-infrastructure.html
Saving interactive-elements.html
Saving scripting.html
Saving canvas.html
Saving custom-elements.html
Saving semantics-other.html
Saving microdata.html
Saving interaction.html
Saving dnd.html
Saving browsers.html
Saving window-object.html
Saving origin.html
Saving history.html
Saving browsing-the-web.html
Saving webappapis.html
Saving dynamic-markup-insertion.html
Saving timers-and-user-prompts.html
Saving system-state.html
Saving imagebitmap-and-animations.html
Saving comms.html
Saving server-sent-events.html
Saving web-messaging.html
Saving workers.html
Saving worklets.html
Saving webstorage.html
Saving syntax.html
Saving named-characters.html
Saving xhtml.html
Saving obsolete.html
Saving indices.html
Saving references.html
Saving acknowledgements.html
Generating SNAP variant...
Error: Multiple definitions for term "matches the environment" Parent of first says: "A string matches the environment of the user if it is the empty string, a string   consisting of only ASCII whitespace, or is a media query list that matches the user's   environment according to the definitions given in Media Queries. [MQ]", parent of second says: "A string matches the environment of the user if it is the empty string, a string   consisting of only ASCII whitespace, or is an import condition that matches the user's   environment according to the definitions given in CSS Cascade and Inheritance. "
Error: missing <dfn> for topic "valid import condition or media query list" explicitly from <span> element containing "Valid import condition or media query list"; previous heading contents are "Attributes"
Error count: 2
Saving index-snap

If you don't have enough information above to solve the error by yourself (or to understand to which web service the error is related to, if any), please file an issue.

mirisuzanne · 2022-03-15T17:18:24Z

@domenic The build is now working, as the remaining mentions of media-condition were updated. At this point, I think CSSOM is the main remaining issue – and then I can start working on implementer interest/bugs/tests. I'll also see about getting a prototype implementation in place.

If I understand right, the CSSOM update will require changes in the CSSOM spec as well, so I'm looking into that. Happy for any other feedback you have here.

domenic

I found a few nits, plus one larger question about the scope of this change; those are noted inline.

But indeed, the biggest missing piece is updating CSSOM. I don't really know much about those specs but it looks like the following pieces are relevant and probably will need updates:

https://drafts.csswg.org/cssom/#concept-css-style-sheet-media does not need changes but will start being given import condition strings instead of media query strings by HTML. That leads to changes to the following sections:
https://drafts.csswg.org/cssom/#media-queries needs to handle import conditions instead of media queries. (But, we cannot change the names MediaList and mediaText.)
https://drafts.csswg.org/cssom/#serialize-a-css-rule needs to serialize import conditions in import rules (this is independent of this HTML change and seems like just something that was missed by the CSSWG?)

source

domenic · 2022-03-22T18:31:01Z

source

@@ -13788,8 +13789,7 @@ interface <dfn interface>HTMLLinkElement</dfn> : <span>HTMLElement</span> {
  data-x="external resource link">external resource links</span>.</p>

  <p>The <dfn element-attr for="link"><code data-x="attr-link-media">media</code></dfn> attribute
-  says which media the resource applies to. The value must be a <span>valid media query
-  list</span>.</p>
+  says which media the resource applies to. The value must be a <span>valid import condition</span>.</p>


Should we update "says which media the resource applies to"? I'm personally not sure. The sentence here is supposed to be a statement of fact so it doesn't need to be super-accurate. But I feel like with the new value space maybe the current sentence becomes inaccurate?

domenic · 2022-03-22T18:32:55Z

source

@@ -14450,7 +14450,7 @@ interface <dfn interface>HTMLMetaElement</dfn> : <span>HTMLElement</span> {
  name-value pair is the empty string.</p>

  <p>The <dfn element-attr for="meta"><code data-x="attr-meta-media">media</code></dfn> attribute
-  says which media the metadata applies to. The value must be a <span>valid media query list</span>.
+  says which media the metadata applies to. The value must be a <span>valid import condition</span>.


So to double-check, do we have implementer buy-in for changing not only link and style, but also meta and source? I think it's best if we change them all, for consistency. But it is extra work, and some implementers might not be excited about doing that extra work so that you can do conditional meta theme colors.

The layer syntax would only have meaning in the link & style elements - and is only needed on the former (the CSS syntax can be used directly inside style). Other import conditions, such as support queries, may be useful on all three. We could narrow the scope of this PR to only the essential change, and expand later if desired?

What do implementers want to do here?

Even for the link element, media can be specified and is processed for preload in addition to stylesheet. Do we want to check the value of the as attribute for preloads and decide between media query list or import condition, or always treat as import condition for link?

For images, videos, and <meta name=theme-color>, I think it doesn't make much sense to support supports() since they don't import CSS stylesheets, but I don't feel strongly about it.

We also have the Link HTTP header which per spec seems to always process the media header attribute regardless of rel (https://html.spec.whatwg.org/multipage/semantics.html#process-link-headers step 5). Link supports preconnect and preload rels per spec (not stylesheet).

zcorpan · 2023-09-14T23:02:02Z

For <link rel=stylesheet media=...> the media attribute is used in the CSSOM "create a CSS stylesheet" steps and a MediaList object gets created from the attribute's value, where that vaule is parsed as a media query list.

Meanwhile, for @import, the CSSImportRule interface has a supportsText attribute for the <supports-condition> part.

I think CSSOM needs to change to allow creating stylesheets with supports conditions, and changing the HTML media attribute needs to update both the MediaList's mediaText and the StyleSheet's supportsText. I'll file an issue for CSSOM.

(Maybe also CSSStyleSheetInit (options for constructable stylesheets) should support supports, but that's not blocking this PR.)

Edit: filed w3c/csswg-drafts#9361

mirisuzanne added 4 commits February 14, 2022 12:55

Update media attribute to support all import conditions

a7974fa

Merge branch 'whatwg:main' into import-condition

679fe46

Merge branch 'whatwg:main' into import-condition

a02d7ef

Update media-contition references so they point to import-condition

e8275b5

mirisuzanne mentioned this pull request Mar 14, 2022

[css-cascade] Provide an attribute for assigning a <link> to a cascade layer w3c/csswg-drafts#5853

Open

domenic reviewed Mar 22, 2022

View reviewed changes

domenic added topic: style topic: link labels May 4, 2022

domenic mentioned this pull request May 4, 2022

Enable preload to download variable fonts only in supporting browsers #7888

Open

faceless2 mentioned this pull request Jun 11, 2022

[css-cascade-6] Add ability to scope rules from an imported stylesheet w3c/csswg-drafts#7348

Open

This was referenced Jul 18, 2023

[cssom] Handle import conditions instead of media queries w3c/csswg-drafts#9087

Open

[cssom] Serialize import conditions in import rules w3c/csswg-drafts#9088

Open

mirisuzanne added 3 commits July 18, 2023 14:59

Plural import conditions

5d9d2de

Revert statement of fact

011aca7

Use media query lists in non-link media attributes

ff457c8

This was referenced Sep 14, 2023

<link rel=preconnect> doesn't support the media attribute #9737

Open

[cssom] Add supportsText to StyleSheet and handle HTML <link media="supports()"> w3c/csswg-drafts#9361

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Import condition #7658

Import condition #7658

Import condition #7658

Are you sure you want to change the base?

Import condition #7658

Conversation

💥 Error: Wattsi server error 💥

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment