When it comes to web standards it can be frustrating trying to use new techniques when your audience may not be equipped to see them. Sometimes it can be time consuming and tricky to implement workarounds and alternate solutions. But not always! Here’s a few simple tricks to make sites a little more backwards compatible, with minimal effort.

It’s not about trying to make your HTML5 / CSS3 layouts miraculously compatible with antiquated browsers such as Internet Explorer 6. But it is easier than you might think to make things degrade more gracefully, and smooth things over for the occasional technophobe who may visit your site with a browser that hasn’t been updated in years.

 

1. Don’t waste your time

As always, the issue of browser support depends on your audience. If you’re offering a cutting-edge online service for users with good technical knowledge, the chances of non-compliant browsers will be slim. You may decide it’s not worth investing time into. But if you’re selling hearing aids and walking sticks, you may find that your traffic involves more IE6, 7 and 8 browsers than the average figures would suggest.

Don’t just take general statistics for granted; what may only be a few percent of Internet users globally may be a much larger proportion for your own site.

Whatever your decision, make it an educated one. Tools like Google Analytics can help you track what browser versions your users have installed, so you can choose where to focus your efforts. You may only need to accommodate one or two browsers (if any), rather than the full range of outdated versions. Strike the balance between supporting as many of your users as possible, and not wasting your time unnecessarily.

 

2. A few extra lines go a long way

As a habit, whenever I add a border radius to an element I always do it in three lines.

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

It takes all of a few seconds to copy the first line once I’ve added it, paste it twice and quickly add the prefixes. The -webkit prefix supports some older versions of Safari and Chrome, and the -moz prefix supports some older versions of Firefox. Don’t forget to put the vendor prefixes first, though – this ensures that the most up-to-date standard is used if it’s available.

I was once told that the 1st and 2nd lines are no longer necessary, because most people use browsers that support border-radius. That may be true, but “most people” isn’t everyone. For me, two extra lines feels like a tiny extra effort on my part. Even if a small percentage of users are using outdated browsers, a quick copy and paste when adding a CSS attribute is a small concession to give them as much of your intended design as possible.

Other visual styles such as box shadow also need a browser specific prefix for older versions. Depending on how much those effects contribute to your overall design, they’re certainly worth considering. If it’s a key element to the overall look and feel of your layout, don’t you want as many people as possible to enjoy it that way?

 

3. Double-wrap with semantic elements

HTML5 introduced some great new semantic elements. These HTML containers can be used just like a regular div, but have names that you can use to associate with your content in the markup. header can contain your site’s logo, for example. nav could contain the site’s navigation, and so on. There’s eight new elements in total, each with their own suggested usage. While they don’t do a great deal yet, they may eventually be used for search engines and other tools to better understand a page’s content. It’s definitely worth using them and starting to integrate these tags into your layouts.

As you may have guessed, some older browsers don’t support these semantic elements. The content you put inside them won’t disappear, but the semantic element will appear as an empty tag in the browser with your content immediately after it. Any CSS or JavaScript you apply to the semantic element will be ignored, as will any styling that refers to the semantic element in the CSS / JavaScript selectors.

I’ve seen some solutions that involve JavaScript libraries to force support in the browser, but it seems entirely unnecessary and may have a performance impact loading in extra JavaScript we don’t need. The simplest solution is wrap your content in both the semantic element and a regular div, and to apply your CSS or JavaScript as if it doesn’t exist! There’s no downside to a single extra div in your code, and you’ll still get the semantic benefit of your HTML5 elements whether you include it in your selectors or not.

What would happen to the following HTML and CSS in Internet Explorer 8?

<nav>
<ul>
<li Menu item 1 </li>
<li Menu item 2 </li>
<ul>
</nav>

nav { width: 100%; }
nav ul { background-color: #000000; }
nav ul li a { color: #FFFFFF; }

You’d be left with an empty <nav /> element in your HTML, and an unstyled list immediately after it. The browser would ignore the HTML5 semantic element, and any styling that referenced it as a selector.

But the alternative is nice and simple.

<nav>
<div class="navigation">
<ul
<li Menu item 1 </li>
<li Menu item 2 </li>
<ul>
<div>
</nav>

.navigation { width: 100%; }
.navigation ul { background-color: #000000; }
.navigation ul li a { color: #FFFFFF; }

It’s as if the semantic element isn’t even there! The browser would still display the list and style it correctly. There’s nothing to be lost this way, but your content is still wrapped in the semantic elements for any browser or search engine that’s looking for them.

4. Media queries can function as a browser check

Media queries are normally used to wrap some CSS in a condition that only applies the styling if it is met. For example, the following styling will only be applied when the user is viewing the page on-screen (as opposed to printing it), and the browser is no wider than 500px.

@media screen and (max-width: 500px) {

body { font-size: 14px; }

}

But we’re also implying another condition: that the browser supports media queries in the first place. Sometimes the CSS you want to use might not display the way you want it to in an older browser. Some versions of Internet Explorer are notorious for not just ignoring a CSS attribute, but handling it completely differently to any other browser.

Some browsers support media queries, but not all of the conditions involved. So you may still need to include a max-width to have the browser ignore your CSS. It doesn’t matter what the value is, and you still want your compliant browsers to see it, so just make it an obscenely large number and you shouldn’t run into any problems.

@media all and (max-width: 1000000px) { ... }

The upside to this is that any browser that doesn’t support media queries will simply ignore any CSS within it. It’s not advisable for wrapping a lot of CSS in, and it’s mostly a hacky approach to deal with certain problematic situations. But it’s surprisingly easy, compared to loading in a whole JavaScript library or additional stylesheet to override things.

 

5. Don’t just leave it broken

If you still think the previous tips are pointless and not worth worrying about, at least consider this. When a user does visit your site with an older browser version, will they realise that’s the problem? If they’ve never updated their browser, chances are that they probably have no idea why it’s so important.

Rather than leave them thinking it’s your site that’s broken, do them (and your fellow developers) a favour by letting them know why! Adding a message to the top of your site is a way of letting someone know why they might be looking at a broken layout, and suggesting a solution. It’s good for them, and goes some way to modernising the few non-compliant browsers still in use!

Site browser warning

There are a lot of other ways to bring more support to older browsers. Whole JavaScript libraries can replicate functionality on a comprehensive level, but they depend largely on how complex your site is to begin with. If you’re building an advanced web-based API, browser support is a much more technical issue to address.

But these few simple tips are a great way to cover your bases quickly and easily on more straightforward layouts.