pepelsbey,
@pepelsbey@mastodon.social avatar

You can scope styles inside of the parent with a <style> and a @​scope rule 😳

<div>
<style>
@​scope {
p { color: red }
}
</style>
<p>this is red</p>
</div>
<p>not red</p>

See the CSS Cascading and Inheritance L6 draft
https://drafts.csswg.org/css-cascade-6/#example-52419898

It’s not just a fantasy, it already works in Chrome Canary. Thanks to @kizu for the tip!

pepelsbey,
@pepelsbey@mastodon.social avatar

But at the same time, the <style> is not allowed inside of the <body> by the HTML spec:

> 4.2.6 The style element
> Categories: Metadata content

https://html.spec.whatwg.org/multipage/semantics.html#the-style-element

https://github.com/whatwg/html/issues/1605
https://github.com/whatwg/html/issues/5019

I think WHATWG and CSSWG need to talk 😅

cc @mia @annevk

keithjgrant,
@keithjgrant@front-end.social avatar

@pepelsbey @mia @annevk The <style> tag isn’t necessary to make @scope work. I did a write up on @scope here: https://keithjgrant.com/posts/2023/04/scoped-css-is-back/

keithjgrant,
@keithjgrant@front-end.social avatar

@pepelsbey @mia @annevk if it works as you described, then it seems Canary supports a weird hybrid of both the old and the new approaches 😅

mia,
@mia@front-end.social avatar

@keithjgrant @pepelsbey @annevk Not a legacy hybrid quirk, we did actually spec that based on the reality that browsers support style anywhere. 😅

I did not know HTML technically disallows it. That spec doesn't match the reality in browsers.

pepelsbey,
@pepelsbey@mastodon.social avatar

@mia @keithjgrant @annevk I hope this spec and the browser implementation will finally convince HTML editors to allow <style> not just in the metadata context.

annevk,

@pepelsbey @mia @keithjgrant Well, conformance requirements are not the same as implementation requirements. And also, it seems like allowing it without some constraints might lead to folks using it in the wrong way. So this could probably be changed, but it would need some care. (We could also try to bring the scoped attribute back...)

tomayac,
@tomayac@toot.cafe avatar

@annevk @pepelsbey @mia @keithjgrant Oh, apart from @scope (as in https://css.oddbird.net/scope/explainer/#goals) the good ol’ &lt;style scoped&gt; (as in https://chromestatus.com/feature/5374137958662144)? Is there renewed implementer interest, or was this just a side remark?

keithjgrant,
@keithjgrant@front-end.social avatar

@tomayac @annevk @pepelsbey @mia Chrome is very interested—they've even slated it for full release in v117/September (though I'm not sure how tentative that is at this point)

https://chromestatus.com/roadmap

annevk,

@tomayac @pepelsbey @mia @keithjgrant Just an observation that it might be easier to revive now.

pepelsbey,
@pepelsbey@mastodon.social avatar

@keithjgrant @mia @annevk I know! But in some cases, it’s super convenient to have scoped inline styles: HTML slides, article demos, etc. I use it all the time, and I’m glad to see that it’s not a purely CSS feature.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • random
  • DreamBathrooms
  • mdbf
  • ngwrru68w68
  • magazineikmin
  • thenastyranch
  • rosin
  • khanakhh
  • osvaldo12
  • Youngstown
  • slotface
  • Durango
  • kavyap
  • InstantRegret
  • tacticalgear
  • anitta
  • ethstaker
  • provamag3
  • cisconetworking
  • tester
  • GTA5RPClips
  • cubers
  • everett
  • modclub
  • megavids
  • normalnudes
  • Leos
  • JUstTest
  • lostlight
  • All magazines
    •