Different css for different browser


In an ideal world, you only need one set of CSS style sheets for your website, and those styles will work with every browser currently being used. This, as every web master soon finds out when he/she uses CSS, is a pipe dream. The modern browsers all have uneven levels of implementation of the CSS standards. As though this isn’t bad enough, their implementations are often buggy – and they don’t share the same bugs! And when you have solved that tricky bit, you find that your site has certain visitors (often your best customers) who, for various reasons, are using older browsers that have only rudimentary support for CSS.

What most (if not all) CSS-using web masters want is a way to specify that a certain style sheet is to be used by such and such a browser and not others, as well as to hide other style sheets from older browsers.

One of the easiest things to do is to specify that a certain style sheet be loaded only by IE 5, 6 or 7 (and later versions) and be excluded from those versions of IE.

Microsoft provides a non-standard extension that allows you to detect those versions of IE, and include or exclude code depending on those versions.

To cause (say) a CSS file like “ie6.css” to be loaded by IE 6 and not other browsers, use the following code in the HEAD section of your web page:
<style media=”screen” type=”text/css”>
@import “./css/style.css”;
</style>
<style media=”screen” type=”text/css”>
@import “./css/print.css”;
</style>
<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”./css/ie6.css” media=”screen” />
<![endif]–>
<!–[if IE 7]>
<link rel=”stylesheet” type=”text/css” href=”./css/ie7.css” media=”screen” />
<![endif]–>
Here ‘style.css’ and ‘print.css’ is global. It’s a simple example. If you want to know more details please inform me. I think now you should be able to create a site that works fairly similarly under the browsers being used today.

Advertisements

3 thoughts on “Different css for different browser

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s