Re: Suggestion for @global to help with <style scoped>

Not speaking for Tab here, but I suspect he means the existing pattern of
prefixing blocks of rules with an ID or class, in order to limit the scope
of the rules to the intended part of the page. E.g.,

    #menu .header { ... }
    #menu h3 { ... }
    #menu h3 + div { ... }
    #menu h3 + p { ... }

All of these rules could simply be encapsulated within a <style scoped>
under the element with ID "menu", and "#menu" omitted in the selectors.

In this scenario I suspect that rules where the "dividing" ID occurs
somewhere in the middle of the selector, e.g.,

    section #menu div { ... }
    .blog #menu div { ... }

are comparatively rare.

Now, <style scoped> should make the first case easy, while not preventing
the latter. Therefore, with the proposal one would write:

<div ID="menu">
    <style scoped>
        .header { ... }
        h3 { ... }
        h3 + div { ... }
        h3 + p { ... }
        @global {
            section #menu div { ... }
            .blog #menu div { ... }
        }
   </style>
    ...

As an aside, one could replace "#menu" with ":scope" here and omit the ID
entirely.


Cheers,

- Roland


On Tue, Sep 20, 2011 at 4:51 PM, Daniel Glazman <
daniel.glazman@disruptive-innovations.com> wrote:

> Le 20/09/11 00:58, Tab Atkins Jr. a écrit :
>
>
>  Reasoning
>> ---------
>> The #2 meaning of "scoped" appears to be more intuitive to authors,
>> and appears to be more commonly used.
>>
>
> More "commonly used"? I'd like to know how many mainstream web sites
> use scoped stylesheets! I suspect "negligible for the time being".
>
> </Daniel>
>
>