Seeing as I was Yahoo! web developer for a year, you’d think I’d be “eating dog food” by pimping the YUI JavaScript library. Don’t get me wrong - it is a very powerful and comprehensive framework and definitely worth experimenting with at some point.

Unfortunately though, I had already been playing around with jQuery prior to my employment there so I was already sold on the minimalist, simple approach to jQuery, hence why it is my personal favourite.

Recently, I’ve been building quite a comprehensive web application at Premium Choice which relies heavily on JavaScript. There are many dependencies within the form whereby certain fields should only be shown when other options are selected.

The form adopts a step-by-step accordion wizard interface to simplify the process, therefore certain screens are hidden throughout the process. I was having issues trying to hide already hidden fields when changing options elsewhere. jQuery must be making the assumption that it is already hidden so you don’t need to hide it. However, I wanted to preserve that hidden state when the containing screen was eventually shown.

To get around this, you need to control the actual CSS rather than relying on the pre-defined jQuery $.show() and $.hide() functions, like so:

 if($(this).val()=='something') {
  // show the relating hidden field.
  $('#target_field').css('display', 'block');
} else {
  // hide the relating hidden field.
  $('#target_field').css('display', 'none');
}

It is very unlikely that this situation arises but, on the rare occasion when you encounter it, at least now you’ll know a way around it.

Two years ago, I suggested how a rotation property would be a welcome introduction to CSS, allowing designers and developers to control their designs even further with an often used design pattern.

It seems I wasn’t alone in thinking of this and we are now getting very close to a fully supported solution.

Last year, the forward thinking WebKit guys implemented a new -webkit-transform property to their rendering engine. Among many things, this new property allowed for any element in a web document to be rotated using some very simply syntax:

#my_element {
  -webkit-transform: rotate(90deg);
}

This was all well and good but with support limited to WebKit browsers (like Safari and Omniweb), it had very limited appeal - it was more of a test bed for the future.

Only last month though, the Mozilla team released a nightly build which also supported the new transform property, also prepending their specialist prefix to it as -moz-transform which took the same values as -webkit-transform.

Mozilla also included a secondary property called -moz-transform-origin which allows you to control the point of origin (default is around the centre point).

By using the following code, you will have two of the most popular rendering engines covered when it comes to rotating:

#my_element {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}

That’s Safari and Firefox now covered!

It’s obviously still too early to rely on these CSS properties for mass coverage but if you think along the lines of progressive enhancement - offering a richer experience to users of modern browsers while delivering basic functionality to those less fortunate - it is certainly something you can start playing with.

Twitter have done it with the rounded corners on their recent redesign and I’ve started sprucing up my redesign with several CSS 2.1 properties (check out the slightly rotated headings in the sidebar).

Generally speaking, this is a great move forward with the CSS specification. It’s unlikely to become a firm standard for many years yet but at least you can start sprucing up your designs by experimenting with the CSS Transform properties.