SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I test if Modernizr is working or not?

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

    HTML Code:
    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".

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

    HTML Code:
    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:

    HTML Code:
    .borderradius body {
      background: #000;
    }
    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by heretolearn View Post
    but when I try either of the snippets below for example, the output is "im a failure".

    HTML Code:
    if(Modernizr.fontface){
     document.write("Hello World!");
    }
    else{
    document.write("im a failure!");
    }
    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.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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..
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by felgall View Post
    Why are you using the long dead document.write() statements.
    I'd say it's just for testing purposes here.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I'd say it's just for testing purposes here.
    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..
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by heretolearn View Post
    How do I test to see if Modernizr is working?
    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.

    Code:
    <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.
    Code:
    .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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •