Cross browser compatibility can be hard to achieve, but if you follow a few guidelines, you can make your CSS cross browser compatible a lot easier. Reset your CSS, use supported techniques and don’t forget to validate.
Reset your CSS
All browsers have default styles applied to certain HTML elements. For example, a h1 element is bold and larger by default, and has some margin too. The problem is that all browsers have different default styles so your h1 won’t look the same in every browser. The font-size isn’t really
The solution is to reset the default styles of each browser and build it up again with your own styles. Because you’ve removed the standard browser styles, there won’t be any difference between the browsers. It’s like starting on a clean sheet.
There are a lot of CSS Resets available but Eric Meyer’s CSS Reset is the most popular, according to a poll on CSS-Tricks. A round up of the most used CSS Resets can be found on here.
The disadvantage of a CSS reset is that you have to write a lot more code. Every element you reset, has to be build up again. That’s the reason why a lot of designers use a custom CSS Reset (13% according to the CSS-Tricks poll) or no CSS reset at all. Veerle Pieters showed her limited CSS Reset in a reply to a question of mine.
A CSS Reset is important for cross browser compatibility, but you have to decide for yourself how far you must go when resetting your CSS file.
Using supported techniques
CSS offers a lot of techniques, but not all of them are good supported by every browser. For example the :before and :after pseudo selectors, which don’t work in any version of Internet Explorer, shouldn’t be used.
Nor should the attribute selectors (like a[href $=’.pdf’]), for their bad browser support. If you want to use the attribute selectors, use jQuery instead of CSS. jQuery is a good way to imitate CSS selectors. It can be downloaded here.
A good overview of CSS Selectors and their browser support can be found here.
Validate
I think this one is obvious: Take the time to validate your CSS styles. Cross browser compatibility is way easier with good and valid CSS. You can validate your CSS file using the W3 CSS Validator.
Summary
Follow these three guidelines and your CSS file will have a lot more browser support:
- Reset your CSS,
- Use only supported techniques and…
- Validate!
What are the techniques that you use to assure cross browser compatibility? Please leave a comment and share your thoughts.
Further Reading
- diarioTHC | Tres consejos CSS para obtener diseños Cross Browser
- Discover The Best Of The Web In May 2008 - Opensource, Free and Useful Online Resources for Designers and Developers
- Best Design Articles from May 2008
- DON’T MISS: The Best Design Articles from May 2008 | Dalton Trent's Blog
- DON’T MEASURE: The Best Design Articles from May 2008 | Dalton Trent's Blog
1
Hi,
Your website breaks in IE6; which is kinda ironic.
2
Problems with the navigation are fixed, thanks for mentioning
3
Some things I try to do when aiming for maximum-crossbrowser-compatibility:
* Avoid using Alpha-PNGs. Instead use GIFs especially build for a certain background-color.
* Avoid relying on max-width, min-width
* Avoid using widths in combination with margin, padding. Instead use one element for the width and another element for margin & padding
Most of the times I end up with a small extra-stylesheet with some separate IE-styles included via Conditional Comments.
This said: On my personal site I ignored some restrictions of the Internet Explorer - guys with standard-compliant-browsers get a far better site.
4
@Frank, That are some great tips, thanks for sharing