CSS3没有webkit和moz前缀 [英] CSS3 without webkit and moz prefix

问题描述

有一个插件或这样的东西，这将允许我写这样的CSS：

  transition：all 300ms ; 
 box-shadow：0 3px 2px＃222; 
 backface-visibility：hidden; 
  

等。

需要 -webkit - ， -moz - ， -ms -

$ c>， -o - 解决方案

是的， -prefix-free 可让您随处使用无前缀的CSS属性。它在幕后工作，将当前浏览器的前缀添加到任何CSS代码，只有当需要时。 计划的网站

功能

• 处理每个样式表或元素，并在需要时添加供应商前缀




• 关注新元素，样式属性更改和CSSOM更改（需要插件）


• >允许jQuery的.css（）方法获取并设置不带前缀的属性（需要插件）

p>

• 不支持在@ import-ed文件中添加前缀代码


• 前缀跨原始链接样式表除非启用CORS。


• 未预先指定的连结样式表无法在Chrome和Opera上使用。


• 内置样式中的未预设值（在style属性中）在IE和Firefox中无法使用< 3.6。属性以及在Firefox& 3.6。

如何使用

只要在您网页的任何地方加入prefixfree.js即可。建议放在样式表之后，以尽量减少FOUC

就这样了！

浏览器支持

目标浏览器支持为 IE9 + ， Opera 10 + Firefox 3.5+ ， Safari 4 + 和桌面版Chrome 和 Mobile Safari / strong>， Chrome和Opera Mobile移动版。

---

Prefixmycss

此外，还有一个在线服务，允许您粘贴无前缀css代码，并返回带有所有供应商前缀的css。 http://prefixmycss.com/

---

CSS3Please

css3please.com ：由Jonathan Neal和Paul Irish制作的跨浏览器css3规则生成器。除了同步和规范化必要属性的更改之外，它还通过IE过滤器在IE支持几个功能。

---

SASS和COMPASS

另一种方法是使用CSS预处理器 SASS 与 COMPASS 混音。

Sass 是CSS3的扩展，它增加了嵌套规则，变量，混合，选择器继承等等。

Compass 允许扩展Sass，它拥有可重复使用的模式，它允许基于最佳实践以简单而标准的方式使用精灵，CSS3和打字。

---

最后，我建议你阅读来自Paul Irish的文章，他是Google的最佳前端开发人员之一： http://paulirish.com/2012/vendor-prefixes-are-not-developer-friendly/

Is there a plugin or something of this nature that will allow me to write CSS like this:

transition:all 300ms; 
box-shadow:0 3px 2px #222; 
backface-visibility:hidden;

etc..

and for browser versions that require -webkit-, -moz-, -ms-, -o- etc.. are added where required automatically as the stylesheet is loaded.

解决方案

Yes, -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. Project's website

Features

• Processes every stylesheet in or elements and adds a vendor prefix where needed
• Processes elements with a style attribute and adds a vendor prefix where needed
• Takes care of new or elements, style attribute changes and CSSOM changes (requires plugin)
• Lets jQuery’s .css() method get and set unprefixed properties (requires plugin)

Limitations

• Prefixing code in @import-ed files is not supported
• Prefixing cross-origin linked stylesheets is not supported, unless they are CORS-enabled
• Unprefixed linked stylesheets won’t work locally in Chrome and Opera. You can change that for yourself though.
• Unprefixed values in inline styles (in the style attribute) won’t work in IE and Firefox < 3.6. Properties as well in Firefox < 3.6.

How to use

Just include prefixfree.js anywhere in your page. It is recommended to put it right after the stylesheets, to minimize FOUC

That’s it, you’re done!

Browser Support

The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile.

---

Prefixmycss

In addition, there is also an online service that lets you paste your unprefixed css code and returns the css with all the vendor prefixes. http://prefixmycss.com/

---

CSS3Please

css3please.com: a cross-browser css3 rule generator, produced by Jonathan Neal and Paul Irish. In addition to syncing and normalizing changes across the necessary properties, it also sneaks in IE support for a few features via IE filters.

---

SASS and COMPASS

Another way is that one of using the CSS preprocessor SASS with COMPASS mixins.

Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.

Compass allows to extend Sass, it is full of reusable patterns, it allows to use sprites, CSS3 and typhography in an easy and standard way based on best practise.

---

Finally i suggest you to read an article from Paul Irish, one of the best frontend developers woking at Google: http://paulirish.com/2012/vendor-prefixes-are-not-developer-friendly/

这篇关于CSS3没有webkit和moz前缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！