I've used a lot of css and I get how to use it. I understand why I have to put extra properties in order for different browser to do the same thing. My question is: Why don't the browsers implement some of the more common properties? For example:
I need text to not be selectable, so I add this:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Nearly all of them say user-select and the last one, the one that seems like it should be supported on multiple browsers, is not supported at all.
Does anyone know why at least some browsers don't start migrating to a universal standard? If everyone has something that does the same thing, perhaps browsers can put some effort into fixing this?
I understand that if Mozilla got rid of -moz-user-select, then some pages would break, however that doesn't mean they can't add user-select as well so that more pages would work.
Any ideas?
Browser prefixed properties are meant to be used as a beta/trial/demonstration/experimental/{inser more adjectives here} and not fully implemented or are part of a property where the standard documentation isn't finished/approved/done.
When the feature is fully usable, then it's dropped the prefix and used as 'standard'.
You can see how much this is experimental by how you would have to declare all the ways the gradient for backgrounds were proposed over the years, with the 'standard' version as last:
background: #1e5799; /* Old browsers */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
From http://www.colorzilla.com/gradient-editor/
Refer to the comments on above code for each browser version.
Also, a good read: http://davidwalsh.name/vendor-prefixes A quote:
Why Vendor Prefixes?
There are a few reasons browser vendors use prefixes:
- To implement proprietary CSS properties that have no working standard and may never become standard
- To provide early implementations of standard properties
- To provide an alternate syntax than the standard
- Other reasons may apply but these are the main reasons.