Web browsers: The OS of the internet

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.

This means that Web developers/designers are forced to test and build their websites for the different web browsers and are often forced to fall back onto JavaScript which (unfortunately) has its own differences between web browsers.

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*/
-webkit-border-radius:1em;

/*Border Radius in Firefox*/
-moz-border-radius: 1em;

/*Border Radius in Opera*/
border-radius: 1em;

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.

One thought on “Web browsers: The OS of the internet

  1. lol! internet explorer has no notion of rounded borders, and don’t use 1em. em’s are evil. they aren’t standard on every browser. use pixels, they are awesome.

    I like the way everyone is adopting webkit as a standard implementation of HTML renderer. adobe air , safari, web OS, chrome .. all use webkit.

    I reckon mozilla should dump its gecko renderer and adopt webkit.

    my 2 cents.

Leave a Reply