Home / Articles / Programming languages / Markup languages / HTML & CSS / What are vendor prefixes in CSS?

What are vendor prefixes in CSS?

What are vendor prefixes in CSS?
 
What are vendor prefixes in CSS?
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Vendor prefixes are prefixes added to CSS properties that are used by browser vendors for non-standard properties.

According to the specifications of CSS 2.1, CSS IDs, that start with "-" or "_" are reserved as CSS browser extensions. The presence of these signs before properties will ensure that in future, browser extensions will never interfere with the standard CSS properties. That is, browsers will not "accidentally" understand these properties as their own.

What kinds of prefixes there are?

Vendor prefixes that are used in most popular browsers are given in the table below:

Vendor prefix

Vendor

Browser

Browser engine

-o-, -op-, -xv-

Opera Software 

Opera

Presto

-moz-

project Mozilla

Firefox, SeaMonkey, Camino and others.

Gecko

-ms-

Microsoft

Internet Explorer 8

Trident

-khtml-

project KDE

Safari till version 3, Konqueror and others.

KHTML served as a base for WebKit

-webkit-

Apple

Safari 3+, Google Chrome and others.

WebKit

How does it work?

For the element a CSS property is set in a direct form only for a specific browser to understand it. After the element there goes a semicolon, followed by the same property, but with different-vendor prefix designed for a specific browser. First, the browser interprets only the property, which is written for this browser, but if the following prefix is not intended for this specific browser, it will be ignored.

For example, CSS property opacity, is responsible for the transparency of the element, as a cross-browser element it is used as follows:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* IE 5.5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */
-moz-opacity: 0.7; /* Mozilla 1.6 */
-khtml-opacity: 0.7; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.7; /* Safari 2.0+ , Chrome, Firefox, Opera */

Why do we use it?

In their blog, developers of Internet Explorer name three reasons for the use of the vendor prefix -ms- designed specifically for the browser IE8:

  • If this property is designed specifically for Microsoft IE and is not described in the specifications or the CSS module.
  • If the CSS module related to the property is in the process of development W3C and still hasn't got the status of a candidate for recommendation (Candidate Recommendation).
  • If the property only partially implements the functions of the properties described in the CSS module or specifications.

Other vendors use vendor prefixes for similar reasons. For example Mozilla has a huge list of their own CSS properties, with their own values. These properties have -moz- as vendor prefixes, they are designed specifically for Firefox, and are described neither in any CSS module nor any specification.

In addition, Microsoft has managed with the help of vendor prefixes to hide from the validator structures which would otherwise fail the validation. Mainly in respect to filters. For IE 5.5-7 the filter looks like this way:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* IE 5.5-7 */

This design in no possible way can to be validated! But almost the same code is excepted as valid by the same filter, but for IE 8:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */

Of course, we don't really like writing few extra lines of code with vendor properties for each browser, instead of a single line of code with the standard properties. But don't forget that CSS3 specifications are still in development. Possibly the description of the property will suffer some changes during standardization, or it will be absent what so ever. Then of course it will be easier for developers to abandon vendor properties and maintain standards. You probably agree upon the following statement, if in different browser versions the same property will work in a different ways, no good will come of it. Let older browsers operate with vendor properties, and the new versions would support the specifications directly. For new versions it's better to completely ignore vendor prefixes.

Use

Thanks to vendor prefixes browser companies are already implementing experimental CSS3 properties at their own risk.

Coders can already implement most of the possibilities offered by CSS3, including a variety of transitions and animations without the use of scripts, but instead using vendor prefixes.

Vendor prefixes - are special attachments to the names of CSS properties, created for a specific browser, which allows browsers to understand the experimental CSS properties and at the same time ignore the code intended for other browsers.

Properties with vendor prefixes do not meet standards and will not be validated. If you are not too much concerned about it, then use them, because, in the right hands they are a very powerful tool.

Note

Specification properties are always written as last.


 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation