W3C home > Mailing lists > Public > www-style@w3.org > July 2008

Re: Opera's Proposal for :context Selector

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Mon, 14 Jul 2008 14:18:34 -0700
Message-ID: <487BC2AA.1020600@terrainformatica.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: Lachlan Hunt <lachlan.hunt@lachy.id.au>, www-style <www-style@w3.org>

Tab Atkins Jr. wrote:
> Grr, misused the tab key.  Continuing message...
>
>
>
>  On Mon, Jul 14, 2008 at 2:50 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>   
>> Thanks for your answers, your intention is more clear now but see below...
>>
>> Lachlan Hunt wrote:
>>
>>     
>>> As a proof of concept, consider this example:
>>>
>>> <body class="foo">
>>>  <section>
>>>    <style scoped>
>>>    .foo h1 { color: green; }
>>>    .bar h1 { color: blue; }
>>>    </style>
>>>    <h1>Example</h1>
>>>    <p>Hello world!</p>
>>>  </section>
>>> </body>
>>> This allows styles to be changed dynamically by changing the class name on the body element from "foo" to bar", which would change the heading from green to blue.
>>>       
>> You already can do that. Simply write:
>>
>>  body.foo h1 { color: green; }
>>  body.bar h1 { color: blue; }
>>
>> and it will work for you already. Why do you need <style scoped> then?
>>     
>
>  The two work quite a bit differently.  Your selectors will match (and
> change the color of) *all* <h1>s in body.foo or body.bar.  The scoped
> stylesheet *only* changes those <h1>s that appear within the <style>'s
> scope.  <h1>s that appear elsewhere will not be affected, even though
> they may match a naive application of the selector.
>
> The same applies to the querySelector, but you already get that (you
> said exactly what is meant - that it's a global selector but against a
> limited set of elements).  The two are meant to work the same.
>   
Ok.

To achieve reliable results you always have to put full path in selectors:

<body>
    <div id="scope">
      <style scoped>
         .foo #scope h1 { color: green; }
         .bar #scope h1 { color: blue; }
     </style>
     <div class="foo">
       <h1>header</h1>
    </div>
  </div>
</body>

even in scoped style sheets.

So why do you need that word "scoped" in the <style>?

Construction above will work without scoped too:

<body>
    <div id="scope">
      <style>
         .foo #scope h1 { color: green; }
         .bar #scope h1 { color: blue; }
     </style>
     <div class="foo">
       <h1>header</h1>
    </div>
  </div>
</body>

Will lead to exactly the same results. So why? What prevents you from 
using that way scoped style sheets now?

>   
>> As far as I understand intention is to have:
>>  <style scoped src="style-system-for-my-component.css" />
>> and to be able to use that style-system-for-my-component.css in various places/pages?
>> Modularity implies that declarations in style-system-for-my-component.css are
>> independent from the position of scope/root element on the page - rooted to the element
>> this style set is applied to. So you could share your libraries/components.
>> Too bad if this is not the intent.
>>     
>
> I agree here, though, that *without* a :scope or :context pseudoclass,
> it can be difficult to achieve proper modularity.  Frex, in this
> fragment:
>
> <section>
>   <style scoped>
>     div span { color: red }
>   </style>
>   <span>span content</span>
>   <div>
>     <span>some more span content</span>
>   </div>
> </section>
>
> The second span will definitely be red, but the first will be red
> depending on whether or not there is a div somewhere further up the
> ancestor chain.
>
> In other words, I *really like* having querySelector and scoped
> <style>s do a global match (but only apply to a limited set of
> elements), but one needs, I think, a way to specify that you *really*
> want a section of the selector to *only* apply to the scoped area.
> Allowing :scope/:context would do wonders here, as well as make it
> easy to define the stricter forms of scoped matching that Andrew likes
> - as written earlier in the thread, the stricter forms would just
> auto-prepend :scope/:context to the passed selector.
>   
auto-prepended :scope/:context simply means that you work on isolated 
sub-tree.
So you have your :root element resolved to the element establishing the 
scope.
So that was the initial question: why to have artificial and 
contradictory :scope/:context
if you already have :root element?
Received on Monday, 14 July 2008 21:19:26 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:10 GMT