All geek questions in one place

How to use Selectivizr to make a Bourbon Neat grid a network in IE8?

I have an unsuccessful task to make Bourbon Neat work with ie8. Thoughtbot docs say you use Selectivizr for this. I followed the instructions of Selectivizr and I do not see anything else when testing in ie8. I also don't understand what if any backup css is required. Any ideas or solutions? Most valuable!

<!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>
+6
source share
2 answers

selectivizr.js depends on jquery (or similar libraries). Make sure you download 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]-->
+1
source

Have you tried enabling HTML5 shiv ?

Without this (or similar), IE8 will not be able to style elements that are new to HTML5 (e.g., <section> , <nav> , etc.). For me, selectivizr.js really allows Neat to work with IE8, but if you use HTML5 elements, even with selectivizr Neat will not be able to style them in IE8 without HTML5 shiv. (nb. This is not a problem with Neat per se - it is a more general problem that IE8 is a pre-HTML5 browser).

Effectively, selectivizr.js fixes problems with selectors that IE8 does not recognize, while HTML5 shiv fixes problems with unrecognized elements: if you use HTML5 elements, then for everything to work smoothly, you'll probably need both.

+1
source

Source: https://habr.com/ru/post/955587/

More articles:


All Articles