css 前缀_CSS供应商前缀

css 前缀

什么是厂商前缀？ (What are the Vendor Prefixes?)

Vendor prefixes are small strings prepended to CSS properties that will ensure that the property will only be valid and rendered within the given browser engine.  Chrome and Safari both use the WebKit rendering engine, Firefox uses Gecko, Internet Explorer uses Trident, and Opera uses Presto.  Browser vendors generally don't implement other vendor prefixes but due to the popularity of the WebKit-based mobile browser, vendors like Opera and Firefox have also implemented WebKit's vendor prefixes on their mobile offerings.

供应商前缀是CSS属性之前的小字符串，可确保该属性仅在给定的浏览器引擎中有效并呈现。 Chrome和Safari都使用WebKit渲染引擎，Firefox使用Gecko，Internet Explorer使用Trident，Opera使用Presto。 浏览器供应商通常不会实现其他供应商前缀，但是由于基于WebKit的移动浏览器的普及，像Opera和Firefox这样的供应商也已在其移动产品上实现了WebKit的供应商前缀。

Vendors use the following prefixes:

供应商使用以下前缀：

• WebKit:  -webkit
  WebKit：-webkit
• Firefox:  -moz
  Firefox：-moz
• Opera:  -o
  歌剧：-o
• Internet Explorer:  -ms
  Internet Explorer：-ms

为什么使用供应商前缀？ (Why Vendor Prefixes?)

There are a few reasons browser vendors use prefixes:

浏览器供应商使用前缀的原因有几个：

• To implement proprietary CSS properties that have no working standard and may never become standard
  实现没有工作标准并且可能永远不会成为标准的专有CSS属性
• To provide early implementations of standard properties
  提供标准属性的早期实现
• To provide an alternate syntax than the standard
  提供标准以外的替代语法

Other reasons may apply but these are the main reasons.

可能还有其他原因，但这是主要原因。

哪些属性使用或已经使用了供应商前缀？ (Which Properties Use, or Have Used, Vendor Prefixes?)

Prominent vendor-prefixed properties include:

突出的供应商前缀属性包括：

• @keyframes
  @keyframes
• transition and transform properties   (transition-property, transition-duration, transition-timing-function, transition-delay)
  过渡和变换属性(过渡属性，过渡持续时间，过渡计时功能，过渡延迟)
• animation properties (animation-name, animation-duration, animation-timing-function, animation-delay)
  动画属性(动画名称，动画持续时间，动画定时功能，动画延迟)
• border-radius
  边界半径
• box-shadow
  盒子阴影
• backface-visibility
  背面可见
• column properties
  列属性
• flex properties
  弯曲特性
• perspective properties
  透视特性

There have been and will be many more prefixed CSS properties!

已经并且将会有更多的前缀CSS属性！

供应商前缀如何使用？ (How are Vendor Prefixes Used?)

When using browser-prefixed properties, it's best to place the browser-prefixed properties first, then the standard property name and value.  For example:

使用浏览器前缀的属性时，最好先放置浏览器前缀的属性，然后放置标准属性名称和值。 例如：

/* use of keyframes */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}

/* use of basic properties */
.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	animation-name: fadeIn;
}

If the standard is known, that rule is used; if unknown the rule is tossed out and the vendor-prefixed property is used!

如果已知该标准，则使用该规则；否则，使用该规则。 如果未知，则丢弃该规则，并使用供应商前缀属性！

翻译自: https://davidwalsh.name/vendor-prefixes

css 前缀