How to support legacy browsers

Do you need to support any of the following browsers?

• IE8
• IE9
• IE10
• Opera Mini
• Android 4

If not, Skip this section!

Check caniuse.com and the browser statistics for your site to see if you need to bother taking any of these extra steps. You most likely can just skip this whole page since the browsers it caters to have extremely low usage. Browsers to be concerned about are IE10 and bellow, Opera Mini, and Android 4 browser. Gutter Grid doesn't support any IE (Internet Explorer) browsers lower than IE8 though.

Supporting browsers that support flexbox but not the latest syntax (IE10)

IE10 has support for flexbox however you will need to incorporate Autoprefixer into your build process to support it's outdated flexbox syntax.

Also be aware of this IE10 flexbox bug which can cause problems in page layouts.

Supporting browsers that do not support flexbox at all (IE8 & 9)

Gutter Grid is powered mostly by flexbox. When legacy support is enabled, it adds display:table, float:left and display:inline-block backups for when flexbox is not supported. In general it will use display:table since tables act in a very similar sort of way to how flexbox acts. However, when wrapping is involved and the browser does not support the flex-wrap css property, it will use float:left styling instead. The display:inline-block backups mostly come into play when horizontal cell alignment settings are used.

Enable legacy mode

To enable legacy support for browsers that don't support flexbox, you will need to set the $grid-legacy-support setting to true before the import statements.

$grid-legacy-support: true;

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-mixin';
@import '../node_modules/gutter-grid/grid-classes';

Please note that although there are fallbacks in place, they aren't able to perfectly replicate the behaviour of a browser that has full flexbox support. The design in IE8 & 9 won't look 100% like the design on browsers that support flexbox.

The fallbacks are mainly just there to help stop the layout from completly breaking on you when compared to using purely flexbox on it's own. You will likely need to do some extra custom styles but the fallbacks will most likely get you to about 80% or more of the way there.

Legacy mode does not wrap by default

In the modern version of Gutter Grid, grids will wrap by default if a column count has been defined. This is not the case when $grid-legacy-support is enabled.

Not wrapping by default allows legacy browsers to use table layout as a fallback for flexbox. Table layout forces the table cells to take up the full height of their parent element just like flexbox does. The downside to table layout is that it can't wrap. I wanted to use table layout as the primary fallback for Gutter Grid so I couldn't make wrapping the default behaviour in legacy mode.

Unless otherwise stated, I've written all the examples in the documentation assuming that Gutter Grid is not being run in legacy mode. If viewing examples in IE 8 or 9, view the mixin tab. The mixin tab has $wrap: true secretly applied to the examples in the real SCSS code. This allows the mixin examples to look more like what they are supposed to look like in IE 8/9. $wrap: true is not displayed in the example code since it is not necessary when running Gutter Grid in modern mode. The classes tab is an accurate portrayal of what Gutter Grid will output in IE 8/9 if you use exactly what is written in the example code.

Remember, if you want wrapping in legacy mode you always need to either add $wrap: true if using the mixin or .grid--wrap if using the class system.

Install Modernizr

In order to detect if the browser supports flexbox and flexwrap, Gutter Grid is dependent on Modernizr being a part of your build process. Gutter Grid cannot use feature queries to detect flexbox support due to IE10 and 11 supporting flexbox but not supporting feature queries. The particular Modernizr properties that it is dependent on are flexwrap and flexbox. To add Modernizr to your site, you have two options.

1. Download a custom build from the Modernizr website that includes flexbox and flexwrap in it, then load the javascript file that Modernizr generated into your website.
2. Incorporate Customizr into your build process. I recommend taking the second option.

If taking the Customizr route, you will likely need to force it to include flexwrap and flexbox tests since it won't look through the node_modules folder for Modernizr references (and for good reason!). You will also need to ensure that it is adding classes to the page. You can do this when defining the Customizr configuration settings like this:

// Minimum Customizr settings required for Gutter Grid to work.
{
  options: [
    'setClasses',
  ],
  tests: [
    'flexbox',
    'flexwrap'
  ]
}

Supporting IE8 specifically

IE 8 does not support the CSS :not() selector syntax. The Gutter Grid class system relies heavily on this :not() syntax for it's if/else logic. This means that the class system, while still usable in IE8, will not function properly. The mixin system handles all of its logic through real if/else statements so it doesn't need to lean on the :not() selector at all. If you need to make the site work in IE8, I recommend going with the mixin system.

Also, in order to better support IE8, the HTML for your HTML element will need to look something like this:

<!--[if lte IE 8]><html class="lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->

...

</html>

IE8 doesn't support the css background-clip property which is a key part of how the gutters are able to retain transparency. To get around this, Gutter Grid sets the colour of the gutters to whatever the $grid-gutter-ie-fallback setting is set to. The default setting for the variable is white so if your website has a white background then you won't need to do this step. If your site does not have a primarily white background, then you will need to set this variable to the primary background colour of your site.

//Defaults to white
$grid-gutter-ie-fallback: #fff;

$grid-legacy-support: true;
@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-mixin';
@import '../node_modules/gutter-grid/grid-classes';

Browsers that don't support calc() (Opera Mini and Android 4)

Opera Mini and Android 4 are a bit different. Accordion to caniuse.com, they support flexbox but they do not support the calc css function (or at least not completely in Android's case). By default (starting from version 4) Gutter Grid uses calc to calculate column widths unless the $grid-legacy-support setting is enabled. If you do not want to support IE 8 and 9, then enabling legacy-support will cause Gutter Grid to output mountains of extra fallback code that you don't actually need. Instead set $grid-calc-support to false which will force Gutter Grid to output pre-calculated percentage values rather than calc values whilst avoiding the mountains of IE 8 and 9 fallback code that the $grid-legacy-support setting brings with it.

// Produces 50% rather than calc(100% / 2);
$grid-calc-support: false;

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-mixin';
@import '../node_modules/gutter-grid/grid-classes';