CSS3 resize property & Firefox

Picture showing the corner graphic applied to textareas -a triangle of dotsHmm a few weeks ago I noticed that all my textareas had automagically gained a jQuery resize script along with grab-handle graphic, or so I thought initially.

In typical fashion I puzzled over this appearance for a while, looking in all sorts of directions for an answer as to why and where this had appeared from, had I added a script in my sleep? Had WordPress added the script?

It wasn’t until I realised that it was on all textareas across the board that I began to figure it was browser related and then checking cross browser realised that it was just Firefox demonstrating this behaviour.

Enter the CSS3 property 'resize'. After a while I tracked this down to the application of a really rather useful property in the CSS3 arsenal, to quote the W3C:

The ‘resize’ property allows the author to specify whether or not an element is resizable by the user, and if so, along which axis/axes.

So one can now do – in supporting browsers – div.resize {resize: both;} to enable user resizing of any element that had that class applied – all well and good!

My issue? My issue is while the property is a more than welcome addition to our toolboxes, it’s necessary mode of operation, that of injecting inline styling ( fixed varying dimensions – activated when the grabhandle is held and moved ) to ones element can have undesirable results on ones layout if this hasn’t been accounted for.

Checking further as I now had a real issue with why this property was applied to my textareas WITHOUT my say so or involvement had me reading the specs for this property:

To quote again from the W3C ( css3-ui/#resizing ):

Value: 	none | both | horizontal | vertical | inherit
Initial: 	none 

The important part of that is the ‘Initial’ value a UA should apply , in this case it’s NONE! So why is Firefox applying what amounts to textarea (resize: both;}

I have now had to add the generic ruleset textarea {resize: none;} to my normative generic styles to cancel this behaviour until I implement it myself for a layout.

I first raised this issue on CSScreator in this thread:

Comments are closed.