[blink][edge][webkit] steps toward <style scoped> : first do no harm

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

[blink][edge][webkit] steps toward <style scoped> : first do no harm

Tantek Çelik
I recently found a nice use-case for <style scoped> : per post custom
styling, that would work not only on a post's permalink page, but also
on a post when display in a stream, like on a home page.

I had just created a bit of CSS for the recent "pride weekend" in San Francisco:

http://tantek.com/2015/178/t1/lovewins-css3-pride-rainbow-background

And decided I wanted to keep that custom rainbow bg styling on that
post, while reverting other posts to their "normal" styling.

I implemented this using <style scoped> and it worked exactly as expected:

http://tantek.com/2015/185/t1/coded-per-post-styling-style-scoped

On both the post by itself and when it was present in a list of posts
like on my homepage.

At least in Gecko.

When I tried it other browsers, the rules from the <style scoped> leak
out to the rest of the document, affecting all posts.

E.g. this is a relatively recent Edge screenshot (via a friend)

http://i.imgur.com/CUXPIJk.png


Thus this is a request - short of fully implementing <style scoped>:


** Could Blink, Edge, and Webkit at least *not* apply <style scoped>? **


I looked for such "first do no harm" bugs for each and couldn't find
any, so I'm sending this message here to broaden awareness and
hopefully get someone from each engine to file a bug and report back a
publicly viewable URL for it so we can track it.


That being said, if any other engine can share an intent to actually
get <style scoped> working in some reasonable timeframe, that would be
appreciated as well!

Thanks,

Tantek

Reply | Threaded
Open this post in threaded view
|

Re: [blink][edge][webkit] steps toward <style scoped> : first do no harm

Francois Remy-3
This is a breaking change that I think we should not pursue.
I remember using <style scoped> in my code knowing that it would apply to the outer space as well, and making sure it doesn’t happen by setting some attribute to a one-shot value and making sure all matched elements have my root as a parent by using this attribute selector.

It’s a form of progressive enhancement: browser which know the style only apply to children don’t have to match the rules against other element and have a better performance.

Your proposal would break this pattern. I don’t know how many people did like me, but potentially a fair number.

Best regards,
François



De : [hidden email]
Envoyé : ‎vendredi‎ ‎10‎ ‎juillet‎ ‎2015 ‎20‎:‎18
À : [hidden email]

I recently found a nice use-case for <style scoped> : per post custom
styling, that would work not only on a post's permalink page, but also
on a post when display in a stream, like on a home page.

I had just created a bit of CSS for the recent "pride weekend" in San Francisco:

http://tantek.com/2015/178/t1/lovewins-css3-pride-rainbow-background

And decided I wanted to keep that custom rainbow bg styling on that
post, while reverting other posts to their "normal" styling.

I implemented this using <style scoped> and it worked exactly as expected:

http://tantek.com/2015/185/t1/coded-per-post-styling-style-scoped

On both the post by itself and when it was present in a list of posts
like on my homepage.

At least in Gecko.

When I tried it other browsers, the rules from the <style scoped> leak
out to the rest of the document, affecting all posts.

E.g. this is a relatively recent Edge screenshot (via a friend)

http://i.imgur.com/CUXPIJk.png


Thus this is a request - short of fully implementing <style scoped>:


** Could Blink, Edge, and Webkit at least *not* apply <style scoped>? **


I looked for such "first do no harm" bugs for each and couldn't find
any, so I'm sending this message here to broaden awareness and
hopefully get someone from each engine to file a bug and report back a
publicly viewable URL for it so we can track it.


That being said, if any other engine can share an intent to actually
get <style scoped> working in some reasonable timeframe, that would be
appreciated as well!

Thanks,

Tantek

Reply | Threaded
Open this post in threaded view
|

Re: [blink][edge][webkit] steps toward <style scoped> : first do no harm

Tab Atkins Jr.
In reply to this post by Tantek Çelik
On Fri, Jul 10, 2015 at 11:14 AM, Tantek Çelik <[hidden email]> wrote:

