没有webkit和moz前缀的CSS3

Question

是否有一个插件或这种性质的东西,将允许我像这样编写CSS:

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

等等..

以及需要的浏览器版本-webkit-,-moz-,-ms-,-o-等.其中被作为样式表被加载自动需要添加.

Answer 1

是的,-prefix-free允许您在任何地方仅使用未加前缀的CSS属性.它在幕后工作,只在需要时将当前浏览器的前缀添加到任何CSS代码中.项目网站

特征

• 处理每个样式表或元素,并在需要时添加供应商前缀
• 使用样式属性处理元素,并在需要时添加供应商前缀
• 负责新的或元素,样式属性更改和CSSOM更改(需要插件)
• 让jQuery的.css()方法获取并设置不带前缀的属性(需要插件)

限制

• 不支持@ import-ed文件中的前缀代码
• 不支持前缀跨源链接样式表,除非它们是启用CORS的
• 未加固定的链接样式表在Chrome和Opera中无法在本地使用.你可以为自己改变.
• 内联样式中的未加固定值(在样式属性中)在IE和Firefox <3.6中不起作用.Firefox <3.6中的属性也是如此.

如何使用

只需在页面的任何位置包含prefixfree.js即可.建议将其放在样式表之后,以尽量减少FOUC

就是这样,你完成了!

浏览器支持

目标浏览器支持包括IE9 +,Opera 10 +,Firefox 3.5 +,Safari 4+以及桌面和移动版Safari,Android浏览器,Chrome和移动版Opera Mobile上的Chrome.

Prefixmycss

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

CSS3Please

css3please.com:由Jonathan Neal和Paul Irish制作的跨浏览器css3规则生成器.除了在必要的属性上同步和规范化更改之外,它还通过IE过滤器隐藏IE支持一些功能.

SASS和COMPASS

另一种方法是使用CSS预处理器SASS和COMPASS mixins.

Sass是CSS3的扩展,它添加了嵌套规则,变量,mixins,选择器继承等等.Sass生成格式良好的CSS,使您的样式表更易于组织和维护.

Compass允许扩展Sass,它充满了可重复使用的模式,它允许基于最佳实践以简单和标准的方式使用精灵,CSS3和typhography.

最后,我建议你阅读Paul Irish的一篇文章,他是谷歌最好的前端开发者之一:http://paulirish.com/2012/vendor-prefixes-are-not-developer-friendly/