RESOLVED DUPLICATE of bug 236526 245872
Non-matching media @imports block rendering 
https://bugs.webkit.org/show_bug.cgi?id=245872
Summary Non-matching media @imports block rendering
Harry Roberts
Reported 2022-09-30 03:26:30 PDT
Steps to reproduce the problem: 1. Add `@import url('print.css') print;` to the start of a CSS file. 2. Load host HTML page in a non-print context 3. Note that print.css is assigned highest priority and blocks rendering Problem Description: It’s possible to specify conditions for `@import` in CSS. They’re usually media types (e.g. `print`). If we added `media=print` to a `link rel=stylesheet`, we’d see that `print.css` would be assigned Lowest priority and would not block rendering. If we apply `print` via the `@import` rule, we’d see that the file is assigned Highest priority and blocks rendering. The spec[1] suggests that UAs might not fetch the file at all if it doesn’t match the current context, but this is not in keeping with how `media` on `link rel=styleheet` works. I would suggest parity across the two. As always, it’s easier to explain via waterfalls. These tests show an external CSS file[2] and an inline `style` block[3] both exhibiting the same behaviour. Please ignore the wild TTFB—it’s erroneous but doesn’t influence the outcome of the tests. 1. https://w3c.github.io/csswg-drafts/css-cascade-5/#at-import 2. https://www.webpagetest.org/result/220929_AiDcDF_BZX/3/details/ 3. https://www.webpagetest.org/result/220929_BiDcJH_BQ0/1/details/
Attachments
Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 2022-09-30 15:02:45 PDT
*** This bug has been marked as a duplicate of bug 236526 ***
Note You need to log in before you can comment on or make changes to this bug.