How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers)?

, , Comment closed

cssCSS (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 find perfect with one browser, it can look nonaligned with another. This is why most developers seem to rely on CSS browser hacks. Here we list out some tips on how to use different CSS style sheets for different browsers.

Create from Scratch

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

Comply with CSS norms

It is easy to design a CSS code for highly norm-compliant browsers like 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 is about to launch a new version of Internet Explorer that will possess the current CSS bugs fixed. If it is released, you just need to remove the hacks which you made and you are done.

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 the omissions and bugs that are present in different browsers. The benefit with 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 make a whole separate style sheet for a particular browser. As mentioned earlier, most expertise CSS browsers are making 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 much convenient with different browsers.

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 Internet Explorer is ignoring that selector. Given below is the 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 Internet Explorer 4.01 version. But this does not happen in the case of 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 @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 of 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 that is probably the old browser and is still being used. This browser is full of bugs in its CSS execution. Thanks to the hiding CSS sheets system from Netscape 4. There are many well tested techniques to do this and all of them capitalize bugs in the CSS execution process. The methods are popular to work in all Netscape 4.X versions. There is two most commonly used techniques that are;

  • 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 of 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 bug than Netscape’s. It can hide your style sheet from some kind of versions of IE for Windows.

  • Media Attribute in the Link Tag

When you connect your style sheets with a media attribute instead of 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.

Conclusion

Though this list of workarounds and hacks are exhaustive by no means, they are useful and have minimum drawbacks. With these methods, you would be able to make a site that works greatly with different browsers. These ways to hiding CSS from certain old browsers has been found effective. Some of these techniques are hiding a whole style sheet from buggy browsers. Moreover, some of them let authors to 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 at your site. This will help you get a clear picture about the methods and apply them in an expertise and competent manner. So, make use of these ways of using CSS for different browsers.

Author bio: Henry provides SEO services and he challenges for providing affordable Web Designers across Birmingham and he is best Graphic Designers in Coventry.

Incoming search terms:

  • css older browsers
  • css apply style browser
  • different browser css code
  • how to use step css code for different web browser
  • steps for use css for different browsers
  • use different style for different browsers
  • what is browsers style sheet