How do I use Selectivizr to make the Bourbon Neat grid work in IE8?

S

2

6

I have the unfortunate task of making Bourbon Neat work with ie8. Thoughtbot's docs say you use Selectivizr for this. I followed Selectivizr's instructions and I see nothing different when testing in ie8. I also don't understand what if any fallback css is required. Any ideas or solutions? Most appreciated!

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="description" content="">

<!-- FONTS -->
<!--Typekit - Adrianna Extended Demibold-->
<script type="text/javascript" src="//use.typekit.net/sjw4zgk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<!-- AUTO RELOAD FOR HAMMER -->

        <!-- Hammer reload -->
          <script>
            setInterval(function(){
              try {
                if(typeof ws != 'undefined' && ws.readyState == 1){return true;}
                ws = new WebSocket('ws://'+(location.host || 'localhost').split(':')[0]+':35353')
                ws.onopen = function(){ws.onclose = function(){document.location.reload()}}
                ws.onmessage = function(){
                  var links = document.getElementsByTagName('link'); 
                    for (var i = 0; i < links.length;i++) { 
                    var link = links[i]; 
                    if (link.rel === 'stylesheet' && !link.href.match(/typekit/)) { 
                      href = link.href.replace(/((&|\?)hammer=)[^&]+/,''); 
                      link.href = href + (href.indexOf('?')>=0?'&':'?') + 'hammer='+(new Date().valueOf());
                    }
                  }
                }
              }catch(e){}
            }, 1000)
          </script>
        <!-- /Hammer reload -->


<!-- CSS/SCSS -->
<link rel='stylesheet' href='css/ostrich-sans.css'>
<link rel='stylesheet' href='css/font-awesome.css'>
<link rel='stylesheet' href='css/normalize.css'>
<link rel='stylesheet' href='css/responsive-nav.css'>
<link rel='stylesheet' href='css/style.css'>

<!-- IOS LINK STYLES -->
<style type="text/css">
/*.applelinks a {color:#c4d52d; display:inline-block; padding: 10px 0;}*/
/*Disable touch-highlight
-webkit-tap-highlight-color: rgba(0,0,0,0); */
</style>

<!-- JS MODERNIZR -->
<script src='js/modernizr.custom.87213.js'></script>

<link href="favicon.ico" rel="shortcut icon">
<link href="apple-touch-icon.png" rel="apple-touch-icon">


<title>Title</title>

<!-- ZEPTO FALLBACK TO JQUERY -->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/zepto.min' : 'js/jquery.min') +
'.js><\/script>')
</script>

<!--[if lte IE 8]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->   

</head>

<body>

<header>
<nav class="nav-collapse">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
</header>

  <section class="sec-one">

      <aside>Aside</aside>
      <article>Article</article>

  </section>

    <section class="sec-two">
      <aside>Aside</aside>
      <article>Article</article>
  </section>

    <section class="sec-three">
      <aside>Aside</aside>
      <article>Article</article>

    <p>Content copy</p>


  </section>



<script src='js/responsive-nav.js'></script>
<script src='js/app.js'></script>

<!-- INITIATE RESONSIVE-NAV -->
<script>
    var navigation = responsiveNav(".nav-collapse", {
        label: '<i class=\"icon-reorder icon-2x\"></i>'
    });
</script>


</body>

</html>

Scopula answered 9/10, 2013 at 14:30 Comment(1)

Is your site mobile first? Selectivizr.js won't work with media queries in IE8. I'm working on a solution to this myself. – Brockwell 13/11, 2013 at 17:4

E

1

selectivizr.js is dependent on jquery (or similar libraries). Make sure that you're loading jquery BEFORE selectivizr...

<!--[if lte IE 8]>

**<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>**

<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->

Efrainefram answered 29/10, 2013 at 17:30 Comment(0)

H

1

Have you tried including HTML5 shiv?

Without that (or similar), IE8 won't be able to style elements that are new to HTML5 (eg. <section>, <nav>, etc). For me, selectivizr.js does indeed allow Neat to work with IE8, but if you're using HTML5 elements then even with selectivizr Neat won't be able to style them in IE8 without the HTML5 shiv. (nb. that's not actually a problem with Neat per se - it's a more general problem that stems from IE8 being a pre-HTML5 browser).

Effectively, selectivizr.js fixes the problems with selectors that IE8 doesn't recognise, while HTML5 shiv fixes the problems with unrecognised elements: if you're using HTML5 elements then in order to get everything working smoothly, you'll probably need both.

Horrocks answered 25/3, 2014 at 13:7 Comment(2)

Very late question, but do I just need HTML5 shiv + Selectivizr to support IE8? – Pelkey 26/5, 2016 at 5:15

Yep, that should do it. Like I said, HTML5 shiv covers unsupported HTML elements, while Selectivizr covers unsupported CSS selectors. Between them, you should be able to use Neat for IE8. – Horrocks 26/5, 2016 at 15:55

Recommended topics

Hot tags