Conditional CSS or browser based CSS
Conditional CSS or browser based CSS
1.
Browser for CSS
·
'IE' - Internet Explorer
·
'Gecko' - Gecko based browsers (Firefox, Camino
etc)
·
'Webkit' - Webkit based browsers (Safari,
Chrome, Shiira etc)
·
'SafMob' - Mobile Safari (iPhone / iPod Touch)
·
'Opera' - Opera's browser
·
'IEMac' - Internet Explorer for the Mac
·
'Konq' - Konqueror
·
'IEmob' - IE mobile
·
'PSP' - Playstation Portable
·
'NetF' - Net Front
2.
Condition - arithmetic operator
·
lt - Less
than
·
lte -
Less than or equal to
·
eq -
Equal to
·
gte -
Greater than or equal to
·
gt -
Greater then
Example:
Conditional
CSS syntax
[if IE] - Used if the browser is IE
[if Gecko] - Used if the browser is not Firefox
[if IE 5] - Used if browser is IE 5
[if lte IE 6] - Used if the browser is IE 6 or less (IE 5, IE 4 etc)
[if gt IE 6] - Used if the browser is IE 6 or grater
How to use it
1. <!--[if IE]>
.backTable
{
margin-top:
-185px!important;
}
<![endif]-->
2. <!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE_CSS.css" />
<![endif]-->
3. <style>
.backTable td
span
{
display:none;
position:absolute;
margin-top:-175px;
-webkit-margin-before:-185px;
margin-left:100px;
}
.icon
{
display: -moz-inline-box;
}
</style>
Note: webkit,Gecko
etc does not
support all style. Please find out supported style.
Great Work :)
ReplyDelete