Modern Day JavaScript and CSS can be fun!

The last time that I really spent any time directly working on web interfaces was in 1999, and I didn’t have a lot of time then to spend on a web UI. Lack of browser compatibility (and even support, in the case of CSS) made Javascript and CSS painful to use. Since 1999, my work has been focused on server-side technologies, because I have had other people to lean on to do the front end. Now, I’m in a 3 person group and the HTML is my concern… but, I’m actually enjoying it!

I’ll start off by saying that I’m lucky. The tools that I’m developing are for an internal user community and I can guarantee that they will be running IE 6.0. Personally, I run Mozilla (more on that later). Knowing for certain the browser that my users will use, and the fact that said browser is at least somewhat modern makes my life a whole lot easier.

As I’ve been doing my work, I’ve wanted greater ease to make and revise pages, as well as the ability to provide a somewhat more “desktop-like” user experience. CSS and Javascript provide me with these things by separating content and layout, and by providing easy manipulation of what’s on the page via the DOM.

Unfortunately, as Tim Bray was just saying, IE is old. (Update: Tim has added some more commentary and links). Sure, IE 6.0 is the most recent and probably the most standards-compliant IE there is, but it has really fallen behind Mozilla. Just try doing a position: fixed in a stylesheet or a document.styleSheets[0].cssRules[0] in Javascript to see what I mean. But, for my needs, I’ve been able to work out the differences without too much pain.

Why should I even bother using Mozilla myself if my user community uses IE? I greatly prefer using Mozilla for my own browsing, because there are no pop-unders, and type ahead find is great for navigating by keyboard. But it’s the great tools for web developers that puts it head and shoulders above IE for creating apps. The DOM Inspector and Javascript Debugger are hugely useful. Take a look, if you don’t believe me: Tools/Web Development.

Many people still have to deal with the fact that Netscape 4.76 and IE 5.0 are not completely dead. I don’t envy those people at all. But, as someone who is working exclusively with modern browsers, I’m enjoying myself. Sure, some things don’t work completely as expected… but they do enough of the time to make it worth stepping over the issues.

Useful Resources: BrainJar has some very nice use of CSS and nifty bits of Javascript that can teach a lot. There’s a fully-annotated pull-down menu system, and a windowing system.

I just came across (via Scripting News) the CSS Zen Garden which shows off what CSS is capable of.

The DHTML Kitchen has nice tutorials for putting together DHTML menus and tabbed interfaces.

And you may want to grab a handy CSS Quick Reference Card while you’re looking around.