Bug 245872 – Non-matching media @imports block rendering

• Component: Page Loading
• Status: RESOLVED DUPLICATE

[Harry Roberts]

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/

[Alexey Proskuryakov]

*** This bug has been marked as a duplicate of bug 236526 ***