How do I test if Modernizr is working or not?

Mobile
1

How do I test to see if Modernizr is working? When I try the code below, the output is “Hello World!”.


if(Modernizr){
 document.write("Hello World!");
}
else{
document.write("im a failure!");
}

but when I try either of the snippets below for example, the output is “im a failure”.


if(Modernizr.fontface){
 document.write("Hello World!");
}
else{
document.write("im a failure!");
}

or


if(Modernizr){
 document.write("Hello World!");
}
else{
document.write("im a failure!");
}

I have also tried to change the background color with modernizr using the css below but it also doesn’t work. For example:


.borderradius body {
  background: #000;
}

Thanks

2

Just make sure, when you download Modernizr, that the @fontface test is included in the library (if you are using a custom version).

Or it may be that you are testing this in an old browser that doesn’t support @fontface. :slight_smile:

3

Why are you using the long dead document.write() statements - they were replaces at the end of the 20th Century by alert() which in turn was replaced a few years ago by console.log() - at least in so far as this sort of testing is concerned. Of course you wouldn’t use any of those in the final live page…

4

I’d say it’s just for testing purposes here.

5

That’s what I assumed when I said that document.write was replaced by alert() at the end of the 20th Century and by console.log() more recently.

Currently the appropriate call to use for testing purposes is console.log() and not the long dead (ought to have been removed from JavaScript long ago) document.write.

Anyway, what about if you decided to serve the pages as XHTML instead of HTML (assuming you don’t need to support IE8) then document.write would just give an error as it isn’t permitted in XHTML pages - whereas the antiquated alert() and modern console.log() would still work…

6

The easiest way is just to look at the html element in Firebug (or developer tools in chrome) and you will see the classes that have been added to the html element by modernizr depending on what is supported etc.


<html class=" js canvas rgba multiplebgs backgroundsize borderradius boxshadow textshadow opacity cssanimations cssgradients csstransforms csstransforms3d csstransitions fontface generatedcontent localstorage" style="">

As you can see borderradius is included in my example so the following will work assuming this is the most specific style.


.borderradius body{background:red}

If it doesn’t work then you either have more specific rules in your stylesheet or your body is wholly covered by an inner element’s background such as a page wrapper.

I’m not quite sure why you would want to change the background colour for the body based on if border-raidus is supported though?