Blog (my web musings)

Search Blog

IE8 Selectivizr support for Responsive Modal Gallery

Details

Published: 27th Jan 15

The common factor in all previous versions of the modal gallery is that alternative markup is offered for IE7/8 users to allow them to view image enlargements in a new browser window instead of the modal overlay. This is because those earlier versions of Internet Explorer do not support the CSS :target pseudo selector which triggers the modal overlay, but let's face it - having each image open in a new browser window doesn't do much for usability and it doesn't look very nice either. So, if you're still supporting IE8 and want to make things work as seamlessly as possible for those user too, keep reading...

Evolution from Earlier Versions

If you've been following the development of my modal gallery, you'll be familiar with how it has evolved from a CSS-only version to versions with JavaScript on-demand image loading, keyboard controls, pagination and PHP automation from images in a folder. If the fancy takes you, you can learn more about those versions in an earlier blog entry.

All we're going to cover here today is how to use Selectivizr to get this gallery working nicely in IE8 - where bigger images open in the modal overlay (like in modern browsers) instead of in another browser window (boo-hiss, IE7).

The next thing is to download and apply Selectivizr to the page. Note that you need an additional helper library too, such as jQuery or Mootools, but for the sake of this demo, I'm going to use the one that's smallest in size, which is DOMAssistant at around 30kb. I'm going to upload both JavaScript files to the same location as the web page and use the following conditional comments to serve them to IE8 only (in the <head> section of the web page);

Creating an External Stylesheet

Now, Selectivizr only works on external stylesheets so I'm going to create a CSS file called "ie8.css" (again in the same folder as the web page and both JS files) and copy all the CSS from the desktop media query into it. Remember that IE8 doesn't understand media queries so we must duplicate these desktop styles into a IE8 stylesheet in order for IE8 to see them.

That's not all though - because Selectivizr only works on external stylesheets, we need to copy all the CSS related to any of the selectors that we want IE8 to recognise, which in our case is the :target pseudo selector CSS;

The last thing to remember is to give transparency to IE8. Elsewhere in the CSS we used background:rgba(0,0,0,.75); to create transparencies for the modal overlay and caption box, but IE8 does not support rgba so we can serve MS filters to it in the "ie8.css" stylesheet instead;

And with our "ie8.css" stylesheet created, we link to it in the <head> of the web page inside more conditional comments for IE8 and under;

<!--[if lte IE 8]><link href="/ie8.css" rel="stylesheet"><![endif]-->

See the final demo and view the source of the web page to grab the JS, CSS and HTML markup.

Testing in IE8

You can test to see how it works in IE8 by pressing F12 while viewing the demo page in Internet Explorer. Then switch document mode to 8 in the Emulation tab.

All functionality is there in IE8 - the only things missing are cosmetic; rounded corners and circular background loading spinner which both use border-radius (unsupported in IE8). You can however substitute the spinner with "Loading..." text, just to help tie up loose ends;