Dev Dogs CSS References
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Conditional Comments for Internet Explorer Browsers
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:
- // Conditional-CSS syntax examples
- [if IE] - Used if the browser is IE
- [if ! Opera] - Used if the browser is not Opera
- [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]-->
Web Standard Fonts
Normal style | Bold style |
---|---|
Arial, Arial, Helvetica, sans-serif | Arial, Arial, Helvetica, sans-serif |
Arial Black, Arial Black, Gadget, sans-serif | Arial Black, Arial Black, Gadget, sans-serif |
Comic Sans MS, Comic Sans MS5, cursive | Comic Sans MS, Comic Sans MS5, cursive |
Courier New, Courier New, monospace | Courier New, Courier New, monospace |
Georgia1, Georgia, serif | Georgia1, Georgia, serif |
Impact, Impact5, Charcoal6, sans-serif | Impact, Impact5, Charcoal6, sans-serif |
Lucida Console, Monaco5, monospace | Lucida Console, Monaco5, monospace |
Lucida Sans Unicode, Lucida Grande, sans-serif | Lucida Sans Unicode, Lucida Grande, sans-serif |
Palatino Linotype, Book Antiqua3, Palatino, serif | Palatino Linotype, Book Antiqua3, Palatino, serif |
Tahoma, Geneva, sans-serif | Tahoma, Geneva, sans-serif |
Times New Roman, Times New Roman, Times, serif | Times New Roman, Times New Roman, Times, serif |
Trebuchet MS1, Trebuchet MS, sans-serif | Trebuchet MS1, Trebuchet MS, sans-serif |
Verdana, Verdana, Geneva, sans-serif | Verdana, Verdana, Geneva, sans-serif |
Symbol, Symbol (Symbol2, Symbol2) | Symbol, Symbol (Symbol2, Symbol2) |
Webdings, Webdings (Webdings2, Webdings2) | Webdings, Webdings (Webdings2, Webdings2) |
Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2) | Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2) |
MS Sans Serif4, Geneva, sans-serif | MS Sans Serif4, Geneva, sans-serif |
MS Serif4, New York6, serif | MS Serif4, New York6, serif |
* Windows fonts / Mac fonts / Font family
1 Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems.
2 Symbolic fonts are only displayed in Internet Explorer, in other browsers a font substitute is used instead (although the Symbol font does work in Opera and the Webdings works in Safari).
3 Book Antiqua is almost exactly the same font that Palatino Linotype, Palatino Linotype is included in Windows 2000/XP while Book Antiqua was bundled with Windows 98.
4 These fonts are not TrueType fonts but bitmap fonts, so they won't look well when using some font sizes (they are designed for 8, 10, 12, 14, 18 and 24 point sizes at 96 DPI).
5 These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. Comic Sans MS works in bold but not in italic. Other Mac browsers seems to emulate properly the styles not provided by the font.
6 These fonts are present in Mac OS X only if Classic is installed (thanks to Julian Gonggrijp for the corrections).