> I recently found a nice use-case for <style scoped> : per post custom
> styling, that would work not only on a post's permalink page, but also
> on a post when display in a stream, like on a home page.
>
> I had just created a bit of CSS for the recent "pride weekend" in San Francisco:
>
> http://tantek.com/2015/178/t1/lovewins-css3-pride-rainbow-background
>
> And decided I wanted to keep that custom rainbow bg styling on that
> post, while reverting other posts to their "normal" styling.
>
> I implemented this using <style scoped> and it worked exactly as expected:
>
> http://tantek.com/2015/185/t1/coded-per-post-styling-style-scoped
>
> On both the post by itself and when it was present in a list of posts
> like on my homepage.
>
> At least in Gecko.
>
> When I tried it other browsers, the rules from the <style scoped> leak
> out to the rest of the document, affecting all posts.
>
> E.g. this is a relatively recent Edge screenshot (via a friend)
>
> http://i.imgur.com/CUXPIJk.png
>
>
> Thus this is a request - short of fully implementing <style scoped>:
>
>
> ** Could Blink, Edge, and Webkit at least *not* apply <style scoped>? **
>
>
> I looked for such "first do no harm" bugs for each and couldn't find
> any, so I'm sending this message here to broaden awareness and
> hopefully get someone from each engine to file a bug and report back a
> publicly viewable URL for it so we can track it.

This would, in fact, do harm today.  If you'd proposed it years ago
when <style scoped> was first introduced, maybe, but now, there's
usage in the wild that puts an id on the scoping element and uses that
in the selectors inside of <style scoped>, so that it works in all
browsers (but hopefully gets performance benefits in those that
actually implement scoped='').  For example, several examples in the
Flexbox spec do this.

> That being said, if any other engine can share an intent to actually
> get <style scoped> working in some reasonable timeframe, that would be
> appreciated as well!

Chrome still doesn't have any current plans to implement this.

~TJ

Reply | Threaded
Open this post in threaded view
|

Fwd: [blink][edge][webkit] steps toward <style scoped> : first do no harm

Tantek Çelik
Forward of the last time we chatted about Scoped Style, per request
from Tab on today's telcon. -t


---------- Forwarded message ----------
From: Tab Atkins Jr. <[hidden email]>
Date: Fri, Jul 10, 2015 at 4:56 PM
Subject: Re: [blink][edge][webkit] steps toward <style scoped> : first
do no harm
To: Tantek Çelik <[hidden email]>
Cc: www-style list <[hidden email]>


On Fri, Jul 10, 2015 at 11:14 AM, Tantek Çelik <[hidden email]> wrote:

> I recently found a nice use-case for <style scoped> : per post custom
> styling, that would work not only on a post's permalink page, but also
> on a post when display in a stream, like on a home page.
>
> I had just created a bit of CSS for the recent "pride weekend" in San Francisco:
>
> http://tantek.com/2015/178/t1/lovewins-css3-pride-rainbow-background
>
> And decided I wanted to keep that custom rainbow bg styling on that
> post, while reverting other posts to their "normal" styling.
>
> I implemented this using <style scoped> and it worked exactly as expected:
>
> http://tantek.com/2015/185/t1/coded-per-post-styling-style-scoped
>
> On both the post by itself and when it was present in a list of posts
> like on my homepage.
>
> At least in Gecko.
>
> When I tried it other browsers, the rules from the <style scoped> leak
> out to the rest of the document, affecting all posts.
>
> E.g. this is a relatively recent Edge screenshot (via a friend)
>
> http://i.imgur.com/CUXPIJk.png
>
>
> Thus this is a request - short of fully implementing <style scoped>:
>
>
> ** Could Blink, Edge, and Webkit at least *not* apply <style scoped>? **
>
>
> I looked for such "first do no harm" bugs for each and couldn't find
> any, so I'm sending this message here to broaden awareness and
> hopefully get someone from each engine to file a bug and report back a
> publicly viewable URL for it so we can track it.

This would, in fact, do harm today.  If you'd proposed it years ago
when <style scoped> was first introduced, maybe, but now, there's
usage in the wild that puts an id on the scoping element and uses that
in the selectors inside of <style scoped>, so that it works in all
browsers (but hopefully gets performance benefits in those that
actually implement scoped='').  For example, several examples in the
Flexbox spec do this.

> That being said, if any other engine can share an intent to actually
> get <style scoped> working in some reasonable timeframe, that would be
> appreciated as well!

Chrome still doesn't have any current plans to implement this.

~TJ

Reply | Threaded
Open this post in threaded view
|

Re: [blink][edge][webkit] steps toward <style scoped> : first do no harm

Tab Atkins Jr.
On Wed, Jun 1, 2016 at 9:26 AM, Tantek Çelik <[hidden email]> wrote:
> Forward of the last time we chatted about Scoped Style, per request
> from Tab on today's telcon. -t

Ah, this is very different. You implied on the call that I'd said
implementing <style scoped> would be web-incompatible; here, tho, I'm
referring to your suggestion that browsers not implementing <style
scoped> just not apply the scoped stylesheet at all.

~TJ