Bug 203073 – Inline stylesheet with a non-standard media attribute value is not parsed

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[Jouni Koivuviita]

The following code works in Chrome and Firefox – a CSSStyleSheet object is printed in the console. In Safari, undefined is printed.


<style media="foobar">
  foo {
    color: red;
  }
</style>


<script>
  console.log(document.styleSheets[0]);
</script>



Using a non-standard media value for the <link> element or for an @import statement works the same in all three browsers, and document.styleSheets contains the parsed stylesheet(s).


<link rel="stylesheet" href="some-stylesheet.css" media="foobar">

<style>
  @import "some-stylesheet.css" foobar;
</style>

[Alexey Proskuryakov]

I understand that this is a difference in behavior with other browsers. But it's not obvious if this is something that needs to be fixed, as unsupported media values seem useless.

What is the use case for which you need to do this?

[Radar WebKit Bug Importer]

<rdar://problem/56437005>

[Jouni Koivuviita]

Yeah, they seem quite useless. But the side-effect of an unsupported media query is that it makes the styles inert for the document/shadowRoot, yet they are still parsed and accessible through the DOM. That makes them interesting to me.

My use case is a workaround to the lack of sufficient native styling APIs for web components (shadow DOM). I’ve written about it more here: https://v0-4--jelements.netlify.com/util/stylable

Basically, if I have a custom element <my-component> with a shadow root, I would be able to write styles for it like so:

@media my-component {
  .some-class-inside-the-shadow-dom {
    ...
  }
}


To me, the spec seems a quite clear how the values should be handled, when speaking of values that start the media query (”media type”).

https://drafts.csswg.org/mediaqueries-3/#background


> Future versions of HTML may introduce new values and may allow parameterized values. To facilitate the introduction of these extensions, conforming user agents must be able to parse the media attribute value as follows:
> 
> The value is a comma-separated list of entries. For example,
>  media="screen, 3d-glasses, print and resolution > 90dpi"
> 
> is mapped to:
>  "screen"
>  "3d-glasses"
>  "print and resolution > 90dpi"
> 
> Each entry is truncated just before the first character that isn't a US ASCII letter [a-zA-Z] (Unicode decimal 65-90, 97-122), digit [0-9] (Unicode hex 30-39), or hyphen (45). In the example, this gives:
>  "screen"
>  "3d-glasses"
>  "print"

[Ahmad Saleem]

I am unable to reproduce this bug in Safari 15.6 on macOS 12.5 using test case from Comment 0 and changed into below JSFiddle:

Link - https://jsfiddle.net/hab9pgeu/show

I am getting "CSSStyleSheet" value in Console on Safari as below:

_________

CSSStyleSheet

cssRules: CSSRuleList {0: CSSStyleRule, length: 1, item: function}

disabled: false

href: "https://fiddle.jshell.net/css/result-light.css"

media: MediaList {mediaText: "", length: 0, item: function, deleteMedium: function, appendMedium: function, …}

ownerNode: <link>

ownerRule: null

parentStyleSheet: null

rules: CSSRuleList {0: CSSStyleRule, length: 1, item: function}

title: null

type: "text/css"

_____

I think we can mark this as "RESOLVED CONFIGURATION CHANGED" since it is fixed now.

[Jouni Koivuviita]

Yes, looks like it is working now.

Although, the JSFiddle test is logging a different style sheet. There are three style sheets on that page, and it’s the third one that has the non-standard media attribute value (document.styleSheets[2]).