Bug 245872

Summary: Non-matching media @imports block rendering
Product: WebKit Reporter: Harry Roberts <csswizardry>
Component: Page LoadingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: beidson
Priority: P2    
Version: Safari 16   
Hardware: Unspecified   
OS: Unspecified   

Description Harry Roberts 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/
Comment 1 Alexey Proskuryakov 2022-09-30 15:02:45 PDT

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