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

Re: Opera's Proposal for :context Selector

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 14 Jul 2008 15:34:57 -0500
Message-ID: <dd0fbad0807141334x312cf89ai76e1a7f31a71b8e2@mail.gmail.com>
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: "Lachlan Hunt" <lachlan.hunt@lachy.id.au>, www-style <www-style@w3.org>
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:
>
>
>
>>  3) If you have scoped style sheet applied to <p id="scope"> in some form
>>> then what would be a result of applying following style sheet:
>>>
>>> /*style set for the p#scope */
>>> <style root="p#scope">
>>>  span { color:green; }
>>>  div span { color:red; }
>>> </style>
>>>
>>> What would be the color of text FOO?
>>>
>>
>> Assuming I interpret your scoped stylesheet syntax correctly, which
>> differs from the HTML5 syntax, then it would be red.
>>
>> It has to work like that. 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>
>>
> What about modularity? Say your <section> with the same content will
> appear in different places of two different documents.
> In this case you will need to write two different style sets.
> Is this the goal? If "yes" then what is the great idea of  <style scoped>?
> That is not a rhetorical question.




>
>
>> 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.


> 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>

  <span>span content</span>
  <div>
    <span>some more span content</span>
  </div>
</section>
Received on Monday, 14 July 2008 20:35:39 GMT

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