CSS ALL of the things!

CSS ALL of the things!
Some notes on the Opera browser and UI elements in general

I've begun using html5 form elements and while they're better than what we had when Netscape first came, out there's still a very long way to go in my opionion. Developers have far less control over the UI elements (input=date, color, range, etc) the browser uses to conform to the HTML5 spec than we'd like. Indeed UI elements appear as almost an afterthought with little attention payed to them; to wit - recently, Opera default styled one line text boxes with round ends perfectly. And submit buttons. And applied rounded corners to select drop-downs but they have little white corners because there's no transparency there. Who does this?!?

And this stuff isn't rocket science. A few years ago I was able to find out from Opera that you could reference any of the built in styling elements in the browser - the color (or gradient) used for the toolbar (no matter what it's curently set to) and things like that. It only works in Opera of course, but it was nice that hook was in there. The idea I had was that if/when somebody changes the theme in their browser then the theme of the web apps they use changed similarly. And this mechanism would let you do that, at least in Opera and as so often happens, the other browsers copy Operas features and I figured by now (2013) the other browsers would be doing this. But no.

Because, What I think we really want, at least sometimes, is one homogeneous surface where UI elements live and I see no reason why browser ui elements and web page ui elements *have* to be different.

Input type=range is a perfect example. webkit lets you style it, but that only works in webkit. OTOH, the opera browser already has such a slider in the bottom right of the browser (in fact it looks like the one of the demo "how to style range sliders" pages out there. Sexy. Uh, if you look at it with w Webkit browser, Chrome or Safari that is...) but the HTML5 one instead is pretty crappy and can't be changed. Styling it only works in webkit and the irony is I can make the ugly default Chrome slider look like the sexy Opera one, but I can't do with in Opera. That is I can't make the Opera range slider look like the range slider Opera uses, in Opera. Just Chrome. WHO DOES THIS?

This just makes no sense to me. Why do we need two? I'm not quite sure why Opera went to the trouble of making up a new (and uglier one) for type=range when the one that had been in every (desktop at least) browser for a couple of years now?

So, I agree that a shadow dom makes a lot of sense. Its if nothing else one possible way to bride the gap between browser controls and controls you can write that the browser renders, right now never the twain shall meet, and that's not helpful.

Because really, there are a small set of graphic primitives - the dropdown, the slider and a few more - but realy not that many - and they show up in native apps on Windows (no two the same!) browsers (no two the same!) and web pages. All different. Different can be fine for some things, but it would be nice for the option to exist that they could actually be the same. And this isn't rocket science to do.

I can't help but feel ui complexity would be knocked down a notch if at least the option existed to have them be all the same! If noting else it's one less thing to explain to a new user. No that's a color picker. Really. It just looks worse because it's new and improved. wtf?

Photoshop and Google are almost old enough to vote, we're supposed to be past this stuff now.

RJ Sexton
January 2013