Everyone who has created or worked on a larger website project has experienced the problem of dealing with the multitude of different browsers out there and their various quirks and failings. The plathoria of browsers goes from various versions of the Internet Explorer (IE 6 to 9 currently), to FireFox, Opera, Safari to more exotic applications such as Konqueror( used on Linux boxes ).

The website developer usually has a favorite browser he or she uses for creating the webpages – most developers I know use Firefox, personally I prefer Opera. After completing the project, if they’re smart, they’ll check it out in various other Internet Browsers. It is usually not so good to tell your boss to have a look at the pages before you do that. Non-technical oriented people tend to use what their operating system provides out of the box, this being IE for Windoze and Safari for MACs. Some larger companies often lag behind in updating their computer environment and may be using older versions of these browsers, such as IE6. It is often not a good idea to exclude these potential users right from the start.

Typo3 lets you check the environment of your current user at run-time and lets you write individualized output for different user environment using so called switches within your TypoScript. As most incompatabilities between browsers can be solved with CSS it is usually just a matter of supplying an additional style sheet that caters to the quirks of specific browsers.

This is how I do it:
I tell Typo3 to use my standard style sheet(s):
page.includeCSS {
file1 = fileadmin/css/stylesheet.css
file1.media = screen,print
file2 = fileadmin/css/jquery.css
file2.media = screen
}

Then afterwards I check the environment of the current user and add style sheets specific for that browser and environment:
## Browser specific
[browser = opera]
page.includeCSS.file42 = fileadmin/css/style-opera.css
[global]
[browser = *firefox*] || [useragent = *Firefox*] || [useragent = *firefox*]
page.includeCSS.file42 = fileadmin/css/style-ff.css
[global]
[browser = msie]
page.includeCSS.file42 = fileadmin/css/style-ie.css
[global]
[useragent = *Safari*]
page.includeCSS.file42 = fileadmin/css/style-safari.css
[global]
[useragent = *iPad*] || [useragent = *iPhone*]
page.includeCSS.file43 = fileadmin/css/style-iphone.css
[global]

As you can tell I can even check whether the current visitor is using an iPad or iPhone. This can be expanded too to include other types of devices and/or browsers. For iPad and iPhone I increment the file id by one, as most of these will be using Safari and I don’t want to overwrite the Safari standard settings.

As CSS works on a last-come basis, any CSS commands in previous style sheets can be overloaded in later statements.