Most of us face a great deal of difficulty while designing Web pages or content across browsers with same same look and feel effect. A website that looks cool in a particular browser, may not look as cool (or may even look ugly) in another browser. The reason behind this is that all browsers do not follow common standards; styles that are rendered correctly in Firefox may not be supported by the Internet Explorer and the same stands true with styles and tags that work with IE but won’t work with Firefox, Opera etc. However, most of these issues can be resolved by using Conditional statements while writing the CSS statements or blocks..
For a single or multiple statement of a inline style or CSS class defination we can use the following :-
1) # = for IE eg: < input ..... style="#margin-left:5px;" .../> 2) _ = for IE6 specific only eg: < input ..... style="_margin-left:5px;" .../>
======================================================
There are three basic types of conditional statement that a CSS statement or block can be prefixed with:
* [if {!} browser] * [if {!} browser version]
* [if {!} condition browser version]
where:
* ! – indicates negation of the statement (i.e. NOT) – optional * browser – states which browser the statement targets o ‘IE’ – Internet Explorer o ‘Gecko’ – Gecko based browsers (Firefox, Camino etc) o ‘Konq’ – Konqueror o ‘NetF’ – Net Front o ‘Opera’ – Opera’s browser o ‘IEMac’ – Internet Explorer for the Mac o ‘Webkit’ – Webkit based browsers (Safari, Shiira etc) o ‘IEmob’ – IE mobile o ‘PSP’ – Playstation Portable o ‘SafMob’ – Mobile Safari (iPhone / iPod Touch) * version – which version of the browser in question should be considered * condition – arithmetic operator o lt – Less than o lte – Less than or equal to o eq – Equal to o gte – Greater than or equal to
o gt – Greater then
A few conditional statement examples:
1. // Conditional-CSS syntax examples 2. [if IE] – Used if the browser is IE 3. [if ! Opera] – Used if the browser is not Opera
6. [if ! gt IE 6] – Same effect as the previous statement, if not greater than IE 6
======================================================
Conditional Statements
======================================================
Including CSS file
======================================================
Reference:
http://www.javascriptkit.com/dhtmltutors/csshacks.shtml
http://www.sprymedia.co.uk/article/Conditional-CSS
http://centricle.com/ref/css/filters/