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
- Safari
- Chrome
- Opera
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:
http://blogs.msdn.com/ie/archive/2008/03/09/using-the-emulate-ie7-button.aspx
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:
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
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:
https://developer.mozilla.org/en/CSS_Reference/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:
Firefox Browser:
Internet Explorer Browsers:
Safari:
Chrome Browser:
Opera Browser:
I don’t know any web developer currently that is not using Firebug to inspect the CSS of div elements in a page and making CSS adjustments, it is really indispensable. The ‘Web Developer’ add-on has some powerful tools as well for inspection, div element outlining, CSS and HTML validation. Multiple IEs is great because it allows you to overcome the Windows restriction of only having one Microsoft browser version installed at one time – it even allows you to test as far back as IE 3.0. IE Developer’s Toolbar is not as good as Firebug, or even the Chrome debugging tool which is itself excellent. In fact, the Chrome debugging tool + JavaScript console is a worthy equivalent to Firebug in most areas, once you become accustomed to it. The Safari Toolbar seems basically identical to the Chrome kit. By the time it finally comes to testing in Opera, the Opera web development tools seem promising, but I rarely have the interest in getting involved too much on this platform.
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.
Related Posts:
4 Responses to “Conditional Statements, Cross-Browser Analysis, & Tools Bars for Web Developers”
Leave a Reply
Pings/Trackbacks
Recommended by Web Dev News
How do you modify it to work with chrome/firefox? do you use the same style sheet for both?
Do you know of a conditional statement for Chrome?
what is the equiv of
window.onload=function(){e(“js/ie6/”)}
for Firefox ?