Smarter IE conditionals, v1.2

Posted on by Nathan

The way Gridset serve grids to IE has changed. Before, there was an alternate IE grid sent to IE 9 and below, using the grids you set as your IE grid in the settings. This removed all media queries from IE 9, though IE 9 supports them. Not ideal.

IE 9 does, however, have the same CSS selector limitations as 8 and below (no more than 4095 selectors in a file), so we still need to work around that problem for complicated grids. Therefore we developed a smarter system in Gridset for identifying these issues and serving the right grids.

If you use the Embedded CSS Link, this will all be handled for you, but for production sites, you will now see one of three different IE conditionals in your demo.html file:

Simple grids, all the same width

<link rel="stylesheet" href="./css/gridset.css" />

If your grids are fairly simple, and they are all set for the same width (meaning there is no need for media queries), your CSS will be linked in one line.

Simple grids, different widths

<!--[if (!IE) | (gt IE 8)]><!-->
<link rel="stylesheet" href="./css/gridset.css" />
<!--<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="./css/gridset-ie-lte8.css" />
<![endif]-->

If your grids are fairly simple, but they are set for different widths (meaning there is a need for media queries), your CSS will be linked in two lines. The first link is wrapped in a conditional to only use that stylesheet if the browser is not Internet Explorer, or is a version of IE greater than 9. The second one links to a CSS file containing only the grids specified in the settings for your grid set. Since IE8 and below do not support them, this file contains no media queries. The conditional wrapping this line will serve this CSS to IE8 and below only.

Grids with many columns, different widths

<!--[if (!IE) | (gt IE 9)]><!-->
<link rel="stylesheet" href="./css/gridset.css" />
<!--<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" href="./css/gridset-ie-9.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="./css/gridset-ie-lte8.css" />
<![endif]-->

If your grids have 14-18 columns, and are set for different widths, your CSS will be linked in three lines. The first link is for modern browsers, and the last one links to a CSS file containing only the grids specified in your settings, as before, but the middle line serves a different grid to IE9 specifically.

IE9 supports media queries, so it should receive those styles, but it has the same 4095 selector limit as IE8 and below, and therefore needs a slightly different arrangement. For high-column grids, we generally have to split the IE CSS files to circumvent the selector limit.

In depth

Gridset does, of course, do all of this for you, but in order to learn more about how this works, I highly recommend digging through the files in your download .zip, and feel free to contact us with any questions.