====== 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 ====

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.

<code css>
body.ie6 .myclass
{
	top:5px
}
</code>

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:

<code css>
body.msie .myclass
{
	top:5px;
}
</code>

==== Platform Classes ====


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:

<code css>
body.win32 .myclass
{
	width:200px;
}
</code>

==== Screen Dimension Classes ====

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.

<code css>
body.height_large p
{
	font-size:200%;
}
</code>