This is definitely one of the most useful tools in your Morph toolbox and can help you with everything from cross browser fixes, customizing individual pages and more!

Looking at the above example, the id is the current themelet that is published, then the browser, browser version, operating system, current component & view & whether or not javascript is enabled on the users browser.

These are incredibly useful when dealing with cross browser inconsistencies and fixes, as well as overriding any of the default css for a specific component view.

• Browser (firefox)
• Browser version (firefox355)
• Operating system (apple)
• Component (com_content)
• Component view (frontpage)

Practical examples of how you would use these classes

At first glance you may be wondering how you would take advantage of these automatic classes. Well, how better than a practical example!

Cross browser inconsistencies with exact precision

Ever applied a css fix for one browser, only to find that it breaks all your others? Or even the same browser, but on a different operating system? With the browser/version/os classes, you really have precision targeting at your finger tips. Simply prepend any of your css selectors with the browser/version/os that you are having the issue in and provide the alternate css fix.

{code} .search input{position:absolute;top:10px;right:10px;} .apple.firefox355 .search input{top:5px;right:5px;} {/code}

Customize the overall look and feel for any given component

Every wanted to have a different background for your home page? Or offer slightly differently styling for a specific component? Using the component and component view classes really give you lots of flexibility with what is possible.

{code} body{background:red;} .frontpage body{background:green;} {/code}

Tweak your images based on the visitors browser / os

Another neat treak is to offer alternate graphics based on the browser or operating system of your visitors. The below example has a container with the class of preview and by default displays a Firefox browser window, then alternate versions for each of the other browsers. When a user visits the site with any of the different browsers, they will see the one that they themselves are using.

{code} .preview{background:url(../images/firefox-chrome.png); .safari .preview{background:url(../images/safari-chrome.png); .opera .preview{background:url(../images/opera-chrome.png); .internetexplorer .preview{background:url(../images/ie-chrome.png); {/code}

These are only a few examples of what is possible. Give them a try and i am sure that you will soon come to appeciate the power and flexilibity that they give you!