Re: Opera's Proposal for :context Selector

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.

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

~TJ

Received on Monday, 14 July 2008 20:46:21 UTC