Bug 245872 - Non-matching media @imports block rendering
Summary: Non-matching media @imports block rendering
Status: RESOLVED DUPLICATE of bug 236526
Alias: None
Product: WebKit
Classification: Unclassified
Component: Page Loading (show other bugs)
Version: Safari 16
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-09-30 03:26 PDT by Harry Roberts
Modified: 2022-09-30 15:02 PDT (History)
1 user (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
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 ***