JavaScript CSS选择器

Question

I was reading up on some JavaScript to try and create my own slider and I came across something that confused me a little. There was a CSS rule that was as follows:

html.js #slideshow .slides img
{
    position: absolute;
}

The explanation said that the rule would only be applied if JavaScript was available. Now I'm a bit confused... Would this rule be applied if JavaScript is available in the browser? Or if the file "html.js" had been included in the html page, or if any JavaScript files were included?

Thanks in advance.

Answer 1

It's a technique where you use javascript to add class 'js' to the html tag. No javascript, no js class. Makes it very easy for your CSS to know if JS is enabled.

Answer 2

Probably in your page you have a script on the head that adds a js class to the root element

this will ensure that the CSS rule will be applied only if javascript is available on the client. Of course if javascript is not available the class won't be inserted by the script.

It's a modern approach used especially to prevent the flash of unstyled content (FOUC)

Answer 3

The page you saw is probably using Modernizr . It is a JavaScript library that detects HTML5 and CSS3 features in the user's browser and works by adding a class "no-js" to the HTML element and when the page loads Modernizr replace it with set of rules that you're testing.

Check Modernizr website for more details if you want to test specific feature in a browser.

Of ir you don't want to use Modernizr you can do it with JavaScript by placing this directly within your <title> tag :

<script>
    document.documentElement.className = document.documentElement.className.replace(/(\s|^)no-js(\s|$)/, '$1' + 'js' + '$2');
</script>