También disponible en Español

Inf@Vis!

The digital magazine of InfoVis.net

Browser Standards
by Juan C. Dürsteler [message nº 63]

The latest versions of the most popular Browsers are closer to the standards than ever. The situation is far from ideal but we are getting there slowly.

In this message I intend to deviate a little from the technical style of my last messages in order to speak about everyday life things. Things that happen to me and I suspect that (unfortunately) also happen to my kind readers. 

A few days ago one of them (thanks, Andreu) sent a message telling me that at home (Windows 98, Internet Explorer 5) the InfoVis.net web site looked OK but at the office (Windows NT 4.0, IE 5.5) that wasn't so. When hovering the mouse over a link, instead of just changing the background colour, the link appeared like a pushed button, and all the carry returns changed modifying the arrangement of the page. When leaving the link everything returned to as it was before and so happened every time the mouse crossed a link, producing a very annoying effect. 

Andreu was kind enough to send me some screen shots that you can see in the following table (from the Spanish version):

     
     Figure 1:
You can see the link before the mouse hovers on top of it and the alignment of the words in this situation.


      Figure 2: Shows the link once the mouse stands on top of it. Note how the change in appearance modifies the alignment. 

I threw myself immediately into the Cascading Style Sheets (CSS)  that define the appearance of the web where I waste the best hours of my adult life, since it's not admissible that a web on Information Visualisation commits such an elementary sin of usability like this (among other less important sins that it makes and I will go on amending…)

Analysing the style definitions I realised that when I edited the first versions I used a feature, the hover, that is exclusive to Internet Explorer. Among all the options that this features offers I chose an innocuous change in the background colour that is, in principle, a good practice. 

What I didn't realise was that I left the option "border-style:inset" programmed. This is what produces the "pushed button" effect and presumably has not been recognised by the browser until version 5.5 of IE. Ironically I use old versions of the browsers to ensure backwards compatibility. I didn't imagine that I would have to check forward compatibility too.

I can see the question mark in the mind of the reader: why is this man explaining his life to us?. Because this has a lot to do with the present and past situation of standardisation in the world of Browsers.

As Tom Yager explains very well in his commendable article of InfoWorld, standards cover basically two aspects:

  • Appearance: HTML 4.01 and CSS 1 and 2 allows you to define the structure, format and precise control on attributes like colour, typefaces, etc.

  • Behaviour: ECMA-262 (EcmaScript based on JavaScript) and CSS Document Object Model (CSS-DOM) cover the client side scripts that allow you to alter the contents of a page once it has been displayed.

Current browsers are converging and the latest versions are closer to the standards than ever. According to Yager, Netscape 6.0, Internet Explore 6, as well as Opera, adhere now to CSS 1 and EcmaScript . With this we at least have a common denominator. If we want DOM 2, CSS 2 and EmaScript 3, we have to begin to program browser detection and treat each one of them separately since the levels of compliance are different.

Even in the case that the latest versions of the Browser would be faithful followers of all the standards, there are still out there lots of older versions where CSS1 is not well supported. Moreover the user has the chance to disconnect JavaScript, increasing the possibilities to see your page differently on different computers.

And, in the end, Information Visualisation is what this newsletter is all about. With the current situation it's possible that the same information could be seen differently, or parts of it can even disappear depending on the browser used.

Fortunately the situation is improving slowly. Let's hope that in the near future we won't have to waste our time programming these types of things. Unfortunately we will still carry on making mistakes .

Links of this issue:

http://www.w3.org/Style/  
http://www.infoworld.com/articles/tc/xml/01/10/08/011008tcweb.xml  
http://www.w3.org/TR/html401/  
http://www.w3.org/Style/CSS/#specs  
http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM  
http://www.w3.org/TR/DOM-Level-2-Style/  
© Copyright InfoVis.net 2000-2014