A compiled version of mostly used CSS hacks/filters used for Cross Browser Compatibility issues. (Ahh and yes the issues are always because of IE, more specifically a poor level of Standard Support in IE :P )
In the list below first 4 points are preferred. By preferred it doesn't mean to always use these. These hacks are only to be used when needed. For some of hacks it will not be a Valid CSS. So better use these with caution.
1. Conditional
SYNTAX:::
Positive
<!--[if condition]> HTML <![endif]-->Negative
<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->condition is one of the following:
IE
For ALL versions of IE
lt IE version
IE versions less than version
lte IE version
IE versions less than or equal to version
IE version
Only specified version of IE
gte IE version
IE versions greater than or equal to version
gt IE version
IE versions greater than version
version is the version of Internet Explorer 5, 5.5, 6, or 7
NOTE: Versions of IE older than IE 5 don't support conditional comments, you may get unexpected results in those browsers.
NOTE: Versions of IE for MAC don't support conditional comments.
<head>
<title>Test</title>
<link href="allBrowsers.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="onlyIE.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="belowIE6.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="new.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]>--> <link href="gudBrowsers_notIE.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>
2. !important
background: green !important; /* Major browsers other than IE 6 and below respect the importance immediately */
background: red; /* IE 6 and below use this value instead, even though the above was marked as important */
3. @import
@import "styles.css" all; imports the stylesheet in all major browsers except IE 7 and below. It may or may not work in future versions of IE.
4. body[class|="page-body"] {} selects the body element with the class page-body in IE 7 and all modern browsers except Opera 9 and below. It may or may not work in future versions.
5. _property: value and -property: value apply the property value in IE 6 and below. Warning: this uses invalid CSS.
6. *property: value applies the property value in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS
7. body:empty {} selects the body element in Firefox 1.5 and 2.0 only. It may or may not work in future versions. Warning: this uses invalid CSS 2.x but valid CSS 3 according to recent drafts.
8. >body {} selects the body element in IE 7 only. It may or may not work in future versions. Warning: this uses invalid CSS!
9. html* {} selects all descendants of the html element in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS!
10. The !ie identifier allows the property to be applied in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS!
11. The !important! identifier allows the property to be applied with importance in IE 7 and below and the property is not applied in other browsers. It may or may not work in future versions. Warning: this uses invalid CSS!
Thanks to http://www.webdevout.net/css-hacks. Please do visit it for details. I have changed a few things for easy understanding and quick reference.
No comments:
Post a Comment