7

I can't seem to get modernizr to work on my website. I have added the javascript files into a folder and called to them. I've also added no-js to the html but still nothing.

When I view source, it doesn't populate the html like it should.

I'm not using it for css3 elements yet so I don't need any fallback styles, I just want to be able to use the more semantic tags like header, nav, footer etc...

This is my document code:

<!DOCTYPE html>

<html class="no-js" lang="en">
<head>
    <meta charset=utf-8>
    <title></title>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->

    <script type="text/javascript" src="/js/modernizr-1.7.min.js"></script>
Simon Hamill
  • 71
  • 1
  • 2
  • Can you provide a link to your site? are you trying to do it locally? – methodofaction May 17 '11 at 10:23
  • No, it's hosted on a server. Sorry, can't provide a link to my side unfortunately but I can post whatever code needed and edit anything. – Simon Hamill May 17 '11 at 10:32
  • 1
    If you're using Modernizr, then you don't need HTML5Shiv, as Modernizr includes that functionality. See also: http://stackoverflow.com/questions/3855294/html5shiv-vs-dean-edwards-ie7-js-vs-modernizr-which-to-choose/3855343#3855343 – Spudley May 17 '11 at 10:51
  • 1
    It doesn't show up in the view source, use firebug or chrome dev tools and you should see all the classes added to your html node. – Neil Oct 27 '11 at 13:15
  • Did `Modernizr` only detects what features are supported by the browser ? or `Modernizr` it able to add features to browser which not exist ? THx – yossi Jul 20 '12 at 05:09
  • Did there is some solution which add features like css3 to browser which not exist ? thx – yossi Jul 20 '12 at 05:13

4 Answers4

10

Ran into this problem myself. Make sure you view the page during run-time. When you view the page source, js calls are not executed and it will not replace the no-js. If you are using Chrome then use their element inspector.

Matthew Sprankle
  • 1,626
  • 1
  • 19
  • 26
5

It is most likely a path issue. Try temporally replacing

<script type="text/javascript" src="/js/modernizr-1.7.min.js"></script>

With 

<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js"></script>

Or it could be working, but it's not obvious. Keep in mind you don't see the Modernizr classes when you view the source, you need a tool like Firebug on FF or the Developer Tools on Chrome to actually inspect the post-javascript code.

An additional test would be doing something like...

.borderradius body {
  background: #c00;
}

And if the background is red, then Modernizr is running.

methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • Hmm, it seems to be running, checked it on firefox. Confused now... tags like header and footer aren't working though in non html5 browsers? I thought the point in moderizr was it would replace header with a div for non html5 supported browsers? – Simon Hamill May 17 '11 at 10:36
  • 1
    No, your assumption is incorrect, it does not replace HTML5 elements with divs, it simply does what the HTML5shiv does, and makes the browser, e.g. IE 8 and below, aware of their existence to it renders them. – Ian Devlin May 17 '11 at 11:20
  • Same principle though. I have header tags that work perfectly on html5 supported browsers but on non the header won't show or render at all? – Simon Hamill May 17 '11 at 11:37
  • Are you sure you linking Modernizr in the header? What you are describing often happens when you place the link near the bottom (usual best practice). In IE's case, it encounters html5 tags without knowing what to make about them, and Modernizr loads too late. – methodofaction May 17 '11 at 16:25
0

You don't have any styles here but maybe you haven't defined your HTML5 elements as display: block? Modernizr doesn't do that by itself and so you still won't get the results you expect if you don't add that into your CSS.

o_O
  • 5,527
  • 12
  • 52
  • 90
0

For the record I had this issue too. After a long time testing I found that removing the 'Add CSS Classes' option from the custom build was causing it for me.

McShaman
  • 3,627
  • 8
  • 33
  • 46