Skip to content

[css-cascade] Provide an attribute for assigning a to a cascade layer #5853

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mirisuzanne opened this issue Jan 11, 2021 · 17 comments
Open

Comments

@mirisuzanne
Copy link
Contributor

This was raised on #4969, related to the Cascade level 5 spec.

We've defined a syntax for cascade layers to be declared as code-blocks or url imports:

@layer reset url(remedy.css); 

@layer reset {
  audio[controls] { display: block; }
}

If we're allowing authors to import entire stylesheets into a layer, it seems appropriate to make that available on and '>

<link rel="stylesheet" href="remedy.css" layer="reset">

<style layer="reset">
  audio[controls] { display: block; }
style>
@frivoal
Copy link
Collaborator

frivoal commented Jan 18, 2021

I suspect that's not going to work, as existing user agents would just ignore the layer attribute, and assign all those styles to the default layer instead, so that's not going to be forward compatible.

For '>

">
>
@layer reset {
  audio[controls] { display: block; }
}
</style>

For it's more useful though, as you may be trying to load into a particular layer a stylesheet that you cannot modify.

@mirisuzanne mirisuzanne changed the title [css-cascade] Provide an attribute for assigning or ">
<link rel="stylesheet" href="https://example.com/framework.css">

<style>
  @import url('https://example.com/framework.css');
style>

If so, we might want to revisit the priority of this? It seems like a fairly common use-case.

@xiaochengh
Copy link
Contributor

@mirisuzanne These two should have the same performance (at least in Chromium). Both are captured by preload scanners.

@yoavweiss
Copy link

I think this is a problem worth solving, either by hacking a supports syntax into media (which can be useful in other contexts as well - /cc @jridgewell) or by going the