Wednesday, June 13, 2007

PHP Browser Detection and Appropriate CSS Generation - CSS Tips


Here are some of the things I discovered while setting up CSS on a handful of sites:
  1. 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.
  2. Using the CSS1 font-size: tag with a specific point size like 12pt breaks some browsers on some platforms (Netscape on Wintel).
  3. Even if that weren't the case, point sizes are different on different platforms (Macs display fonts smaller than Windows).
  4. 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.
  5. 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.

No comments: