Applying Separate CSS Style Sheets for Different Browsers
Theoretically, you need to have just one block of CSS style sheets per website, which are applicable to every browser that is in use. As soon as you use CSS however, you find this to be just that: theoretical. Browsers today implement CSS standards unevenly, with bugs that are unique to specific browsers. In addition, you may find that a good chunk of your site traffic uses an old browser with very basic CSS support.
Working With CSS Style Sheets Across Browsers
The majority, if not all, webmasters using CSS are searching for a way they can stipulate which CSS style sheet to use for which browser. In addition, there should be a way to prevent others from using that style sheet, that is, to conceal the other sheets from old browser rollouts.
Unfortunately, there is not a conventionally documented way to include or preclude any specific style sheet from access by all browsers still in use for Internet access. However, there are ways to work around the system to accomplish the above, even though not so standard. This involves using known bugs, in particular rollouts of different browsers.
That being said, you may encounter browsers for which you want to code but do not know enough to work around. This article provides tips to use CSS that is applicable to the most frequently used browsers.
Before you begin: a few CSS coding tips
<!DOCTYPE html> <html> <head> <style> h1 { text-align: center; } p.Example { text-align: left; } p.main { text-align: justify; } </style> </head> <body> <h1>CSS text-align Example</h1> <p class="Example">CSS</p> <p class="main">CSS coding tips. Even if your CSS code has been validated, manual testing for different browsers is a must</p> </body> </html>
-
1. Start at the Beginning
Many web designers find it simpler to design the site from the ground using CSS, rather than finding ways to reproduce old layouts into CSS – even for pre-existing sites. In addition, beginning CSS design from scratch will allow you greater functionality that older layouts did not allow. You can therefore take full advantage of all possibilities.
-
2. Follow CSS Standards
As many webmaster have found, it’s much easier to code for browsers that are standards-compliant – most modern browsers are, including Firefox, Safari, Opera, Chrome and Internet Explorer (IE) 8 and later. From there, you can add the work-arounds to render the code usable for non-compliant versions like IE7 and IE6.
This is also logical because in time, the older versions are being phased out of internet use by preclusion from many sites’ functions, Google included. When they stop being used altogether, you will just need to remove the workarounds that you had developed for them. If you start by writing your principal CSS sheet for non-standardized browsers, you will need to rewrite it once they become obsolete.
Test out your CSS on at least three modern browsers, choosing those whose display technologies are completely different from each other. For instance, Firefox 28’s rendering engine is completely different from IE11. Konqueror, Opera 12 and later, Safari and Chrome use the same rendering engine. By so doing, you’re sure that your code works because it is written out correctly. Once done, you can add the workaround blocks for IE6/IE7.
-
3. Use External Style Sheets
A useful way to handle browser-specific omissions and bugs is to have the standards-compliant style sheet in an external sheet, which each browser loads. Then, for browsers requiring workarounds, you will load additional style sheets specific to each browser’s needs. In CSS, the last style defined overrides earlier definitions. When you externally place the main style sheet, you are easily able to remove segments applying to browsers no longer in use.
-
4. Testing
Even if your CSS code has been validated, manual testing for different browsers is a must. The fact that you have written your code in a standards-compliant way is no assurance that it will not render exactly the way you want on every browser. Manual testing will help you to find out how specific style sheets are loaded and executed on each browser.
Inclusion or exclusion of style sheets for IE9 and earlier
It is very easy to specify style sheets for IE 9, 8, 7, 6, 5.5 or 5 to load or exclude. This is because Microsoft has built conditional extensions that enable detection of these IE versions only; later versions of IE ignore those extensions.
For instance, if you want IE 7 to load some CSS file such as ‘iesevenonly.css’, but no other browser, add this code to the HEAD of the webpage:
<!--[if IE ?]> <link rel="stylesheet" type="text/css" href="iesevenonly.css" /> <! [end if]>
Note: In HTML unlike XHTML, you donot need to add the “/>” to close the link tag, a single angle bracket is sufficient.
To specify any version of IE with minor versions, the major version is sufficient. For instance, specifying for IE 5 includes all its minor versions i.e. 5.5, 5.01, 5.0 etc. However, if you detect a minor version then you have to get the complete version number right. For IE 5.5 and file ‘iespecific.css’ for instance:
<!--[if IE 5.5000]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <! [endif]-->
If a user’s version of IE5.5 has received an update of later service packs for example, the test would fail. To make work easier, you can use comparison operators i.e. ‘lt’, ‘lte’, ‘gt’ and ‘gte’. For instance, if testing for all versions of IE5 or greater, the ‘gte’ operator can be as follows:
<!--[]if gte IE 6]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <! [endif]-->
For these blocks of code, only IE 5-9 will try to analyze the code for instructions that may be applicable to them. IE 10 and beyond, as well as other modern browsers will simply ignore the block.
You may apply the same method to exclude specific style sheets. Suppose you want to exclude the CSS file “ie-skip.css” from IE7:
<!--[if !(IE ?)]> <link rel="stylesheet" type="text/css" href="ie-skip.css" /> <! [endif]>
This code would not validate in HTML validator, because it does not use currently valid tags in HTML. You can also test for IE in general, without defining specific version numbers. To load a style sheet if the browser isn’t IE 5-9:
<!--[if !IE ?]> <link rel="stylesheet" type="text/css" href="ie-skip.css" /> <! [endif]>
The “!” is the not operator
Conclusion
This is by no means an exhaustive list of workarounds and hacks, but it provides useful information that you can use without causing too many undesired effects. Armed with this bag of tricks, you should now be able to create a site in CSS that will render in pretty much the same way for all browsers currently in use.
