Re: Opera's Proposal for :context Selector

Andrew Fedoniouk wrote:
> Could you give clear answers to following questions:
> 
> For the markup:
>  <body>
>    <div>
>        <p id="scope"><span>FOO</span></p>
>    <div>
>  </body>
> 
> and code:
> 
>  var scope = document.getElementById("scope");
>  var test1 = scope.querySelector("div span");
>  var test2 = jQuery.find("div span");
> 
> 1) What is expected value of test1? null or reference to the span element?

Span element.

> 2) Do you expect results in test1 and test2 to be different?

Yes.  This is one reason why :context is being introduced.  But there is 
a possibility that a new queryScopedSelector() method may be introduced 
in the future, which automatically prepends :context to the beginning of 
each selector and allows for the JQuery shorthand syntaxes like 
">strong,>em" to be pre-processed into valid selectors.  That will more 
accurately match the behaviour of JQuery and other libraries.

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

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.

Perhaps a more realistic, though more complicated example, would be 
having some styles depend on the presence of JavaScript.  Say for 
example, if the user has JS enabled, then some content needs to be 
hidden until shown based on some user interaction.  But if JS is 
disabled, then all content needs to be shown.  A very simple way to make 
this style change is to have the script set a class of "javascript-on" 
on the body element.

e.g.
<div>
   <style scoped>
   .javascript-on .hidden { display: none; }
   .visible { display: block; }
   </style>

   <p class="hidden">...</p>
</div>
<script>
...

window.onload = function() {
   document.body.className = "javascript-on";
}
</script>

Then, based on user interaction, the script can change the appropriate 
class name from "hidden" to "visible" to have it shown.

-- 
Lachlan Hunt - Opera Software
http://lachy.id.au/
http://www.opera.com/

Received on Monday, 14 July 2008 18:42:30 UTC