Avoid CSS Hacks
When you create your shiny new designs, no doubt you view it as your going along in your favourite browser. But I’m sure like myself you have encountered rendering problems between browsers. Some of the incompatibilities include:
- Padding and margin inconsistencies.
- PNG transparency problems in IE5.5/6.
- IE :hover only on anchors.
- Background image inconsistencies.
You have a few options at this point.
- Use CSS hacks for different browsers.
- Change your design to work in all browsers (possibly at the expense of your overall design).
- Detect the browser and serve a completely different stylesheet for each different browser.
I have tried CSS hacks, and have always felt that it’s a battle between bloating your CSS and maintaining your overall design. If like myself you are interested in using PHP to switch your CSS file for different browsers have a look at the excellent tutorial over at stylegala.
Advantages of serving Browser/OS specific stylesheets
- By using this technique you will be able to design optimised layouts for different screen sizes, (I.e. a two column layout for lower resolutions and a larger three column layout for larger screen resolutions).
- You can avoid the @import hack used by many to hide CSS files from older browsers, because the PHP script will determine what capabilities your browser has and serve the relevant stylesheet!
- If you use transparency in your PNG images you likely use a hack to make them render correctly in IE5.5/6. By using seperate stylesheets for different browsers you can simply change to GIFs for older browsers, and stick with PNGs for the newer, compatible browsers.
There can be problems with Opera, where certain versions will use an IE user-agent, therefore serving up an IE stylesheet. However, weighing up the odds, this may be a pretty good solution for most users.
