eshwar's Web World: Things Javascript can do and CSS cannot

Real progressive enhancement

JavaScript is a programming language; you have conditionals (if statements), loops and you can test if the current user agent supports a technology before you apply it. The classic example of that was already in use in good image rollover scripts: if (document.images){ } made sure that only browsers with images enabled got a rollover effect. Other examples are testing for DOM support and if there is a certain element before trying to apply a certain class to it.

Reading and testing environments

As JavaScript has access to the browser window properties you can check the dimensions you have at your disposal before showing and hiding several elements. You can also recognise changes in the user agent (like resizing the window, or even the font size by using a trick) and react to them for example re-position a menu.

This is extremely important with multi level dropdown menus. A pure CSS multi level dropdown menu will blindly open new sub-menus to the left (unless you hardwire the x-th level not to do so), while a JavaScript powered menu can test if the next level menu fits the screen. If there is not enough space to the left, it can show it on the right and if there is not enough space downwards, it can open the next level above the current one. This is how real application menus work like.

Removal and generation of elements

By tapping into the DOM, JavaScript can add and remove elements from the document. CSS can only show and hide elements and hope that the user agent will not make them available. JavaScript can also generate superfluous elements (for example for flexible rounded corner solutions or drop shadows) without you having to add them to the document by hand.

Time based execution

JavaScript can use timing to trigger an effect only after a certain amount of time. As humans are prone to error, this is extremely handy when it comes to making menus and effects more usable and accessible. Instead of hiding a menu when the user leaves the parent element, you can wait a certain amount of time and then hide it. This allows for a lot more erratic mouse movement while still keeping the menu available.

Richer event handling

While the support for pseudo selectors in CSS is still not as good as it could be, the JavaScript equivalent event handling has been supported for several generations so far. You can react to almost anything: keys being pressed, the mouse moved, the mouse keys being pressed or released, and by using a certain trick you can even come up with your own custom events.

JavaScript can also react to events that are not the users doing like the document being read, another document getting loaded, an element becoming available or the window being moved or closed.

Real keyboard support

While CSS can only apply styles to an element that has the focus (which could have happened either by keyboard or mouse) JavaScript can use several keyboard event handlers and even recognize which key is currently pressed.

This enables you to create menus that work like real application menus. While the normal web way of navigating through a list of links via keyboard is to jump from link to link via Tab (or the A key in Opera), real application menus like the Windows start bar or any dropdown in the browser menu can be navigated with the arrow keys.

Newer versions of Opera and modified versions of Firefox also allow for this kind of navigation and Sun has cooperated with Mozilla to come up with a reusable library of DHTML widgets that follow these rules. James Edwards also created a DHTML menu that works the same way.

On demand pulling of content

While CSS can only deal with what is available in the document when it is loaded (the exception being browsers that support the :after pseudo selector that allows to generate text or media albeit not styleable) JavaScript can create new content, but also pull in data from other resources like Databases or files with Ajax.
You can for example offer visitors without JavaScript a very basic menu and allow others to pull in the whole site map and load the different page content without reloading the whole page.

Get more information

Tags: javscript, css, event handling, reloading page