Didn't put this in the client-side section since I'm not really asking for coding help. More of a discussion.
I feel like this is a case of "the left hand doesn't know what the right hand is doing". Or maybe it does and it just simply doesn't care.
My prime example is the placeholder attribute introduced in HTML5. Awesome little attribute that can be extremely useful and effective on a website. But the ability to style it is not standardized at all. In fact to my knowledge there is no standard CSS style for it - it's styled entirely via vendor prefixes.
BUT
It's supported in all the major browsers pretty consistently. I think the only odd one is Firefox which inherently adds a slight opacity to it, but otherwise it's supported equally across the board (IE9 notwithstanding).
So now to style a placeholder attribute you have to do something like this (taken from CSS Tricks, though additional browser comments are mine):
::-webkit-input-placeholder { /* Chrome, Safari, Opera */
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder { /* IE 10+, Edge I assume? */
color: red;
}
Seems pretty cumbersome once you have to change the styling. And you can't group them together like so...
input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
color: red;
}
...because once a browser doesn't recognize one of the selectors it ignores the whole rule, so you're forced to separate it.
Luckily we have CSS preprocessors so this sort of thing is mitigated:
.Placeholder()
{
&::-webkit-input-placeholder
{
.Placeholder-Properties();
}
&:-moz-placeholder
{
.Placeholder-Properties();
}
&::-moz-placeholder
{
.Placeholder-Properties();
}
&:-ms-input-placeholder
{
.Placeholder-Properties();
}
}
.Placeholder-Properties()
{
color : lighten(@black, 75%);
font-family : @font;
font-size : 16px;
opacity : 1; // Required for Firefox
}
And it can be applied like so:
input[type=text],
input[type=email],
input[type=password]
{
.Placeholder();
}
There are other things to like the lack of ability to style <select> tags, file inputs, sliders, etc. Yeah you can do some styling on these, but it's very inconsistent and usually you have to rely on some kind of JavaScript library to get what you're looking for.
It would just seem to me as newer HTML5 elements and technologies are being introduced, corresponding CSS styles would be added at the same time, or at least shortly after.
Anyone else run into these kinds of things? Any that I missed that bother you?
