CSS Helper Classes

Entourage now adds a number of CSS classes to the BODY tag based on the end user’s browser environment.

Browser classes are useful for when you need to create CSS styles that are specific to a particular browser version (e.g., IE6) or a class of browser (e.g., msie).

Here is a list of browser classes added by Appcelerator:

• msie
• ie6
• ie7
• gecko
• firefox2
• firefox3
• mozilla
• webkit
• safari2
• safari3
• chrome
• iphone

Here’s an example of how you can create a CSS definition for a specific browser.

body.ie6 .myclass
{
	top:5px
}

The class extension above to .myclass will only take effect in IE6.

If you wanted to apply an extension to all versions of IE, you could do the following:

body.msie .myclass
{
	top:5px;
}

Platform classes identify the operating system of the browser. Here’s a list of the platform classes added by Appcelerator:

• win32
• linux
• mac
• sun

These classes can be used just like the browser classes. For example:

body.win32 .myclass
{
	width:200px;
}

Screen dimension classes identify the height and width of the user’s browser window. These classes can be used to dynamically alter things like font-size based on the user’s screen dimensions. Here’s a list of the classes added by Appcelerator:

• height_tiny (height < 480px)
• height_small (height between 480px and 768px)
• height_medium (height between 768px and 1100px)
• height_large (height > 1100px)
• width_tiny (width ⇐ 640px)
• width_small (width between 640px and 1024px)
• width_medium (width between 1024px and 1280px)
• width_large (width between > 1280px)

These classes can also be used just like the browser classes. For example, we can alter our the font size for all paragraph tags based on the user’s screen dimensions.

body.height_large p
{
	font-size:200%;
}