[Webkit-unassigned] [Bug 243424] New: Media conditions don’t affect CSS loading priorities

[bugzilla-daemon at webkit.org]

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

            Bug ID: 243424
           Summary: Media conditions don’t affect CSS loading priorities
           Product: WebKit
           Version: Safari 15
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Page Loading
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: pepelsbey at gmail.com
                CC: beidson at apple.com

Created attachment 461340

  --> https://bugs.webkit.org/attachment.cgi?id=461340&action=review

breakpoints demo

Imagine a simple situation, two CSS files linked in the head:

    <link rel="stylesheet" href="screen.css">
    <link rel="stylesheet" href="print.css" media="print">

Currently, WebKit will wait for both of them to be loaded before rendering anything at all. It makes sense since CSS is a render-blocking resource.

But the browser won’t use print.css for rendering because the implicit “screen” media type doesn’t match the “print” value. And it’s clear from the HTML parsing stage: this resource is not render-blocking.

Both Firefox and Chromium will keep loading print.css with lower priority and will start rendering once screen.css is available. It won’t save traffic but will make the page appear faster.

The same could be used not only for printing but for many different applications, that would make CSS performance better:

1. Color scheme: dark.css should not block rendering if the current scheme is light

<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

2. It could be possible to split CSS into separate files based on breakpoints

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">
<link rel="stylesheet" href="tablet.css" media="(min-width: 768px) and (max-width: 1023px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">

3. It could be possible to offload some enhancements based on device properties or user preferences:

<link rel="stylesheet" href="retina.css" media="(min-resolution: 2dppx)">
<link rel="stylesheet" href="heavy.css" media="(prefers-reduced-data: no-preference)">
<link rel="stylesheet" href="animation.css" media="(prefers-reduced-motion: no-preference)">

Well, it’s currently possible, but not in WebKit.

Here’s the demo with breakpoints: https://pepelsbey.dev/pres/conditionally-adaptive/demo/

The same zipped demo is attached.

To make it easier to spot locally, I’d recommend using the slow-static-server:

    npx slow-static-server

And then

    http://localhost:8080/index.html

-- 
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/20220801/1b4fb5b6/attachment-0001.htm>