0

I am trying to add Modernizr into my wordpress installation. I do that by adding the following line, just after wp_head(); in the header:

<script src="<?php bloginfo('template_directory'); ?>/js/modernizr-custom.js"></script>

According to firebug the script is loaded, but the script doesn't seem to have effect in IE8.

I've added the following line into my css:

.borderradius body {
  background: #c00;
}

In firefox the background turns red, in IE8 nothing happens.

article, aside, details, figcaption, figure, footer, header, main, nav, section are set on display: block;

What else could I possibly do to get it working in IE8?

Thanks a lot for your time.

Nathan Dawson
  • 18,138
  • 3
  • 52
  • 58
Jando
  • 359
  • 2
  • 3
  • 12
  • 2
    IE 8 does not support `border-radius` – so your _expectation_ that modernizer should add a class saying it would is _wrong_. http://stackoverflow.com/a/13289360/1427878 – CBroe Feb 25 '14 at 15:33
  • Right, my expectation that modernizr would in some magical way make css3 properties work was wrong indeed. I also suspected media query's to work with the use of modernizr (my complete layout changed dramaticly with testing in IE, so my first thought was I needed modernizr, the actual reason for this post), but that doesn't seem to be the case so I will continue my research. Thank you for your answer. – Jando Feb 25 '14 at 16:06
  • I completely forgot to added support for media query's, so I've added mediaqueries.js and now it's already far better ;) – Jando Feb 25 '14 at 16:11
  • 1
    Correct, modernizer’s job is only to tell you what a browser _supports_, so that you can react to that. To implement functionality that is not given in a specific browser (/version), you need to look into what’s called “polyfills”. (Those are mostly available for JS features, but some for CSS as well.) And `border-radius` is not an essential feature in most cases, but if you absolutely want to have it in IE 8 as well, look f.e. here: http://stackoverflow.com/questions/17830372/how-to-apply-border-radius-in-ie8-and-below-ie8-browsers – CBroe Feb 25 '14 at 16:13

1 Answers1

2

You need the HTML Shim to get HTML5 elements to work in <=IE8. Include that script before any others, preferably in your <head>. The next one you'll need is a media query/matchMedia polyfill, which mediaqueries.js will work fine, I've also had luck with respond.js. Lastly if you want CSS3 support for things like border-radius, you'll need a polyfill like CSS3 Pie, including the .HTC file it comes with for legacy IE support.

Here's an example of my starter boilerplate <head>, which is heavily based on HTML5 Boilerplate (it doesn't including CSS3 Pie):

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title></title>

    <link rel="stylesheet" type="text/css" media="all" href="css/screen.css" />
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
Astockwell
  • 1,498
  • 13
  • 11