One quick technique I used yesterday was to make three elements of equal height; it’s very simple and won’t cope with dynamic content, but is perfectly suitable for simple page layouts.

The code simply takes the elements involved (I’m using two in this example), calculates the height of the tallest, and sets the heights of the others to match:

var highestCol = Math.max($('#element1').height(),$('#element2').height());
$('.elements').height(highestCol);

There’s nothing groundbreaking about this, and I’m certainly not claiming to have invented the technique (there’s another version here, for example); I provide it here only as an example of how jQuery makes layout problems easy to resolve.

I’ve since discovered that there’s a plugin which will do this for you, which is much more useful if you want to work with multiple elements, but mine has the advantage of being only two lines!

That has been proposed for CSS 3, with the ‘initial’ value, and it’s been introduced into the latest preview of Firefox 3 (Gran Paradiso), with the browser-specific –moz– prefix. I’ve put together a quick couple of basic examples of how it will work (you will, obviously, need the latest preview to see them).

In the first example, the paragraph inside the box has a green background; on hovering over the box, the background reverts to the initial value — transparent.

div p { background-color: #0f0; }

div#one:hover p { background-color: -moz-initial; }

In the second example, the paragraph has been set with a ‘display’ value of ‘none’; on hovering over the box, the initial value of ‘block’ is set.

div#two p { display: none; }

div#two:hover p { display: -moz-initial; }

At least, it should; however, whether through a bug or my not completely understanding, it seems to instead set a value of ‘inline’. As I said, that could be a misunderstanding on my part; I’ll need to test further.

I also noticed that form elements have had a bit of a refresh, at least on the Ubuntu system I use; checkboxes and radio buttons glow when hovered, and are more clear when highlighted. Compare Firefox 2 (left) with Gran Paradiso (right) to see the difference:

It seems to be taking the colour from the OS, which is a nice touch; it’s more Mac-like, although not quite as dominant.

There are more changes listed in the release notes; I think it looks to be shaping up nicely.

Researchers explore scrapping Internet — While I’m not against the idea of building a faster and more secure network, I am a little worried by the idea of a closed system based on proprietary software and run by companies with vested interests.

A Guide to CSS Support in Email: 2007 Edition — Thanks to Microsoft, CSS support in emails is actually moving backwards. The new Outlook uses Word as its rendering engine, and the new Live Mail drops support for many selectors.

Setting Type on the Web to a Baseline Grid — I think web typography is this years big topic, and deservedly so. Graphics and design have progressed enormously, it would be nice to have type to support them.

HTML5, XHTML2, and the Future of the Web and Beware of XHTML — I think XHTML2 is a long, long way from being adopted as a standard by anybody, and while XHTML1 is parsed as HTML there’s no advantage in using it. Coding HTML4 strict is just as good, and that’s what I’ve taken to doing on many sites I build now.

Microsoft Unveils Silverlight to Power the Next Generation of Media Experiences on the Web — This is their attempt at taking some of Adobe’s Flash audience. I haven’t seen the software for creating Silverlight anims yet, but I actually prefer the implementation of this than I do that of Flash; Silverlight uses XML and Javascript to run its commands, so you can make live edits without constant recompiling. However, supporting only 3 OSs (Vista, XP and OS X 10.4.8) and a handful of browsers (IE6, IE7, FF1.5.*, FF2.0.* and Safari 2.04) doesn’t really qualify it as cross-platform and cross-browser. Miguel de Icaza gives a more detailed analysis of Silverlight, Flash, and an open-source alternative.

SVG is an XML markup language for describing two-dimensional vector graphics, both static and animated.

That’s a pretty big deal; static or animated images which are marked up with XML, meaning you can use the DOM to manipulate them. Interactive images; imagine the possibilities!

It can be called in many ways; as an <object>, as an <img>, as a background-image. Being a vector format, it can also be resized without loss of quality, so is perfect for High DPI websites.

In short, it’s the format of the future — and it’s pretty close to making the big time.

Firefox and Opera support it natively as an <object>, and the latter have announced that they have it implemented as a background-image in development builds. Internet Explorer and Safari support it as an <object> with the aid of a plugin, which is pre-installed in Safari’s case. They have stated that SVG will be given much more prominence in the next release — largely, I suspect, because of the Adobe Apollo deal. Konqueror users can also view SVG with this plugin.

What’s needed to really give it the spotlight it deserves is the same thing that many other emerging technologies need: native support in IE. As the market-leading browser with largest market share, it’s frustrating that it’s by far the most conservative.

The next version (1.9, currently available as a preview release) introduces a whole load of new features and fixes to the engine. In my last post I mentioned the speed increase thanks to the move to a new graphics layer and changes to rendering order, as well as support for the APNG format and fixes to the CSS to allow it to pass the Acid2 test. But there’s more. Here are some new features of interest to developers:

OS X users will be happy to hear that Cocoa is used for widgets instead of Carbon. For non Apple-heads, that means that form objects will be rendered as shiny and round instead of grey and square:

The CSS2.1 inline-block and inline-table values for the display declaration have been implemented. I believe that Opera is the only browser to support the latter, while the former is more widespread — even IE7 supports it!

Potentially a big one, if I understand it correctly: the non-standard script object is no longer supported. There seems to be some confusion over this, but my interpretation is that script tags without the required type attribute will no longer work; that is, no more:

<script language=“Javascript”></script>

Also slightly nebulous is the news that the engine now supports stylesheet switching as per the WHATWG Wep Apps 1.0 proposal. As far as I can see, this allows you to define a number of alternate stylesheets with the rel=“alternate stylesheet” attribute; I’m a little confused as this has been implemented in Firefox for a while, but maybe it means it will be part of the engine from now on.

Other new features include: XML documents rendered as they download (instead of after they’ve downloaded), a whole load of DOM and Javascript updates, lots more SVG support (although not as much as I’d like), and — as the voiceovers for multi-CD collections have it — many, many more.

You can grab a copy of the Gecko 1.9 pre-release preview here, although do bear in mind that this is alpha software, with all the risks inherent to that.

I’m mostly self-taught, but there’s no way I would have been able to make a career out of it — and keep interested in it — without the aid of the books below.

Please note: I’m not saying that these are necessarily the best books available, just that they have been — and continue to be — inspirational to me. OK, in no particular order…

• Designing With Web Standards, by Jeffrey Zeldman

  Probably the daddy of them all. This book explains clearly and concisely the importance of maintaining standards and why the old tables-based websites should be phased out. Encouraged me to make the big shift from my old bad habits.

  There’s a lot of theory in this book, and it’s probably only halfway through that the code examples begin to appear; but that doesn’t stop it from being an interesting read. Although it’s apparently showing its age a little now, much of the theory is still valid and I’d recommend this to any entry-level developers.

• Web Standards Solutions, by Dan Cederholm

  After Zeldman’s book, I’d recommend this. It picks up the themes and runs with them, providing plenty of real-life coding examples, many of which I still use to this day. It covers all of the principal HTML elements we use day-to-day, and you’ll feel like an expert when you finish it.

• DOM Scripting, by Jeremy Keith

  When you’ve got your HTML and CSS up to scratch, this is an excellent introduction to adding enhancements to your pages, without unnecessary and intrusive code. Easy to follow examples will have you making more interactive and dynamic pages in no time.

• Transcending CSS, by Andy Clarke

  My latest read, and a real treat. A beautifully designed and illustrated manifesto of progressive web design, based on a solid understanding of design and markup. Oversized and full colour throughout, it’s the closest thing yet to a web development coffee table book — but don’t think it’s just pretty, it’s also very useful.

  I gave a fuller review over at CSS3.info, and I’m finding it more and more useful. I can’t wait to see what web pages look like in a year’s time when more people have read this.

• CSS Pocket Reference, by Eric A. Meyer

  Last but by no means least, this is indispensable to me. Exactly what it says it is: a pocket-sized guide to CSS2.1 selectors. I carry this around with me always; after all, it’s hard to remember every single facet of CSS, and it’s a lot quicker than visiting W3Schools.com, for example.

  I can’t wait until there’s a CSS3 edition — at the very least, I’ll need to replace my battered and dog-eared copy soon.

So, that’s my pick of the books that have helped me the most in my career to date. I’d love to hear of any recommendations to add to my library.

Good news for everyone: Microsoft look as if they’re taking web standards seriously. First came the news that standards guru Molly E. Holzschlag has signed up to work on standards and interoperability for the next release of Internet Explorer, then the Web Standards Group announced that they have had talks with the IE team about the five most-wanted features in IE.

All positive news; very nice to report it!