Display flex back to old browsers

CSS3 and HTML5 has brought us a host of new and exciting features, but then the party poopers come and tell use we need to make sure everything works on the older browsers. At this point we realise these older browsers need some hammering to make sure the new toys still work. One of these features is the display property’s value ‘flex’.

First we need to know what the flex property does and that is, it bring everyone together. By this we mean when the parent has this property on it, all the children fall inline and to the same height. This is close to replicating the table cell attributes and elements as they will shrink and expand equally. This is also the same for the height, as if one child’s content expands more then the other, then they all expand.

There of course is more properties and values that can determine the sizes, directions and wrapping etc. You can find out more about these property at either W3School or CSS-Tricks

This is a great tool as we can keep the properties of the current element type, but give it all the fun of thing like tables. However, the fun stops when you use older browsers like IE8 or any thing less then the ones described below:

Browser
Chrome
Internet Explorer
Firefox
Safari
Opera
Version
29.0

21.0 -webkit-

11.0

10.0 -ms-

28.0

18.0 -moz-

9.0

6.1 -webkit-

17.0

What we need to do for these browsers then, is force the child items to be a division of the parent element and all the same height. This isn’t the most complex thing to do, but here is how I did it.

The first thing we need to do is check if the browser supports the ‘flex’ value or not, as we don’t want to effect the browsers that do. We can do this by checking the CSS property ‘flex’ of the selected item, which if it is supported then it will return a value. If the browser doesn’t then it will be undefined and that we can test with the ‘typeof’ operator.

JQuery:

if (typeof $('.ElementClass').css('flex') == 'undefined' )

Javascript:

If ( typeof document.getElementById('ElementID').style.flex == 'undefined' )

Once we know ‘flex’ is not compatible, we can activate our dynamic copy. You can see from the example below that for the width, we get the total amount of children and divide 100 percent by that number. This will then give us an even percentage on each child to fill the total parent container.

For the height, we just loop through all the children to determine which is the tallest container, then we can set the height of all the others to that same height.

//Get the longest height
var heightTop = 0;
for (var i = 0; i < $(el).length; i++) {
$($(el)[i]).height() > heightTop ? heightTop = $($(el)[i]).height() : '';
};

//Set the height and width
$(el).height(heightTop);
$(el).width((100 / $(el).length) + '%');  

This can then all be put in the on document ready method and the on window resize, so it runs when it loads and also when the window is shrunk.

JQuery:

$(document).ready(function(){ /* Add Method Here */ }); $(window).resize(function(){ /* Add Method Here */ });

JavaScript:

window.addEventListener('resize', AddMethodHere, false);

Check out the full solution here on the Pure Random Code CodePen.

Comment below what you think of it and how you work with browser compatibility.

Advertisements

Leave a message please

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s