[Webkit-unassigned] [Bug 203073] Inline stylesheet with a non-standard media attribute value is not parsed

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Sun Oct 20 22:52:31 PDT 2019


https://bugs.webkit.org/show_bug.cgi?id=203073

--- Comment #3 from Jouni Koivuviita <jouni at vaadin.com> ---
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"

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20191021/df94c846/attachment.html>


More information about the webkit-unassigned mailing list