Re: Opera's Proposal for :context Selector

Tab Atkins Jr. wrote:
> On Mon, Jul 14, 2008 at 4:18 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>   
>> 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?
>>     
>
> Ah, I see.  Your issue here is that you don't understand the primary
> use of <style scoped>, which is to perform a limited sandbox on the
> styles.  For example, say you ran a social network and wanted the
> users to be able to style their individual pages.  However, you want
> to enforce a common template that the users *can't* change.  If you
> wrap their CSS in <style scoped> and place it appropriately, they
> can't have any effect on your site template, but are still free to go
> wild on the CSS of their personal section.
>
>   
Good example. Lets take a look on roles here:

I am an social network user. I want to write my own "page". So I would 
go and write my style sheet as:

mystyle.css
-----------
  div.foo p { color:red; }
  div.bar p { color:green; }
-----------

and will give you my html that will have something like:
  <div>
     <p>Hello world</p>
  </div>

You will merge that content into your portal and if it happens that your 
wrapper
page will have <div.foo> somewhere then my content will be rendered not 
the way I meant it.

Your advice? To use :context always? May work if you have a dedicated 
community.
But if you have such community then you can do this even now without any 
'scoped'.

Ask users to prepend styles with their login names:

<section class=userName1>
   ....
</section>
<section class=userName2>
   ....
</section>

And so they will give you style sheets:

  .userName2 div.foo p { color:red; }
  .userName2 div.bar p { color:green; }

Works already.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Monday, 14 July 2008 22:26:02 UTC