Christian Heilmann

Your part of the playground – what can be done with the different web technologies

Thursday, August 4th, 2005 at 11:54 am

Toy truck in the sandA lot of email noise is being created on mailing lists and forums plainly because new developers are not sure about where what web technology ends and where the other begins. “Can I style the Icon of the page via CSS?”, “How do I send a form via HTML” or “Can I check in JavaScript if a folder has network sharing enabled” are just some recent examples.

In a nutshell, the technology of creating web sites is cut up into three layers (five if you include the information architecture and backend logic):

The structure – defined by (x)HTML.

All you can do with that is define what a text is and leave the browser to make something good out of it.

  • You can define interactive elements like buttons, form fields or even frames containing other pages with it, but you cannot change the document dynamically or re-use data that was sent to the document.
  • What you do here is the most important of all, good, clean, semantic HTML is what turns mumbo jumbo into a readable, browse able and style able document. HTML is not there to paint with it, it is there to give the document structure and meaning.

A construct like

Home About Us

is not a navigation,

is, as the links are separated from another by more than white space and they are grouped inside a parent element – the list – indicating that they are part of a logical unit.

The presentation – defined by Cascading Style Sheets (CSS)

CSS is primarily there to tell the user agent how something should be visually represented.

  • You define measurements, position, how it should behave in the document flow and colours with it.
  • You cannot reach anything outside the current document with it, and that includes documents inside IFRAMES or other FRAMES.

More modern CSS allows for creation of content and interactivity via the :before, :after, :hover, :focus and :active pseudo classes. However the support for those is still flaky and there is no way to delay effects or make them optional – if CSS is supported visitors will have to deal with your interactivity – even if they are physically incapable to do so.

The behaviour – defined by JavaScript using the DOM

Undoubtedly the most powerful is the behaviour layer. Via JavaScript and DOM you can alter everything in the current document.

  • You can copy, replace, remove and create texts, elements and attributes of everything inside the document, and – security settings permitting – some parts of the browser itself.
  • Via XHR or AJAX you can pull in content from other documents and send or retrieve information to backend scripts without leaving the current page.
  • Via event handlers you can add own keyboard functionality and create hitherto unreachable web functionality like drag and drop interfaces.

This comes with a price though:

  • You make maintenance dependent on the maintainer having JavaScript skills and the user agent having JavaScript enabled. Neither can be expected as a given.
  • You are also likely to disturb conventions of web usage by either turning non-interactive elements into interactive ones without telling the visitors about it or breaking the functionality of browser tools like the back button or bookmarking facilities.

But all of this goodness is confined to the browser and web space. Unless something went really wrong with your security settings, or you use bespoke methods like Microsoft’s HTML Applications (hta), you will not be able to write to the file system via JavaScript or read attributes of system folders.

Pushing the boundaries

There are examples on the web where clever web developers pushed the boundaries of the layers and glanced over the fence. Stu Nichols for example repeatedly pushes CSS to its limits and the scripalicious libraries turn HTML web sites into rich user interfaces close to Flash .
However, all of these are exercises in what is possible, not necessarily what makes sense in your work environment. They are important as a scientific experiment and an outlook of things that might be possible, but should be taken with a pinch of salt.

Share on Twitter