- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Mon, 14 Jul 2008 15:25:12 -0700
- 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: > 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