厂商前缀

New CSS3 features are a blessing for web-developers: with a few lines of code we can do things that were nearly impossible a few years ago. But these features are also a real pain for us: we have to write the same property many times for different browsers.

新的 CSS3 特性是开发者的福音：几行代码可以做到几年前几乎做不到的事。但是同时也给我们带来一个痛苦：一个属性需要为不同的浏览器重复写几遍。

Emmet’s CSS resolver has a nice feature that can greatly improve your CSS3 experience. Every time you precede CSS property or its abbreviation with a hyphen, Emmet automatically creates vendor-prefixed copies of this property. For example, -bdrs abbreviation will be expanded into

Emmet 的 CSS 解析器提供一个不错的功能，可以大大提高你的 CSS3 开发体验。在属性前或缩写前放一个连字符，Emmet 会自动给这个属性添加厂商前缀。例如缩写 -bdrs 将展开为：

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

Moreover, in editors with tabstops support (such as Eclipse, Sublime Text 2, Espresso etc.) Emmet will create a linked value placeholder so you can type a property value and it will be automatically placed in all generated properties.

而且对于支持插入占位的编辑器（Eclipse, Sublime Text 2, Espresso 等），Emmet 将创建关联的属性值占位，输入一次将自动插入到所有生成的属性中。

How it works? 工作原理

Whenever you expand abbreviation with a hyphen in front of it, Emmet removes the hyphen and looks for a snippet definition in snippets.json for the rest of the abbreviation. For example, for -bdrs abbreviation it will look for a bdrs definition. snippet.json has the following definition:

缩写前放一个连字符，展开时，Emmet 移除连字符，然后在 snippets.json 里查找缩写的定义。例如 -bdrs 将查找 bdrs：

"bdrs": "border-radius:|;"

...which means that bdrs will be expanded into border-radius property. If no definition found, the abbreviation itself will be used as a CSS property name.

bdrs 将展开为 border-radius 属性。如果没有找到定义，缩写将用作一个属性名。

After the CSS resolver figures out a property name that should be outputted, it will look for its occurrence in special vendor catalogs. These catalogs are defined as css.{vendor}Properties entries in preferences and can be overridden by user. {vendor} is a browser’s vendor prefix, for example, webkit, moz etc.

当 CSS 解析器知道要输出属性名后，便在“厂商分类”中查找此属性名。这些分类在配置里由 css.{vendor}Properties 定义。{vendor} 是浏览器厂商前缀，比如 webkit, moz 等。

If the expanded property was found in any of these catalogs, their vendor prefixes will be used to produce prefixed properties. Otherwise, all prefixes will be used.

如果在厂商分类中找到了，这些厂商前缀将用于生成带前缀的属性。如果没找到则使用所有的前缀。

For example, the border-radius property is defined in css.webkitProperties and css.mozProperties so this property will be outputted with webkit and moz prefixes. On the other hand, a foo property isn’t defined anywhere so it will be outputted with all available prefixes when you expand -foo abbreviation: webkit, moz, ms and o. It is especially helpful for using cutting-edge CSS properties that were recently implemented.

例如属性border-radius 在 css.webkitProperties 和 css.mozProperties 中有定义，这个属性输出时将带上前缀 webkit 和 moz。属性 foo 在所有分类中均没有定义，则展开缩写 -foo 时将带上所有前缀: webkit, moz, ms and o。这个功能在使用刚实现的 CSS 属性时特别有用。

Imagine that Google Chrome implemented super-foo property yesterday and you want to use it in your project. You can expand -super-foo abbreviation which results in the following snippet:

假定昨天 Google Chrome 实现了属性 super-foo，你打算用在项目中，展开 -super-foo 得到：

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

Add prefixed properties by default 默认添加厂商前缀

While writing CSS files, you may find that a “clear” CSS3 property is useless without its vendor-prefixed variants. It makes writing hyphenated abbreviations like -trf (trf is an alias to transform property) a bit awkward.

一个 CSS3 属性如果没有厂商前缀可能就没用，这样书写带连字符的缩写不方便。

This is why Emmet has css.autoInsertVendorPrefixes preference enabled by default. With this preference enabled, all CSS properties defined in vendor catalogs will be automatically supplied with matched vendor-prefixed variants.

这便是 Emmet 为什么默认启用选项 css.autoInsertVendorPrefixes。当启用这个选项后，所有在厂商分类里定义的 CSS 属性将自动添加相应的厂商前缀。

It means that you don’t need to use a hyphen to get valid prefixed variants for known CSS properties, simply expand abbreviations like bdrs or trf to get a valid list of vendor-prefixed properties.

这意味着不需要对已定义的 CSS 属性使用连字符去添加厂商前缀。例如展开 bdrs 或 trf，将得到一列带有厂商前缀的属性。

Explicit vendor prefixed 显式添加厂商前缀

Sometimes you may want to output CSS properties with specified vendor prefixed properties only.

有时你只想输出指定厂商前缀的 CSS 属性。

Let’s say you want to output transform property with webkit and moz prefixes only. In this case you can expand the following abbreviation:

比如说输出属性 transform，只带有前缀 webkit 与 moz。在这种情况下展开下面缩写：

-wm-trf

As you can see, we slightly modified the abbreviation by adding a list of one-letter prefixes. In this case, these are w (webkit) and m (moz) prefixes. Emmet has the following one-letter prefixes:

如你所见，添加单字符的前缀列表可以修改缩写。这个例子中是 w (webkit) 和 m (moz)。Emmet 支持下面单字符前缀：

• w: webkit
• m: moz
• s: ms
• o: o

译注：目前的趋势是浏览器在实现新属性时不再使用厂商前缀，而是通过特性开关来启用。这样可以避免厂商前缀带来混乱。