- From: Lachlan Hunt <lachlan.hunt@lachy.id.au>
- Date: Mon, 14 Jul 2008 20:41:49 +0200
- To: Andrew Fedoniouk <news@terrainformatica.com>
- Cc: www-style <www-style@w3.org>
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