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

KurtCattiSchmidt has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: CSS @sheet ==
[Link to explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/AtSheet/explainer.md)

CSS `@sheet` is a mechanism for bundling multiple CSS stylesheets into one .css file. There are numerous practical advantages to bundling multiple CSS sheets into one file, including reduced network requests and potentially increased compression ratios.

`@sheet` is an at-block with an identifier:

style.css:
```
@sheet sheet1 {
 ...
}
```

Sheets defined via `@sheet` can be referenced via fragment identifiers in URL's that match the `@sheet` identifier:

`<link rel="stylesheet" href="style.css#sheet1">`

This was discussed in the [CSSWG call on 2023-04-05](https://lists.w3.org/Archives/Public/www-style/2023Apr/0004.html) as well as [this discussion](https://github.com/w3c/csswg-drafts/issues/5629).

We propose expanding this definition to include `@sheet` definitions at the document level, which can similarly be referenced via a local fragment:

```
<style>
@sheet sheet1 {
 ...
}
</style>
<link rel="stylesheet" href="#sheet1">
```

Much like anchor fragments, Shadow DOM nodes can access `@sheet` definitions from their parent scope:

```
<style>
@sheet foo {
  div {
    color: red;
  }
}
</style>
<template shadowrootmode="open">
  <link rel="stylesheet" href="#foo" />
  <span>I'm in the shadow DOM</span>
</template>
```

More details and examples can be found in the explainer link above. I would welcome any comments/suggestions/additional use cases, either in this thread or as issues in the MSEdgeExplainers repo: [New issue](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?assignees=kschmi&labels=AtSheet&title=CSS+At+Sheet+%3CTITLE+HERE%3E)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11509 using your GitHub account


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

Received on Wednesday, 15 January 2025 21:51:05 UTC