css 前缀

tech2022-12-29  71

css 前缀

The -webkit- prefix is now so dominant across CSS on the web that some websites fail to work properly without it. While this is clearly a sign of less than ideal practices by developers over the past few years, it has led to quite an unfortunate but almost necessary move by Mozilla. By either Firefox 46 or 47 (released either in April or May 2016), Mozilla plan to implement support for a series of non-standard -webkit- prefixes to improve Firefox’s compatibility with a -webkit prefixed (and often mobile) web.

现在, -webkit-前缀在网络上CSS中如此占主导地位,以至于某些网站如果没有它就无法正常工作。 尽管这显然表明过去几年开发人员的做法并不理想,但这却导致Mozilla不幸但几乎是必要的举动。 通过Firefox 46或47(于2016年4月或2016年5月发布),Mozilla计划实现对一系列非标准-webkit-前缀的支持,以提高Firefox与-webkit前缀(通常为移动设备)的Web的兼容性。

This is not a new idea, Microsoft Edge supports a series of -webkit- prefixes too to ensure compatibility. Opera already began implementing -webkit- prefixes in 2012 and have since moved to the WebKit based Blink engine.

这不是一个新主意, Microsoft Edge也支持一系列-webkit-前缀以确保兼容性。 Opera已于2012年开始实施-webkit-前缀,此后已转移至基于WebKit的Blink引擎。

The W3C and browser vendors did not intend for vendor prefixes to be used on production websites:

W3C和浏览器供应商不打算在生产网站上使用供应商前缀:

“Official W3C policy states that you shouldn’t really use experimental properties in production code, but people do, as they want to make sites look cool and keep on the cutting edge.” – W3C page on optimizing content for different browsers

“ W3C的官方政策规定,您不应在生产代码中真正使用实验属性,而应该这样做,因为人们希望使站点看起来更酷并保持领先地位。” – 关于针对不同浏览器优化内容的W3C页面

However, developers everywhere wanted to use them to access the latest features as soon as they could. While prefixes have caused a bit of a mess with WebKit’s dominance, I think they succeeded in helping the web move forward quite rapidly.

但是,各地的开发人员都希望尽快使用它们来访问最新功能。 尽管前缀使WebKit的统治地位有些混乱,但我认为前缀成功地帮助了WebSwift发展。

The approach by Mozilla and Microsoft is likely to be harmless to most websites. Most websites online will have already included -moz- prefixes or will find that the updates by Mozilla improve their website compatibility with no action required. As professional web developers though, we do need to be thorough and understand that there are outlier results that may occur on some designs. You may already know which of your creations could break with this update.

Mozilla和Microsoft的方法可能对大多数网站无害。 大多数在线网站已经包含-moz-前缀,或者发现Mozilla进行的更新无需任何操作即可提高其网站兼容性。 不过,作为专业的Web开发人员,我们确实需要透彻,并了解某些设计可能会出现异常结果。 您可能已经知道您的哪些创作可能会因此更新而中断。

Developers, it is clearly time to rethink your approach to prefixes and test those websites.

开发人员,现在是时候重新考虑您的前缀和测试这些网站的方法了。

涉及的前缀 (The Prefixes Involved)

There are a range of -webkit- prefixes Mozilla might look to include. From what I’ve gathered, Mozilla aren’t looking to match Edge’s list of supported -webkit- prefixes, as not all of these are likely to be necessary to ensure Mozilla’s Gecko layout engine compatibility with the broader web.

Mozilla可能会包含-webkit-前缀范围。 从我收集的数据来看,Mozilla并不希望匹配Edge的受支持的-webkit-前缀列表,因为并非所有这些对于确保Mozilla的Gecko布局引擎与更广泛的网络兼容都是必要的。

The prefixes Mozilla is likely to approach according to their wiki page on Compatibility/Mobile/Non Standard Compatibility includes the following:

Mozilla可能会根据其关于兼容性/移动性/非标准兼容性的维基页面来使用前缀,包括:

-webkit-flexbox

-webkit-flexbox

-webkit- prefixed gradients

-webkit-前缀渐变

-webkit-transforms

-webkit-transforms

-webkit-transitions

-webkit-transitions

-webkit-appearance

-webkit-appearance

-webkit-background-clip

-webkit-background-clip

-webkit-device-pixel-ratio

-webkit-device-pixel-ratio

-webkit-animation

-webkit-animation

-webkit-border*

-webkit-border*

Some other features may be impacted too such as @-webkit-keyframes.

其他一些功能也可能会受到影响,例如@-webkit-keyframes 。

跨浏览器测试将至关重要 (Cross Browser Testing Will Be Crucial)

If you are a web developer out there who left out -moz- prefixes to avoid the need to test newer CSS features on Firefox — let’s assume you were on a tight deadline and the client forced your hand — you are going to need to retest that site in Firefox 46 or 47. These versions of Firefox will be out in either in April or May, so you have a bit of time to plan ahead.

如果您是一位Web开发人员,则省略了-moz-前缀以避免在Firefox上测试较新CSS功能-假设您的截止日期很紧,并且客户端用尽了-moz- -您将需要重新测试Firefox 46或47中的站点。这些版本的Firefox将于4月或5月发布,因此您还有一些时间要计划。

To test your website before these changes reach Firefox 46/47, you can access the current state of the change in Firefox Nightly via the layout.css.prefixes.webkit preference in about:config. It should be set to true by default if you have the latest Nightly version installed. Not all of the -webkit- prefix changes are in Firefox Nightly just yet, however this is the place to test how your website looks so far. I would wait until about March before testing with Firefox Nightly too thoroughly.

