Guide to Using Different CSS for Different Browsers

The world of the web is intriguing. For beginners learning how to code web pages, it is as simple as building an HTML-CSS powered website with a focus on one variant. However, things change when it comes to real-world development.

For any web project, you will need a CSS style sheet. After all, it commands how your website will look and feel. So, how many CSS style sheets do you need to make your project work?

The real problem lies in how the CSS standards are implemented across different browsers. They are not consistent at all. Moreover, they are buggy in their own implementation and the bugs differ across different implementation methods. As a web developer, that’s a lot to take in. To overcome these issues, you need to use different CSS style sheets for different browsers.

As of now, there is no standard way of doing so. Everyone can do it their own way. However, the method that we will be choosing can lead to better results.

CSS for Different Browsers

Most of the blogging guides focus on getting your site ready. However, none of them really tell you about the complexities, such as the requirement for different CSS style sheets for the browser. If you like building your blog or a website from scratch, then this guide will genuinely help you to understand the technical aspect.

Before we get started, we want to share some tips regarding CSS design and how you should approach the whole project. These tips will help you tackle the CSS stylesheet issue better.

1. Start from scratch: It can be so tempting to use a CSS template or copy from other projects. But, it can lead to problems. The best approach is to design from scratch and produce CSS with careful planning. This will also enable you to design your project with new paradigms in mind.
2. Use external style sheets: External style sheets can help you manage your CSS better. It will also let you keep all the standard-compliant CSS code in one place and load it from there. This way you can add more CSS later without losing track of what’s going on with your CSS code.
3. Follow the CSS Standards: Following CSS standards will enable you to get your work done faster. It is recommended to get started with older browsers compatibility and then move on to the modern browsers.
4. Testing: At the end of the day, all that matters is testing. You need to iron out any bugs that you find and also make sure that your code works the way it should.

Style Sheet for IE Versions 5-9

Making your website compatible with the older versions of Internet Explorer is necessary. The good news is that you can specify the version of IE and then load the corresponding CSS style file.

Targeting Specific Versions

To detect the IE version, you need to use a non-standard method. It works both by excluding or including the version of the IE you are targeting. Let’s see an example below.

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ierelated.css" />
<![endif]--> 

The code above uses “conditional comments” that can only be detected by IE browsers. The above code, however, needs to be used in the HEAD section of the webpage.

For other versions of the Internet Explorer, all you need to do is change the number of the version you want to target. For example, if you want to target IE 7, you need to do use the following code.

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ierelated.css" />
<![endif]--> 

Targeting a Specific Minor Version

So, what happens when you want to target a minor version such as IE 5.5? Then, you have to modify the code a little bit to make it work. See the following code

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ierelated.css" />
<![endif]--> 

As you can see, we have used the whole version number to make it clear which version we want to target specifically. However, this does come with a drawback, as a slight change can make the above code useless.

Using Conditional Operators

To overcome the problem of exact version matching we can use other operators such as lte (less than or equal), lt (less than), gt (greater than), and finally gte (greater than or equal).

Let’s understand it by going through the following code.

<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="ierelated.css" />
<![endif]--> 

The code above works by checking the version of Internet Explorer. Then it checks against the condition that you have set. In this case, we have covered almost all of the versions of Internet Explorer. As CSS identifies IE 10 as a modern browser, the code doesn’t cover it and will work only from IE 5 to 9.

In the same way, you can exclude certain IE versions or make sure that it checks for a specific range.

Exclude a Particular CSS File

Last, but not least, you can also use the conditional statements to exclude a certain CSS file. It can be done by using the following code.

<![if !(IE 7)]>
<link rel="stylesheet" type="text/css" href="notiespecific.css" />
<![endif]> 

The “!” operator in front of the IE7 is a NOT operator that tells the browser to use the code only when the specific version is not matched.

All the code that we have used in our tutorial are not valid HTML tags. That’s why they will not be validated in the HTML validator.

Making the Style Sheet Work on non-IE Versions

To make the stylesheet work on other browsers, you can use the following code.

<![if !IE]>
<link rel="stylesheet" type="text/css" href="notiespecific.css" />
<![endif]> 

Conclusion

Using different style sheets is mostly required for the older browsers. In modern browsers, you can use a specific CSS file. So, what do you think about the guide? Comment below and let us know. <h3>About the Author</H3> <em><strong>Madan Pariyar</strong> is a blogger at <a href=”http://www.webprecious.com/” target=”blank”>WebPrecious</a> and a digital marketing strategist helping clients to resolve their website woes. When not busy with all these things, you may find Madan occasionally watching movies, traveling and spending time with family.</em>