CSS – HACKS
IE Conditional Tags (Which will use as a separate CSS files) Ø *ALL IE VERSIONS:#somediv{
width: 100px\9;
}
Ø *IE8 STANDARDS MODE ONLY:
#somediv{
width /*\**/: 100px\9;
}
---------------------------------------------------------------
For Document : *{font-family:Verdana,Arial; margin:0px; padding:0px;} For IE :* html{font-family:Verdana,Arial; margin:0px; padding:0px;}
*NOTE: For Default Dcoument…will use *, and for IE …will use * html
---------------------------------------------------------------
IE 5 Browser : #header {padding: 2em; border: 0.5em; width: 10em;} Other Browsers : #header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}
*NOTE: IE5 will use the first width value of 15em, 5em of which will be taken up by the two sets of padding and border (one each for the left and for the right). This would ultimately give the element a width of 10em in IE5.
The 15em value will then be overridden by the second width value of 10em by all browsers except IE5, which for some reason can't understand CSS commands with empty comment tags either side of the colons. It doesn't look pretty but it does work!
---------------------------------------------------------------
Valid CSS filter targeting Google Chrome and Safari 4
To target only webkit, which includes Google and Safari, encompass all the CSS that you want to use just to target Webkit in the following @media block:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass { background-color: #FF0000; }
#myId {color: #0000FF;}
p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}
---------------------------------------------------------------
---------------------------------------------------------------
HACKS FOR ALL BROWSERS:
If you see black, you are using a newer Standarized browser like Mozilla.
If you see red, you are using an older version of Mozilla (< version 1.01).
If you see yellow, you are using newer Google Chrome (2.01+), Opera, and Safari (4.0+).
If you see blue, you are using Google Chrome (1.0 - 2.01), and Safari (1 - 3).
If you see gray, you are using Internet Explorer 8.
If you see purple, you are using Internet Explorer 7.
If you see green, you are using Internet Explorer 6.
If you see orange, you are using a Internet Explorer 5.
#sample {font-weight:bold;font-size:14px;color:orange; voice-family:"\"}\"";voice-family:inherit;color:grey;\ à This is Specially for IE8 only
color:black; à This is for Standard Mozilla
[color:black; à This is for Mozilla
color:yellow;] à This is for Chrome,Safari
} html*#test1 {[color:red;color:blue;]color:purple; à This is for IE7
} * html #test1 { à This is for IE6
color:green;} IMPORTANT CSS HACKS FOR ALL BROWSERS:
/* for all Standard browsers */
.color {color: #777;}
/* for IE6 */
.color {_color: #C39;}
.color {-color: #C39;}
* html .color {color: #C39;}
/* for IE7 */
.color {*color: #66F;}
*+html .color {color: #66F;}
*:first-child+html .color {color: #66F;}
/* for IE8 (It’ll work Absolutely) */
1) body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: white;
color: black; /* for all browsers other than IE8 */
}
2) body, #ie8#fix {
color: #444; /* for IE8 */
}
3) #IE8Body body {color:yellow;} /* IE8 */
-------------------------------------------------------NOTE: This 1)code will set color to black in all browsers, except for IE8, in IE8 it will be red.
/* for Mozilla Firefox (It’ll work Absolutely) */ /* safari 3+, chrome 1+, opera9+, ff 3.5+ */body:first-of-type #ocho { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */body:nth-of-type(1) #siete { color: red }
For Example: .raj {color:#000;} /* All Browsers */
* html .raj {color:#efefef;} /* IE6 */
*:first-child+html .raj {color:blue;} /* IE7 */
#IE8Body .raj {color:yellow;} /* IE8 */
body:first-of-type .raj { color: red } /* safari 3+,
chrome 1+, opera9+, Firefox 3.5+ */ Rajkumar -------------------------------------------------------NOTE: This code(#ie8#fix) will set color to blue in all browsers, except for IE8, in IE8 it will be red.
/* for IE8, going last */
.color {color: #0FC\0/;}
/* for IE8 Standard mode only */
.color {color /*\**/: blue\9;}
.color {color /*\**/: blue;} if the above hack is not work
/* All IE versions including IE8 Standard mode */
.color {color: blue\9;}
.divLogRight{color: Blue; color:red\9; *color: Blue;}
NOTE : first Blue: for all browsers.
Red: IE6,7,8 Only Second Blue: IE6,7 Only Only IE8 will be Red. (Once we use color:red\9, then we should use both color:Blue and *color:Blue also. Otherwise ie8 hack will not work)
