Everybody wants to be -webkit-

[pygy]

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.

[LeaVerou]

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...

[pygy]

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-like CSS2Properties 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 if webkit prefixed properties ever outnumbered moz 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.

[LeaVerou]

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.

[pygy]

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...

[LeaVerou]

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…

[pygy]

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;
}

[pygy]

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).

[pygy]

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

[pygy]

Digging deeper, the whatwg specifies various CSS things that must be supported with a webkit prefix

https://compat.spec.whatwg.org/#css-compat-section

[pygy]

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.