IE has always caused headaches for every developer, and as the web is moving forward with the likes of CSS3 and HTML5, it’s time to fully drop support for IE7.
We all know a site won’t look the same in every browser, but to take advantage of features such as the great
box-sizing: border-box; and CSS3, we must keep advancing. IE8 isn’t perfect, but one of the best features is that it supports the
border-box model without any polyfills.
What is border-box?
If you haven’t heard about it, the
border-box model solves a lot of issues with the default box model—especially in responsive design. Another thing it’s great for is when using a grid system. It allows us to write less markup if we need to add any inner borders or padding to a grid box. Without box-sizing, a perhaps slightly over exaggerated example would be:
border-box, if we applied the padding and border on
.box the width would grow to 502px—breaking the layout. This is because the total width equals the element width padding borders. In this case; 460px (element width) 40px (left and right padding) 2px (left and right border). This is why the extra divs are needed to keep
.box at 460px wide. However with
border-box we can do this:
border-box box model’s total width includes the padding and borders, this keeps
.box at the width we want when padding and borders are applied. Basically, padding and borders no longer affect the overall width. Awesome. I can see
border-box being included in future CSS resets as it makes things a lot simpler.
Supporting a browser should be about the user being able to navigate and use the site, not about seeing all the fancy CSS3 features. Sure, whilst it’d be great to see those rounded corners and shadows, it doesn’t affect the overall usability. Utilising
border-box can however affect usability in IE7 as columns and alike are likely to fall apart without providing any polyfills. This is why we should advance to a browser that can natively supports
On a recent project I found myself needing to show a message to IE7 and below users, as using
border-box did indeed brake the layout. Enter BrowserBlast!
BrowserBlast is a lightweight and fully customisable jQuery plugin to display a warning for IE7 users and below to let them know their browser isn’t supported anymore. This should hopefully urge them to update to a modern browser. The banner is persistent so it’s not just dismissed and forgotten by the user. We want them to be aware and update.
In some cases, such as client requests, we may need to maintain IE7 support. Not to worry! BrowserBlast includes the option to select which IE version you support to display the warning to lesser browsers. This also means when the time comes for dropping IE8 support we can still utilize this plugin.
To make theming the banner simple to fit in, or stand out if you wish, with your site, I created basic styling options to avoid requiring implementing any additional CSS. If you want to further customisation using your own CSS, simply set
true. This will ignore any styling in the options so you have full control of how it looks—simply target the
#unsupported selector in your CSS. To easily check the styling without needing to disable or keep checking IE, BrowserBlast includes a development mode to make the banner display on all browsers. Below is an example of usage with all the options:
As developers we can help strip the last usage of IE7 as much as possible using BrowserBlast, leaving us happy, headache free and to not worry so much about the remaining small percentage of people who are using it.