[whatwg] Why is @scoped required for <style> as flow content?

Tue Jun 14 17:26:15 PDT 2011

On Thu, 24 Mar 2011, Nicholas Zakas wrote:
>
> HTML5 currently requires the scoped attribute for <style> elements when 
> placed in an area where flow content is expected. This strikes me as 
> strange since it's not backwards compatible with HTML 4 nor indicative 
> of how browsers deal with <style> elements as flow content today. Put 
> quite simply, this:
> 
> <div>
>     <style>.foo { color: red; }</style>
> </div>
> 
> works just fine in browsers today, and the style information is applied 
> to the entire document. This is considered invalid HTML5 (tested using 
> html5.validator.nu) because the scoped attribute is missing. Fixing the 
> issue results in:
> 
> <div>
>     <style scoped>.foo { color: red; }</div>
> </div>
> 
> However, this is not equivalent to the previous code because the styles 
> are now confined to the subtree of the enclosing <div> element.
> 
> It seems like the scoped attribute should be optional when <style> is 
> used as flow content and disallowed when used in meta content. That way, 
> you're adding the new functionality of limiting styles to a subtree 
> while also ensuring that the spec reflects current browser behavior. 
> Pleasant side effect is that everyone with <style> as flow content will 
> have on less validation error to worry about.

There are two use cases here: styling the whole document, and styling a 
subpart of a document.

Styling a whole document by having style sheets in the middle of the 
document causes flickering (as the browser updates the styles), and is 
hard to maintain. So we make this non-conforming, to help authors avoid 
these pitfalls. (Indeed, it's never been conforming, this is not new.)

To distinguish this case from the subpart styling case, we use the 
"scoped" attribute for subpart styling. This is why that is conforming.

On Fri, 25 Mar 2011, Jukka K. Korpela wrote:
> 
> The use case for <style> inside the document body without the scoped 
> attribute is quite different, typically in situations where the document 
> is being generated programmatically and when generating content, some 
> style settings should be inserted (perhaps something that cannot be 
> handled using style="..." attributes). There are even situations - more 
> often than many people would want - where an author can only affect the 
> <body> element.
> 
> So putting a <style>, meant to be global, in the <head> simply isn't an 
> option in many cases. Maybe such cases shouldn't exist, but they do.

Could you give more concrete examples? Unless someone is encoding data in 
style sheets, it seems that it is quite possible for the style sheets to 
be prepared ahead of time.

> There's a fundamental compatibility issue with <style scoped>. Existing 
> browsers simply ignore the scoped attribute and apply the styles to the 
> entire document. This is surely not what an author means when he uses 
> <style scoped> as per HTML5.

It's trivial to work around that using ID selectors in the interim.

> Suggestion: Drop <style scoped>. Instead, introduce a new attribute, say 
> styleref, which is permitted for elements that allow flow content, or 
> for any element (whichever is easier). The attribute would specify a 
> space-separated list of CSS stylesheet URLs, to be applied inside the 
> element.

That wouldn't solve the main use case: syndication. In that scenario, 
referencing external files is often a non-starter.

On Fri, 25 Mar 2011, Boris Zbarsky wrote:
> 
> We could argue about this of course; this is why I asked for use cases.  
> The use case of putting <style> without @scoped right at the start of 
> <body> is a good one, and I think that should be allowed...

A system that cannot do this:

    <style></style>
   </head>
   <body>

but can do this:

   </head>
   <body>
    <style></style>

Seems artificially limited and really should just be fixed.

On Sun, 27 Mar 2011, Jukka K. Korpela wrote:
> 
> It is a rather common setup in websites that offer the public an 
> opportunity to publish for free. I've been told eBay is an example of 
> that: you can only affect some parts of the <body>. Such setups seem to 
> be increasingly common. They may also exist in "normal" websites, e.g. 
> when technically managed by an external service provider, with limited 
> editing possibilities for content providers.

If you can only affect some parts of the <body>, the site probably would 
also rather you didn't affect parts outside those parts by fiddling with 
them via CSS. And you can style the inside parts using <style scoped>. 
This seems handled pretty well by the current spec, in fact.

On Mon, 28 Mar 2011, Jukka K. Korpela wrote:
> 
> No, because the parts might appear around the <body> so that you cannot 
> use any wrapper that contains them all. It would be awkward to use 
> copies of the same stylesheet in different <style scoped> attributes.

Just @import the common content. This is essentially equivalent to your 
proposal of using stylref="".

> By the way, there are undoubtedly cases where you would want to use the 
> same scoped stylesheet for different elements, e.g. for different 
> <blockquote> elements quoting from the same source.

In that case, just put class="" values on the <blockquote> and put the 
style sheets at the top level. No reason for something like scoped sheets 
in a case that simple.

On Tue, 29 Mar 2011, Jukka K. Korpela wrote:
> 
> Any stylesheet can completely screw up rendering when applied in 
> addition to some other stylesheet. The author needs to know, to some 
> extent at least, what he is doing and in which context. Quite similarly, 
> _any_ use of a scoped stylesheet requires due attention - especially in 
> the most obvious (?) use case where a quotation or a syndicated article 
> is used with its original stylesheet as such or as modified. (After all, 
> a scoped stylesheet is applied in addition to any document-wide 
> stylesheets that may be involved.)

I don't follow what you're saying here.

> Un-scoped stylesheets in <body> are currently supported by browsers. 
> This is my main objection to using the <style scoped> syntax: it does 
> not degrade gracefully by being ignored by "old" (i.e., all current) 
> browsers but instead gets interpreted as a document-wide stylesheet, 
> quite contrary to the author's intent and with potential disaster.

That actually is intentional. It means you can use it today in legacy UAs 
if you write your rules carefully.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'