Dev Dogs CSS References

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:

• # = for IE (i.e. style="#margin-left:5px;")
• _ = for IE6 specific only (i.e. 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
• 'IE' - Internet Explorer
• 'Gecko' - Gecko based browsers (Firefox, Camino etc)
• 'Konq' - Konqueror
• 'NetF' - Net Front
• 'Opera' - Opera's browser
• 'IEMac' - Internet Explorer for the Mac
• 'Webkit' - Webkit based browsers (Safari, Shiira etc)
• 'IEmob' - IE mobile
• 'PSP' - Playstation Portable
• 'SafMob' - Mobile Safari (iPhone / iPod Touch)
• version - which version of the browser in question should be considered
• condition - arithmetic operator
• lt - Less than
• lte - Less than or equal to
• eq - Equal to
• gte - Greater than or equal to
• 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
4. [if ! gt IE 6] - Same effect as the previous statement, if not greater than IE 6

Conditional Statements

• <!--[if IE]>
      According to the conditional comment this is Internet Explorer
  <![endif]-->
• <!--[if IE 5]>
      According to the conditional comment this is Internet Explorer 5
  <![endif]-->
• <!--[if IE 5.0]>
      According to the conditional comment this is Internet Explorer 5.0
  <![endif]-->
• <!--[if IE 5.5]>
      According to the conditional comment this is Internet Explorer 5.5
  <![endif]-->
• <!--[if IE 6]>
      According to the conditional comment this is Internet Explorer 6
  <![endif]-->
• <!--[if IE 7]>
      According to the conditional comment this is Internet Explorer 7
  <![endif]-->
• <!--[if gte IE 5]> // for geater than equal to
      According to the conditional comment this is Internet Explorer 5 and up
  <![endif]-->
• <!--[if lt IE 6]> // for less than
      According to the conditional comment this is Internet Explorer lower than 6
  <![endif]-->
• <!--[if lte IE 5.5]> // for less than equal to
      According to the conditional comment this is Internet Explorer lower or equal to 5.5
  <![endif]-->
• <!--[if gt IE 6]> // for greater than
      According to the conditional comment this is Internet Explorer greater than 6
  <![endif]-->
• <!--[if !IE]> // for not IE (i.e non IE browser)
      According to the conditional comment this is Internet Explorer greater than 6
  <![endif]-->

Including CSS Files

• <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="all-ie.css" />
  <![endif]-->
• <!--[if IE 6]>
      <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
  <![endif]-->
• <!--[if lt IE 6]>
      <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
  <![endif]-->

* Windows fonts / Mac fonts / Font family