Re: [csswg-drafts] Proposal: CSS @sheet (#11509)

> The CSSWG decided at the F2F last week to not go with URL fragments for binding to @sheet identifiers, so we're now looking into adding an attribute to <link> tags to specify which sheet is being imported as well as adding an optional identifier to @import for similar functionality there (e.g. @import sheet1 from "style.css";).

Excellent [changes](https://github.com/MicrosoftEdge/MSEdgeExplainers/commit/17359ed30b2b707545bdfb90625368014508033c) to the explainer clear up a lot of the confusion I have been having with this proposal!

As I understand it, to reference a sheet in a style element:

```html
<style id="sheet">
@sheet foo {
    div {
    color: red;
    }
}
</style>
```

instead of an (overloaded) fragment-only identifier:

```html
<link rel="stylesheet" href="#foo" />
```

you would use the id of the style element plus a new "sheet" attribute:

 ```html
<link rel="stylesheet" href="#foo" sheet="foo" />
```

with similar syntax for `@import`, import attributes / CSS Modules and CSS files / network resources.

And by [deciding](https://github.com/MicrosoftEdge/MSEdgeExplainers/commit/17359ed30b2b707545bdfb90625368014508033c) that `@sheets` must be explicitly imported, instead of imported by default ([#934](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/934)), style rules outside of `@sheets` are sensibly referenced as:

```html
<link rel="stylesheet" href="#sheet" />
```
Correct?

And if I want a style element (rules outside of sheets) to be available to be referenced in a shadow root but not automatically applied in the light DOM, I would just [use](https://github.com/whatwg/html/issues/10710#issuecomment-2460651361) `<style disabled>`?

All this seems to avoid a lot of backward compatibility and adoption issues that could have arisen from the previous version of the explainer.

And doesn't this in essence potentially address the [awkwardly overloaded](https://github.com/whatwg/html/issues/10673#issuecomment-2460519693) [specifier attribute](https://github.com/whatwg/html/issues/10673#issuecomment-2392517468) of the Declarative CSS Module proposal [#10673](https://github.com/whatwg/html/issues/10673), opening a syntax alignment path to merge some or all of the functionality of the two proposals?

So doesn't this also resolve/avoid the FOUC problem of merging multiple @sheet definitions with the same identifier ([#937](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/937)), because there is now no need or mechanism to merge sheets from multiple style elements or CSS files (like @layer does)?

Also, I'd suggest that in addition to:

```html
<!-- The following two link tags should only make a single network request. -->
<link rel="stylesheet" href="sheet.css" sheet="foo" />
<link rel="stylesheet" href="sheet.css" sheet="bar" />
```

this should also only make a single network request:

```html
<link rel="stylesheet" href="sheet.css" />
```

Otherwise, for both cases, particularly when the links are repeated in multiple shadow trees, it seems there will still be an [unspecified and browser-specific reliance on caching for implementation that can produce FOUC](https://issues.chromium.org/issues/383593251). 

-- 
GitHub Notification of comment by robglidden
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11509#issuecomment-2638002258 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 5 February 2025 20:54:51 UTC