Blog (my web musings)

Find out what's interesting me, get tips, advice, and code gems that don't fit elsewhere.

Search Blog

IE8 Selectivizr support for Responsive Modal Gallery

Details

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.

In the previous demo pages, I had mentioned the use of Selectivizr to extend support to at least IE8, but I never got around to covering it until now. So, for all intents and purposes, this is Version 4a: Responsive CSS3 Modal Gallery (with JS on-demand images, keyboard controls, pagination + Selectivizr IE8 support). It is the same as version 4 except with Selectivizr installed to make it work on IE8, so please refer to the version 4 page for more information about features and other JavaScript enhancements.

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).

Version 4a: Responsive CSS3 Modal Gallery (with JS on-demand images, keyboard controls, pagination + Selectivizr IE8 support):

Demo

Adding Selectivizr

The first thing is to change the markup a bit - the parts that used to look like this;

<!--[if gte IE 9]><!--><a onclick="load('img-1')"><!--<![endif]--> <!-- no href -->
<!--[if lte IE 8]><a href="/path/to/big/image.jpg" target="_blank"><![endif]-->

Will become this;

<!--[if gte IE 8]><!--><a onclick="load('img-1')"><!--<![endif]--> <!-- no href -->
<!--[if lte IE 7]><a href="/path/to/big/image.jpg" target="_blank"><![endif]-->

If you want, you could drop support for IE7 entirely by doing this;

<a onclick="load('img-1')">

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);

<!--[if IE 8]>
<script src="/DOMAssistant.js"></script>
<script src="/selectivizr.js"></script>
<![endif]-->

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;

#gallery .overlay:target { width:auto; height:auto; bottom:0; right:0; padding:2.875em 0 5em }

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;

#gallery .overlay, #gallery .overlay div p { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf000000,endColorstr=#bf000000) }

I've generated equivalent filter values for black with 75% transparency, but if you want to try something else, you can use this online generator.

The Final IE8 Stylesheet

Finish up by moving all the extra IE7/8 CSS (formatting tweaks and "Preview" bar) into the "ie8.css" file and the complete stylesheet looks like this;

/* #### - default to desktop css minus unsupported stuff (transform, border-radius, box-shadow) - #### */
#gallery .overlay div { position:relative; bottom:auto }
#gallery .overlay img { border:2px solid #fff; position:relative; top:auto; left:auto }
#gallery .prev, #gallery .next { display:block; left:50%; top:2.125em; width:2.5em; height:auto; background:#222; font:bold 0.875em/1.875em Arial; color:#fff; padding:0 0.5em; border:2px solid #fff }
#gallery .prev { margin-left:-5.625em; filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2) }
#gallery .next { margin-left:1.85em }
#gallery .prev:hover, #gallery .next:hover { background:#666 }
#gallery .next:after, #gallery .prev:after { display:none }
#gallery .close { top:1.175em; border:2px solid #fff }

/* #### - use MS filter in lieu of unsupported rgba transparency - #### */
#gallery .overlay, #gallery .overlay div p { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf000000,endColorstr=#bf000000) } /* http://rland.me.uk/cross-browser-alpha-transparent-background-10-2011/ */

/* #### - selectivizr only works on selectors in external stylesheet so repeat all :target stuff here - #### */
#gallery .overlay:target { width:auto; height:auto; bottom:0; right:0; padding:2.875em 0 5em }

/* #### - replace gallery thumbs magnifying glass with "Preview" bar in IE7/8 - #### */
#gallery .li a img { border:0 }
#gallery .li a span b { display:none; top:50%; margin-top:-1.5em; width:100%; height:auto; border:0; background:#000; font-weight:normal; color:#fff; vertical-align:top }
#gallery .li a:hover span b { display:inline-block; filter:inherit }
#gallery .li a span:before, #gallery .li a span b:before, #gallery .li a span b:after { display:none }

/* #### - gallery pagination - #### */
#gallery { *height:11em } /* manually set height for IE7 */
#gallery #galleryfirst { *position:absolute } /* IE7 */
#gallery .pagination { max-width:64em } /* fix thumbs to grid */

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;

/* #### - replace gallery loading spinner with "Loading..." text in IE8 - #### */
#gallery .overlay:before { content:"Loading..." }

Ta ta for now.