So. Anyone know how to post code snippets?

On my (boring, staid, being uplifted) portfolio site, I use jQuery to handle hiding and showing all of the project summaries when you click a project’s thumbnail. Now, jQuery makes sliding elements up and down extremely easy, but it is silly to include the whole library for basically a couple of animations. After seeing a pure-CSS stopwatch, I was inspired to reconsider writing my whole website without any JavaScript. It was a crazy idea, but just crazy enough it might work.

Enter the :target pseudo-class. This selector enables you to style an element which has been targeted by clicking an anchor tag (e.g., when you click a superscript number in Wikipedia to jump to that footnote). A few turn of the mind-wheels later, and I realized that, combined with CSS transitions, this would be the key to life, liberty, and the pursuit of happyness. Or at very least the path to pure CSSdom.

And then came cold, bitter reality.

The basic idea is all well and good when you know the exact dimensions of the element, but transitioning to an arbitrary dimensions (e.g., height: 100%) is not yet implemented by major browsers. A workaround is mentioned in that thread (animate max-height instead), but this method has a significant drawback: the transition is animated as if the element is the largest it could be. In other words, if the transition duration is 500ms, height of the element is 400px, and max-height of the element is 2000px…the element will actually be shown in 100ms. 

Example on jsFiddle showing this breakdown

le sigh