Conditional Statements, Cross-Browser Analysis, & Tools Bars for Web Developers
When designing sites or themes, I currently test and make CSS revisions for six different browsers:
- Firefox 3
- IE 7
- IE 6
Now that IE 8 has been released, it will have to be added to the list as well. According to this blog, conditional browser statements and style-sheets can be used to set web pages to display as IE 7 pages within IE 8:
I find conditional style sheets the most effective way to manage cross browser issues, and generally create one style-sheet for both IE 6 and IE 7 to address the particular nature of those browsers.
For more information on Conditional Statements for IE Browsers, see:
For some time, I have actually been considering that it may be better to have a conditional style-sheet for every browser. I have been putting off implementing browser specific CSS code such as Mozilla extensions:
essentially because of principle. Imagine you purchased a calculator. On one calculator, 2 + 2 = 4, on another it is 4.1, on another 3.9, etc. Someone says, well you should run a slightly different set of values on this calculator, and a different set on this one, and you’ll end up with the correct value. That is the same as conditional style-sheets – they shouldn’t be necessary, because this is what the CSS is for – we made an exception for IE because the browsers had so many problems, but the movement should be in the other direction. Either way, I can see little way around them, but I still haven’t found a way to target Opera/Safari exclusively through this method either.
When it comes to cross-browser analysis and testing, I find these tools to be essential:
Internet Explorer Browsers:
With these tools – conditional style-sheets and browser-specific developer toolbars, you should be able to pull apart your CSS code enough to figure out where and why the small glitches are appearing in the display of web pages in the different browsers. While I would love to be able to write conditional style-sheets for every browser, to ensure pixel-perfect specific margins and details, I will continue to hope for more improvements like we have seen with FF3, IE8, Safari, & Chrome coming closer to a universal rendering of CSS values. Until then, these tools will remain for working out the small bugs and issues with cross browser display.