Monday, 20 February 2012

Meta full circle

Which annoys me most; the hack to get something out there or the tunnel vision developed when I return? I changed the search box on this blog a while back to use an input prompt but - wanting something that would work across the three main browsers, and aware of the need to avoid searching on the prompt text - settled for a short term fix of a background image which I could remove/add with JavaScript when the search box got/lost focus. An age later I got around to using two elements; a prompt label and a text input with transparent background, believing that a correct z-index would ensure the input overlaid the prompt and thus, when the input received/lost focus I could remove/restore the prompt showing underneath. However, whilst this worked for Chrome and Firefox it (almost predictably) didn’t for IE. Even the latest version appears to have issues with z-index, but then a Google search will tell you there’s a problem with everything so I should have known better; time spent trying to bend the stack order to my will might have been more profitably spent simply hiding the prompt when clicked upon.

Which I did; only by this time I was rather taken with CSS3 transitions and of a mind to re-vamp the search box again. And since in addition to the placeholder attribute, transitions are something else that IE still doesn’t support, this was the point at which I bit the bullet. Graceful degradation for the Microsoft browser; it doesn’t need a smooth transition in width, and I reasoned (though I’m not convinced) I could also get away without the prompt, so excised the previous work and saved it for later, when I’ll undoubtedly change my mind. If I can fix the position of the input text on earlier versions - it’s currently aligning along the top - I’ll be happy enough; I’ve learnt to live without rounded corners after all.