Open pygy opened 8 years ago
Prefix-free finds prefixed properties, then counts all prefixes and picks the more frequently encountered prefix as the current browser's. Perhaps it should try all of them, now that multiple prefixes are becoming common...
In this case, actually, it is a false alarm. Quoting myself in the Bugzilla thread:
As it is, it will not break PrefixFree, but I don't know if it is by design of by accident.
getComputedStyle(document.documentElement, null)
returns an array-likeCSS2Properties
object with 256 string items representing properties. Among those, none are Webkit-prefixed, which means that PrefixFree will not stumble on the wrong prefix.However, the prototype of that object,
CSS2PropertiesPrototype
, a dictionary-like object, has 600+ entries, many of which being webkit-prefixed and enumerable.I don't have any idea of the criteria to select what to put in the Array-like
CSS2Properties
object, though, and ifwebkit
prefixed properties ever outnumberedmoz
prefixed ones there, it would break things.It may be nice to add a comment in the source that populates
CSS2Properties
to keep it webkit-free.
More generally, I agree that testing for all prefixes would be more robust and future proof.
The problem is that in many cases, it will be wasted resources, as browsers have many weird prefixes (e.g. -apple-
) that are only used in very few places and only for proprietary stuff.
There's a related problem with Edge. The majority prefix is -webkit-
, but there's a different set of -ms-
prefixed properties. At a glance the latter are for things that are not on a standard track or shared with other vendors (so a priori they are not a concern for PrefixFree), but I've yet to check them systematically...
Hmm maybe we should check for specific prefixes then and get rid of the detection… I'm pretty sure there are many standards track -ms-
properties, especially on older versions…
IE 9-11 are correctly detected as -ms-
...
Here's what a modified detector finds in Edge 13 for properties... tl;dr, the only property that exists only in -ms-
form is -ms-accelerator
. The others also exist either bare or with an additional -webkit-
prefix.
More checks are needed for selectors and values, though, but it is a good start.
Edit: I moved the results here, and, good news, in Edge 14, -ms-accelerator
has disappedared... Edit again, neither Saucelabs, Browserling nor Browserstack offer Edge 12 for testing... That being said, its usage is below 1% at this point according to caniuse.com.
Here's the detection code:
function detectPrefix() {
var allStyles = getComputedStyle(document.documentElement, null);
var styleAttr = document.createElement("div").style;
function supportedProperty(property) {
return property in styleAttr;
}
var properties = {};
// There's a length in Edge no need to do the usual dance
for (var i = 0; i < allStyles.length; i++) {
properties[allStyles[i].replace(/^-\w+\-/, "")] = [];
}
for (var prop in properties) [ "", "-ms-", "-webkit-" ].forEach(function(prefix) {
if (supportedProperty(prefix + prop)) properties[prop].push(prefix || "bare");
});
return properties;
}
We won't get away that easily :-(
@-ms-viewport
, display: -ms-grid
and -ms-inline-grid
do not have -webkit-
couterparts.
There's a fishy thing with the detector code, because @-ms-viewport
is only detected in Edge 13, not 14, even though caniuse lists it as supported with a prefix in that version...
Still, not good.
The detector is live (See the JSON at the bottom of the page)
Cleaned up output can be found in an updated version of the previous gist.
The detector code is here (current tip of the edgeDetection
branch).
And Mozilla has some -webkit-
-only prefixed properties. At least text-fill-color
which exists as -webkit-text-fill-color
across the board.
http://caniuse.com/#search=text-fill-color demo https://codepen.io/Jintos/pen/crlxk
Digging deeper, the whatwg specifies various CSS things that must be supported with a webkit prefix
Worse still, background-clip: text
is only supported by Firefox. Webkit-derived browsers now support it unprefixed for box-derived values, but if you want to clip to the text, you must use -webkit-background-clip: text
.
https://bugzilla.mozilla.org/show_bug.cgi?id=1170789
Mozilla is in the process of adding
-webkit-
prefix support, which, depending on how it's implemented, may break the way PrefixFree detects plugins, either as soon as they release the change, or once-moz
is outnumbered by-webkit
as-moz
is gradually retired.If it does break it could probably be worked around, but older PrefixFree versions in the wild would break.
The Mozillian in charge of the issue asked me for concrete examples of PrefixFree deployments in the wild, but I'm not using it yet [†], and don't know of any beside the PrefixFree home page...
† I'm in the process of adapting PrefixFree as a plugin for my CSS in JS thing, hence my interest in it.