CODEWITHSUNDEEP
javascripthtmlcssmodernizr
Peter Featherstone
Peter Featherstone

Reputation: 8102

Modernizr with border-radius, media queries etc

I've recently looked at Modernizr and have read the documentation however a few things seem a little unclear to me. It appears from reading the documentation that Modernizr is primarily used to detect if certain things are available in a browser or not, for example border-radius, media queries etc. Does it fix these things to render as expected on older browsers?

I read in the documentation about Polyfills but I am not exactly sure on how I would implement these to add rounded corners to a div on browsers that don't support them for example.

In addition, can Modernizr be used to allow media queries to work in older browsers or again is it simply a way to detect if media queries can be used or not.

If it is solely a detection tool then why is it so useful? I know already that I can't use media queries or border-radius on older versions of Internet Explorer for example. If it is not solely a detection tool, then how can I use it to add newer functionality in older browsers?

Upvotes: 1

Views: 1284

Answers (2)

Dan
Dan

Reputation: 184

Modernizer uses javascript to add a bunch of classes to the HTML element of your page on page-load. E.g.

<HTML class="backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg">

These classes describe whether an HTML5/CSS3 feature is available to use in the browser the page is viewed on.

This allows you to use more efficient css by only applying CSS3 styles if the browser can handle them (progressive enhancement).

E.g.

.no-audio .music-player {
   display: none
}
.audio .music-player {
   /* styles for music player */
}

Also Modernizer lets you test if these elements are available with it's javascript API. This is useful for providing fallbacks for older browsers (polyfills). So for rounded corners you could do:

Modernizr.load({
  test: Modernizr.borderradius,
  yep : /* do nothing */
  nope: 'borderradius.js' /* css3 pie for example */
});

or alternately:

if (Modernizr.borderradius) {
   // do nothing
}else{
    /* script for making rounded corners e.g css3 pie */
}

Or in the CSS only us borderradius if available:

.box {
 border: 1px solid #000; /* all browsers, no rounded corners */
}

.borderradius .box{
  border-radius: 15px; /* only CSS3 compliant browsers get this style */
}

Media queries for older (IE <9) browsers require another plugin such as repond.js

Upvotes: 1

sd7syfsk
sd7syfsk

Reputation: 61

I guess my question is, if it is solely a detection tool then why is it so useful? I know already that I can't use media queries or border-radius on older versions of Internet Explorer for example.

Yes, it is a detection tool. The purpose of Modernizr is to feature sniff rather than browser sniff. You mention you already know what IE is capable of. Forget IE/specific browsers and what they can do. Modernizr helps you determine whether a feature is available, and then easily write CSS/JS use-cases for the fall back.

Upvotes: 3

Related Questions