 |
 |
 |
 |
|
|
|
Browser Detection and Appropriate CSS Generation
Tim Perdue
Whoever said CSS would solve all your cross-platform browser display issues needs
to lay off the pipe a little. I have yet to get CSS to work perfectly across all browsers /
platforms, but I have gotten it to work "good enough" to get by.
I did it by using some fairly simplistic browser detection, as in recycling a library I
wrote for SourceForge (which was recycled from a library on GotoCity.com).
Here are some of the things I discovered while setting up CSS on a handful of sites:
- If you don't set a font at all, users will complain because their browser defaults are either too big or too small - as if it's your fault.
- Using the CSS1 font-size: tag with a specific point size like 12pt breaks some browsers on some platforms (Netscape on Wintel).
- Even if that weren't the case, point sizes are different on different platforms (Macs display fonts smaller than Windows).
- And even if they rendered the same across all platforms, it's a really bad idea to hard-code sizes, as there are many people with impaired vision. When you hard-code a point-size, they can't override the size with their browser, and thus can't see your site. One of the worst sites on the internet is CNN.com, which hard-codes very small fonts into their CSS sheet.
- Because of this, you should stick with scaling percentages or the size syntax (small, medium, x-small, etc).
With those hard-learned lessons in mind, you can design a browser-smart CSS sheet and
generate it with PHP. I won't go into details on CSS here. You can view the spec and
examples at
http://www.w3.org/Style/CSS/Test/19981002/.
Most of that spec was completely ignored by the geniuses at Netscape and Microsoft, which
is why it has become such a headache for developers.
[ Next Page ]