List of CSS Vendor Prefixes

List of CSS vendor prefixes?

These are the ones I'm aware of:

• -ms- Microsoft
• mso- Microsoft Office
• -moz- Mozilla Foundation (Gecko-based browsers)
• -o-, -xv- Opera Software
• -atsc- Advanced Television Standards Committee
• -wap- The WAP Forum
• -webkit- Safari, Chrome (and other WebKit-based browsers)
• -khtml-, -konq- Konqueror browser
• -apple- Webkit supports properties using the -apple- prefixes as well
• prince- YesLogic
• -ah- Antenna House
• -hp- Hewlett Packard
• -ro- Real Objects
• -rim- Research In Motion
• -tc- Tall Components

These are officially listed in the CSS 2.1 Specification, informative section 4.1.2.2.

What CSS3 features still need vendor prefixes?

There is a great site which allows you to check out support of any css property by most modern browsers. It also shows info about vendor prefixes (if they are needed).
This site is named "Can I use" - http://caniuse.com

What are CSS vendor prefixes?

When new features are introduced to the CSS specification, or simply as a test balloon by one browser vendor, the feature is often hidden behind a vendor prefix. E.g. border-radius started as -webkit-border-radius in Chrome/Webkit browsers, and -moz-border-radius in Firefox. If you want to use such a new feature which is not yet standardised across the board but must be prefixed like this, you need to add all the various -webkit-* and -moz-* forms to your CSS file to support it in all browsers. An autoprefixer makes this easier by allowing you to just use the standard name border-radius, and it'll add all the vendor-specific prefixed versions as alternatives automatically.

How to set vendor prefixed CSS values (NOT property names) | client-side

maybe Modernizr can fix this, like

// returns: -webkit-linear-gradient(left, red, red)
Modernizr.prefixedCSSValue('background', 'linear-gradient(left, red, red)')

---

How it works:

// prefixedCSSValue is a way test for prefixed css properties (e.g. display: -webkit-flex)
// @credits modernizr v3.6.0 | Build https://modernizr.com/download?-prefixedcssvalue-dontmin
Modernizr.prototype.prefixedCSSValue = function(prop, value) {
    var result = false;
    var elem = createElement('div'); // basically: document.createElement.apply(document, ['div'])
    var style = elem.style;

    if (prop in style) {
        var i = domPrefixes.length; // domPrefixes === [ "moz", "o", "ms", "webkit" ] or []

        style[prop] = value;
        result = style[prop];

        while (i-- && !result) {
            style[prop] = '-' + domPrefixes[i] + '-' + value;
            result = style[prop];
        }
    }

    if (result === '') {
        result = false;
    }

    return result;
};

Firefox support of webkit vendor prefixes

In these sort of situations, I always find it very helpful to check MDN. In this case, you can check the articles for linear-gradient, background-clip and -webkit-text-fill-color. Near the bottom, there is always a section titled Browser compatibility. It lists, in a table, browsers that support the CSS rules and in footnotes goes into specifics. For example, about the -webkit-text-fill-color, it says that

[1] This feature is implemented behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

This should answer your question on why the -webkit- prefixed version is supported, and since when. Also note that at the top, the article mentions

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

So: ye be warned.

In this particular case, you might be able to get away with what you want to do, at least in Firefox and Chrome. Other browsers... that's trickier.

---

Your other question is if you can gracefully switch to a fallback when a rule is not supported. Unfortunately, this is not possible in pure CSS. It is possible to write rules that specifically target Chrome or Firefox though, but I would advise against using those. You could maybe check for support using JavaScript, but that is something I wholeheartedly advise against.

---

Finally, "is there any list of foreign vendor prefixes support (like -webkit- prefix support in FF)?" Sort of. Again, MDN is usually very complete and up-to-date. Hope that helps.

Avoid vendor specific prefixes in CSS

A javascript based solution is http://leaverou.github.io/prefixfree/

-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any
CSS code, only when it’s needed.

CSS useless vendor prefixes

I was looking for the same a while ago, and ran into this useful website: Should I prefix?. It lists the CSS properties and whether a prefix is still necessary or not.

Next to that, you can always check Can I Use for more info and detail.

CSS vendor prefixes for HTML Form

If I get your problem right , then your div container is not exactly in the top-left corner. Its because the browser has its default css definitions, like 10px margin on the body element. You can easily solve the problem:

body {
    margin: 0;
}

Or you better start using CSS reset, normalize.css for example.

I hope it helps, and I dont went wrong way.

---

Related Topics