I have recently started diving deeper into styling web pages for different web browsers and have found that it is not a walk in the park. Coming from a developers background I feel that you can almost compare the HTML and CSS standards adopted by various browsers to the foundations of programming for different programming languages and operating systems where the fundamental concepts are the same but other differences (such as lexical) can be a worlds apart.
I recall that I recently(by recent I mean many months ago) visited machomer(http://www.machomer.com/) on Internet Explorer after seeing the performer ‘perform’ on television… You should check out what he does. I was shocked to find the page was poorly rendered on Internet Explorer compared to the Firefox on my OS X beauty. Was this a example of the web designer giving up on Internet Explorer? or was this a issue with the Internet Explorer 9 rendering engine? I honestly don’t know as I have only recently started following the whirlwind that is the finalisation of the CSS3 standard. I see this as a example of W3C being unable enforce it’s own standard on the browser with the most number of users on the web. But it also highlights that even web browsers don’t do a good job at conforming to the standards set by the W3C.
Some of the differences between web browsers are just ridiculous. Take the CSS3 implementations of gradients and border radius on Safari, Firefox and Opera:
/*Gradient in Safari*/
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#858585), color-stop(3%, #636363), color-stop(50%, #202020), color-stop(51%, black), color-stop(97%, black), to(#262626));
/*Gradient in Firefox*/
-moz-linear-gradient(-90deg, #858585 0%, #636363 3%, #202020 50%, black 51%, black 97%, #262626 100%);
/*Opera… seems to use SVG?!?!?*/
/*Border Radius in Safari*/
/*Border Radius in Firefox*/
/*Border Radius in Opera*/
You can see that the differences can be small(like border radius) or drastic(like gradients). Unfortunaltly I do not have access to Internet explorer to test how it will implement this.
An alternative would be to create an Rich Internet Application(RIA) using Flex, similar to balsamic mockups demo, Prezi and http://dabbleboard.com/. The reason that flex web applications work as expected on all browsers is due to the flash players plugin deployment model.