Part 6.5Cross platform and browser compatibility

One of the most important things about web design and web applications is cross-browser compatibility.

Cross-browser compatibility is one of the reasons the Web is so powerful. Build cross-platform functionalities for one browser and it works for another.

Cross-platform design is all about buiding websites that work on all platforms and all types of devices. Consider a website designed specifically for the desktop market. This is losing the smartphone and tablet markets where there exists a very large market.

Browsing on the move is a very important potential market that websites ought to tap into.

This particular article in this tutorial will cover cross-browser compatibility and how CSS has most of it covered.

The basics of cross-platform development

A lot of applications out there are now moving to a web-based interface, particularly in business.

This means that as big businesses depend on these applications, so the application should be compatible with the latest software as well as the older software (Internet Explorer 6+).

In most cases, the browser will work the same as the next, but sometimes there are certain features that have only been semi-implemented. Most of this is actually rather easy, with a couple of simple changes a website can work with multiple browsers.

Why bother with older browsers?

It's surprising how many people actually use older browsers. A lot of companies out there still rely on out of date technologies such as Internet Explorer 8 and because of the way in which the system being used is installed, makes it difficult to update.

Web-based applications should strive for CSS that works regardless of platform, no matter what.

How to achieve cross-platform CSS

For this to be a successful project, the application needs to work in three browsers.

Example with multiple stylesheets

The first option in solving this is to use multiple stylesheets. Checking for this could be achieved from the backend of the application. For this example, some PHP has been used to check the user agent string:

<?php
	if(str_pos($_SERVER["HTTP_USER_AGENT"], "Firefox") > 0)
		print ('<link rel="stylesheet" type="text/css" href="firefox.css">');
	if(str_pos($_SERVER["HTTP_USER_AGENT"], "Chrome") > 0)
		print ('<link rel="stylesheet" type="text/css" href="chrome.css">');
	if(str_pos($_SERVER["HTTP_USER_AGENT"], "MSIE 8.0") > 0)
		print ('<link rel="stylesheet" type="text/css" href="ie.css">');
?>
		

Whilst this works, it does not work incredibly well. This is because browsers do change (albeit very infrequently) their user agent strings. Further to that, there are plans to change the way user agents are sent to servers as a result of concerns raised about computer security and privacy.

Example with prefixed CSS

Browsers support their own implementations of a lot of features such as with gradients or with box shadowing. Prefixing was demonstrated with gradients, but not explained.

Prefixed supported CSS are CSS properties that only the browser with the prefix support will notice. Prefixes are used to inform that browser to use it's styling engine to style the element that way. Most prefixes follow a proposed W3C standard, but one that has not been fully released. As a result, the browsers may implement it in a slightly different way to the recommendation by the W3C.

Apple-supported WebKit and Google's Blink (forked from WebKit) engines tend to be the first to bring in new features, especially for touch, and as a result there are a lot of CSS properties that only work with their browsers.

There are several prefixes as shown by this table:

These prefixes can be placed in front of a property that requires it, such as the box-shadow property and the browser will render it as if it had full support. The issue with these non-W3-standard version is they may not be implemented fully. As such, certain W3 documentation may not be valid.

The best option

The best option by a long shot is to find out which properties are supported by the browsers targeted. This can be a difficult thing to achieve for a mainstream website, but remember that mobile browsers have more support for modern properties than most desktop browsers.