How to Use Different CSS Style Sheets For Different Browsers

CSS (Cascading Style Sheets) is a programming language developed by the W3C. This language helps users to get the desired look and feel for their web pages and is also used when designing HTML and XHTML websites. CSS with different browsers seems to disagree on some features wherein they give CSS properties. Hence, when everything may look perfect on one browser, it can look nonaligned on another. That’s why most developers seem to be dependent on CSS browser hacks. Here are some suggestions on how to use different CSS style sheets for different browsers.

Creating from Scratch

If you create your site from scratch, then you will be able to do many things that were not possible with old layouts. Designing from scratch lets you capitalize on the new possibilities.

Comply with CSS norms

It is easy to design a CSS code for highly norm-compliant browsers like Chrome and Firefox first, and later add the hacks to make their code work on Internet Explorer. It is also good to write for standard-compliant browsers first. Microsoft’s latest new version of Internet Explorer has fixed the current CSS bugs.

Employ external style sheets

Put your standard-compliant CSS code in an external style sheet that is loaded by all browsers in order to deal with the omissions and bugs that are present in different browsers. The benefit of CSS is that you can redefine different styles for the same selector and have the last fixed style override all current definitions.

Internet CSS browser hacks

Generally, you will not need to create a whole separate style sheet for a particular browser. As mentioned earlier, most expert CSS browsers make picture-perfect style sheets without loading substitute style sheets. Still, some developers need 1 or 2 backs to make things competent and perfect. Therefore, making a whole separate style sheet to fix one or two properties looks purposeless. There are many methods of making browser hacks inside one style sheet. Though this technique is not desirable, many developers have found it effective and very convenient with different browsers.

Recommended:  What is W3C one web approach?

How to hide CSS code from older browsers?

Here we explain the ways to hide CSS code from different browsers.

Hide from Internet Explorer

Put a comment quickly after a selector in a CSS code, and see if Internet Explorer ignores that selector. Given below is an example of an example wherein ‘Large Text anyone’? is not enlarged in Internet Explorer;

<style type=”text/css”><!–

p.largetext/* */ { font-size: 200% ; }

–></style>

…(etc)…

<p>

Large text anyone?

</p>

It is true that some web designers believe that this method will hide the style for the selector on the Internet Explorer 4.01 version. But this does not happen in the case of the 4.01 version of IE on Mac. Hence, IE Mac employs a unique source code base from Internet Explorer for Windows. Thus, bugs in the Windows version do not involve bugs in the Mac variety.

Hide CSS from IE for Windows

You need to use the @import rule to load an external style sheet. Look at the given mentioned example wherein IE for Windows does not load it;

<style type=”text/css”><!–

@import url(not-oldbrowser.css);

–></style>

One drawback to this is that Netscape 4 won’t load the cited style sheet. Some webmasters claim that certain versions of IE for Windows are influenced in a manner that the style sheet is placed in a different directory from the HTML file.

Hide CSS from Netscape 4

Besides IE, other browsers also want you to code CSS sheets in order to work around bugs. The other browser is Netscape. It is probably the old browser and is still being used. This browser is full of bugs in its CSS execution. Thanks to the hidden CSS sheets system from Netscape 4. There are many well-tested techniques to do this, and all of them capitalize on bugs in the CSS execution process. The methods are popular and work in all Netscape 4.X versions. There are two most commonly used techniques;

• The @@import Rule

Using @import rule to load an outside style sheet will make the sheet to be hidden in Netscape 4. For example;

<style type=”text/css”><!–

@import url(not-netscape4.css);

–></style>

The drawback to this rule is that Internet Explorer 3 for Windows won’t load the style sheet. However, this is not bad as IE 3’s support for CSS is more bugged than Netscape’s. It can hide your style sheet from some versions of IE for Windows.

• Media Attribute in the Link Tag

When you connect your style sheets with a media attribute instead of a screen, Netscape won’t load them. Consider the following example;

<link rel=”stylesheet” type=”text/css” href=”not-netscape4.css” media=”all” />

And the given line will not work in Netscape 4:

<link rel=”stylesheet” type=”text/css” href=”not-netscape4.css” media=”screen,print” />

Netscape 4 loads the style sheet only when you exclude the media attribute or employ screen as the value for that feature.

Recommended:  How to provide IE only style sheets.

Conclusion

Though this list of workarounds and hacks is exhaustive by no means, they are useful and have minimal drawbacks. With these methods, you will be able to make a site that works well with different browsers. These ways of hiding CSS from certain old browsers have been found to be effective. Some of these techniques hide a whole style sheet from buggy browsers. Moreover, some of them let authors hide sections of a single rule. Hence, these techniques are perfectly valid CSS and do not need any kind of scripting to perform. You can ask associates and other developers for recommendations or their experience with these methods before applying them to your site. This will help you get a clear picture of the methods and apply them in an expert and competent manner. So, make use of these ways of using CSS for different browsers.