Another day, another guide.
Lets begin.
We all know that coding for IE can be a pain and can sometimes hold us back. We may have to try and write cross platform code (IE, Chrome, FF etc) and this can limit the features and aesthetics that we can implement as quite simply, most of it will not work in IE.
However, instead of writing one style sheet, we can write more than one.
To target browser versions lower, use the "lte" command.
Take this for example:
As you can see we can now add some special code for Internet Explorer version 6. However we can go one step further with the targeting and do:
As we can see this will target everything lower than or equal to Internet Explorer 9.
To keep the page a little tidier though you may want to link it:
For some reason, you may want to target everything above a certain browser. We can use the "gte" to target them:
That will link to the other style sheet for anything that is greater than IE8 (IE9 today then) but you can also insert code.
This is a css "hack" and may stop your CSS from being validated by things like the W3C validator, so if it is important to you then I just suggest writing one global css file.
I hope this is helpful to some people (:
Josh
Lets begin.
We all know that coding for IE can be a pain and can sometimes hold us back. We may have to try and write cross platform code (IE, Chrome, FF etc) and this can limit the features and aesthetics that we can implement as quite simply, most of it will not work in IE.
However, instead of writing one style sheet, we can write more than one.
To target browser versions lower, use the "lte" command.
Take this for example:
Code:
<link type="stylesheet" type="text/css" href="global.css">
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
As you can see we can now add some special code for Internet Explorer version 6. However we can go one step further with the targeting and do:
Code:
<link type="stylesheet" type="text/css" href="global.css">
<!--[if lt ie9]>
Special instructions here for anything lower than or equal to IE9
<![endif]-->
As we can see this will target everything lower than or equal to Internet Explorer 9.
To keep the page a little tidier though you may want to link it:
Code:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
For some reason, you may want to target everything above a certain browser. We can use the "gte" to target them:
Code:
<!--[if gte ie8]>
<link rel="stylesheet" type="text/css" href="ie8-only.css" />
<[endif]-->
That will link to the other style sheet for anything that is greater than IE8 (IE9 today then) but you can also insert code.
This is a css "hack" and may stop your CSS from being validated by things like the W3C validator, so if it is important to you then I just suggest writing one global css file.
I hope this is helpful to some people (:
Josh