要在这些更改到达Firefox 46/47之前测试您的网站,您可以通过about:config的layout.css.prefixes.webkit首选项在Firefox Nightly中访问更改的当前状态。 如果您安装了最新的Nightly版本,则默认情况下应将其设置为true 。 并不是所有的-webkit-前缀更改都在Firefox Nightly中出现,但这是测试到目前为止网站外观的地方。 我要等到三月左右,才能对Firefox Nightly进行全面测试。

On a more urgent note, Microsoft Edge is already interpreting and displaying -webkit- prefixes in this way. This means that any WebKit specific styles you have within your sites could already be displaying in a browser you were not expecting them to. If you have not already done so, get yourself access to Microsoft Edge in Windows 10 and test those websites!

更紧急的是,Microsoft Edge已经以这种方式解释和显示-webkit-前缀。 这意味着您在网站中拥有的任何特定于WebKit的样式可能已经在您不期望的浏览器中显示。 如果您尚未这样做,请访问Windows 10中的Microsoft Edge并测试那些网站!

供应商前缀逐渐消失 (Vendor Prefixes Are Fading)

Luckily, it appears vendor prefixes are fading away as browser teams look for better solutions. The Chrome/Blink team have adjusted their approach:

幸运的是,随着浏览器团队寻求更好的解决方案,供应商前缀似乎正在消失。 Chrome / Blink小组已调整其方法:

“Going forward, instead of enabling a feature by default with a vendor prefix, we will instead keep the (unprefixed) feature behind the “enable experimental web platform features” flag in about:flags until the feature is ready to be enabled by default.” – The Chrome/Blink team

“前进,而不是默认情况下没有使用供应商前缀来启用功能,我们将在(启用)实验性“启用实验性Web平台功能”标志后的about:flags保留(无前缀)功能,直到准备好默认启用该功能为止。 ” – Chrome / Blink小组

The Firefox team are also on their way to a similar approach:

Firefox小组也正在采用类似的方法:

“For what it’s worth, the current trend inside Mozilla is […] avoiding vendor prefixes by either turning things off before shipping or shipping them unprefixed if they’re stable enough. At least as a general policy; specific cases might merit exceptions.” – Boris from Mozilla

“就其价值而言,Mozilla的当前趋势是[…]避免供应商前缀,方法是在发货前先将其关闭或在足够稳定的情况下以无前缀方式发货。 至少作为一般政策; 具体情况可能值得例外。” – 来自Mozilla的Boris

Microsoft Edge aims to remove support for prefixes altogether:

Microsoft Edge旨在完全删除对前缀的支持:

“Microsoft is also getting rid [of] vendor prefixes for Edge. This means that in order for developers to take advantage of special HTML5 or CSS features, they won’t have to use a specific Edge prefix. Instead, they can just code to web standards.” – Mashable

“微软还摆脱了Edge的供应商前缀。 这意味着为了使开发人员能够利用特殊HTML5或CSS功能,他们不必使用特定的Edge前缀。 相反,他们可以按照Web标准进行编码。” – 混搭

不再因前缀而优雅降级 (No More Graceful Degradation By Prefixes)

This movement away from vendor prefixes means one thing — graceful degradation via vendor prefixing is clearly not the way to go.

远离供应商前缀的这种迁移意味着一件事-通过供应商前缀进行的正常降级显然不是可行的方法。

Using vendor prefixes to target a specific browser (e.g. something specific just for Chrome) was not the intention of vendor prefixing; the recommendation was always for developers to use all available vendor prefixes (from -webkit- to -o-). If you are using features that rely on prefixed properties and you used prefixes to gracefully degrade your design on other browsers, this won’t work anymore.

使用供应商前缀来定位特定的浏览器(例如,仅适用于Chrome浏览器)不是供应商前缀的目的; 对于开发人员,建议始终使用所有可用的供应商前缀(从-webkit-到-o- )。 如果使用依赖于前缀属性的功能,并且使用前缀在其他浏览器上正常降级了您的设计,那么它将不再起作用。

结论 (Conclusion)

The times are changing. WebKit’s dominance is unintentionally causing a fractured and incompatible web and other browsers are looking to expand their compatibility by implementing -webkit- prefixes to keep up. While this issue should fade as vendor prefixes are phased out, developers need to check that their use of prefixes does not cause unexpected results in non-WebKit browsers.

时代在变。 WebKit的主导地位无意间导致了网络崩溃和不兼容,其他浏览器正寻求通过实现-webkit-前缀来保持兼容性,从而扩大其兼容性。 尽管随着供应商前缀的淘汰,此问题将逐渐消失,但是开发人员需要检查其前缀的使用不会在非WebKit浏览器中导致意外的结果。

有用的链接 (Useful Links)

Mozilla’s Intent to Ship Document on these changes

Mozilla针对这些更改发送文件的意图

Mozilla’s Bug Tracking for this issue in Bugzilla

Mozilla在Bugzilla中针对此问题的错误跟踪

WebKit APIs supported by Microsoft Edge’s latest build

Microsoft Edge的最新版本支持的WebKit API

Documentation on bringing -webkit- prefixes into the living standard on the web

有关将-webkit-前缀纳入网络生活标准的文档

The Register’s coverage of the Firefox WebKit compatibility changes

Firefox WebKit兼容性的注册范围更改

翻译自: https://www.sitepoint.com/its-time-to-rethink-vendor-prefixes-in-css/

css 前缀

相关资源:自动给CSS添加前缀
最新回复(0)