Using Modernizr in Squiz Matrix

coolwebs · 2015-03-17 23:42:11 UTC

Hi all,

Our web team has decided to implement Modernizr into our website builds now to better support older browsers (predominantly IE). We believe that this is much better than writing conditional CSS which is not well supported anymore as you can only target <IE10 and it just adds extra css files and bloat.

Anyhow, Modernizr is the way we detect browser features such as SVG, SMIL, etc and then implement styles that will act as fallbacks if the features are not supported by the browsers (IE8 and IE9 - I am looking at you). However, problem is that IE8 does not want to play ball with me and it seems that the Modernizr script does not work at all because it does not inject any of the supported/unsupported classes into the HTML tag. Another related issue is that I cannot actually write in the class "no-js" into the HTML tag because I don't know if Squiz Matrix will let me do that (can it?).

But anyway, even though I don't put that class into the HTML tag, the other modern browsers (IE11 included) will show the supported features as HTML classes when I run the page through developer tools console.

I thought this might just be IE8 playing silly tricks but I did a test page on my own server outside the Squiz environment and it worked fine, see here: http://www.coolwebs.com.au/svgTest/

Could there be anything within Squiz Matrix that may cause conflict with Modernizr and its functionality being implemented in the IE8 browser?

Anthony_Barnes · 2015-03-18 00:29:16 UTC

Could there be anything within Squiz Matrix that may cause conflict with Modernizr and its functionality being implemented in the IE8 browser?

Short answer is no. We use this for almost all designs we produce for clients including those that support older IE 8. There might be some other JS on the page that is causing this to fail. Older IE is notorious for blocking the JS runtime for simple things like syntax errors (e.g. missing semi colon). I'd fire up the developer tools (F12) and check for errors.

Another related issue is that I cannot actually write in the class "no-js" into the HTML tag because I don't know if Squiz Matrix will let me do that (can it?).

This is another we we normally do by default on all client designs (swapping out 'no-js' for 'js-enabled' on page load). Matrix should give you full control over the HTML for each design, assuming you have permission to do so.

coolwebs · 2015-03-18 05:53:55 UTC

Think I may use the design assets to insert the class into the HTML tag actually. I can't see anything that is causing the conflict in scripts right now. I turned off all the javascript files except for Monderizr script itself and It still does not work. I looked into the IE8 debugger and it did not throw any errors either.

Not sure where to go with this one. I just really hope we don't have to support IE8 at all for much longer....

aleks · 2015-03-18 12:33:37 UTC

You could something like in from within your parse file?

And then later in the document:

<!-- script aimed to speed up JS detection and update no-js class on HTML element -->
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>

NickyP · 2015-03-19 10:01:16 UTC

The no-js class is used by the Modernizr feature detection library. When Modernizr loads, it replaces no-js with js. If JavaScript is disabled, the class remains. This allows you to write CSS which easily targets either condition.

We have a body class of 'no-js' and a jQuery function to removeClass 'no-js' then addClass 'js-enabled' so if JavaScript is disabled the 'no-js' remains.

coolwebs · 2015-03-25 00:24:52 UTC

I did manage to put the no-js class into the html element via the design asset (should have known better). Did not make a difference however as modernizr does not seem to detect in IE8 Squiz based website. @Nickyp, I could use the Jquery function but I think the result would tell me the same thing as Modernizr not injecting the classes - JS support is going by the wayside for Modernizr in IE8...

BUT... I am using Virtual Box to test it and as it is a virtualization, perhaps its not really an issue at all - Maybe Oracle is playing mind games with me....

I ended up just finding non Modernizr techniques of writing 'fixits' for IE8. I might try this again in the next project but hopefully by then, support for IE8 will be wiped from the face of the earth.... we can all dream of better times.

I really hope Microsoft listen to the community in their new SPARTAN project - please don't cause us anymore pain Bill....