CODEWITHSUNDEEP
csshtmlmodernizr
Thomas
Thomas

Reputation: 34188

Modernizr & html new feature & style

i never use Modernizr before. so reading a article and found some css with prefix word 

.no-cssgradient.how the below style will be applied.

.no-js .glossy,
.no-cssgradients .glossy {
    background: url("glossybutton.png");
}

.cssgradients .glossy {
    background-image: linear-gradient(top, #555, #333);
}

what is the meaning of above style....how does it work?

4) how style will be applied automatically?

/* In your CSS: */
.no-audio #music {
   display: none; /* Don't show Audio options */
}
.audio #music button {
   /* Style the Play and Pause buttons nicely */
}

<!-- In your HTML: -->
<div id="music">
   <audio>
      <source src="audio.ogg" />
      <source src="audio.mp3" />
   </audio>
   <button id="play">Play</button>
   <button id="pause">Pause</button>
</div>

i got the code snippet from a site. what is the use of class name like .no-cssgradients or .no-audio how these style will be applied ?

please explain me in details with example. thanks

Upvotes: 0

Views: 103

Answers (1)

Nick R
Nick R

Reputation: 7784

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

It basically detects what features your current browser supports, or what it doesn't support, and then you can use those class names to style the page accordingly.

For example - if you browser supports HTML5 and the audio tag, you can display it. If the browser doesn't support the audio tag, you can use .no-audio - and hide the player, or provide a fallback option for older browsers.

If you debug the Modernizr site with Firebug or an equivalent debugger, you can see the it will automatically add classes to the HTML tag.

So you might get something like the following added to the html tag, as classes:

js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns

So you know the browser supports those features.

It can also be useful if you want to style the site differently if the user has Javascript turned off.

Upvotes: 1

Related Questions