CSS3
CSS

Google Forces Web Standards Issue Using Sexy Buttons

Next Story

Faculte Streamlines Web-Based Video Presentations For Businesses

google-webkit-buttons

Google made a very minor but significant change to their search homepage earlier this week. While everybody else was distracted by the barcode logo, a few Chrome and Safari users may have noticed that the search buttons now have a certain zing to them, a new and pretty look, with slightly rounded corners, a border around them and a cool looking gradient.

Now, before you think or say, “baa baa techcrunch why is this a story Google change their button baa baa iphone twitter” (or something like that), what is important here is not what they did, it is how they did it.

To achieve sexy buttons, Google has implemented CSS features that are currently not part of any standard and are only supported by Webkit based browsers (ie. Chrome and Safari). To experience sexy buttons on Google, you will need the Google browser (or that other one). The two specific features that are being used to enable sexy buttons are -webkit-border-radius and -webkit-gradient. Both were implemented by Webkit developers as new CSS features over a year ago – and it is hard to argue against their usefulness (where would we be today without rounded corners?).

Browser developers are resorting to going their own way with implementing new features because the standardization process is nothing short of a clusterfuck. In 1996, back in the wild west days of the web, the CSS1 recommendation was published – but the two major browser maker at the time were at each others throats and didn’t pay much attention to it. It only took another two years to get the next version, CSS2, to recommendation status. It was this version, and more importantly, support from the browser makers, that spurred the widespread adoption of CSS and the separation of markup from style on the websites. The first drafts for CSS3 was published in 2001 – and today, a full 8 years later, it is still a work in progress as nobody seems to be able to agree to anything again.

This has spurred the various browser developers to press ahead with their own plans, some of which, such as gradients and rounded corners, can be found in browsers today. These browser-specific bleeding-edge features have always been there, for example, XMLHttpRequest, the core component to Ajax, started a a proprietary extension to IE 5.0. Some of these features live on, some die, and some become part of the standard (or more correctly, a standard).

By implementing currently non-standard features on their homepage, Google are sending out a strong message on what they believe the new standard features should be, and not coincidently, it is the features that their own browser implements and supports. This is not the first time Google has sent a wrecking-ball into the standards process. Google Gears was launched long before Chrome as a way to implement proposed HTML5 standards, such as offline caching, into browsers (see my NextGenWeb series from last year). It was born out of frustration for the slow and beurocratic standardization process – something that Google couldn’t afford to wait for as their web applications could not advance further without a non-aligned platform to build them on.

A large part of the anti-trust case against Microsoft was that with combined desktop, browser and server market dominance the company could abuse that position to make the web a Microsoft web by implementing Microsoft-only features. Google are using their dominance to force an issue that has been stalled for far too long – but the difference is that they are using their force for potentially a greater good (I hope). The theoretical Microsoft web would have been “this website only supports Internet Explorer”, whereas with Google so far we have “this website is a lot better, and has sexy buttons, if you use Chrome (which btw is open source)”.

Update: I originally referred to -webkit-rounded-corners which should be -webkit-border-radius. I blame Web 2.0.

blog comments powered by Disqus