没有 webkit 和 moz 前缀的 CSS3
Posted
技术标签:
【中文标题】没有 webkit 和 moz 前缀的 CSS3【英文标题】:CSS3 without webkit and moz prefix 【发布时间】:2012-12-31 16:45:44 【问题描述】:是否有插件或类似的东西可以让我像这样编写 CSS:
transition:all 300ms;
box-shadow:0 3px 2px #222;
backface-visibility:hidden;
等等。
对于需要-webkit-
、-moz-
、-ms-
、-o-
等的浏览器版本,在加载样式表时会自动添加到需要的位置。
【问题讨论】:
好吧,关于插件的IDK,但你的手不能再输入几个字符? @AspiringAqib 这是关于保持 css DRY 的。供应商前缀对此不利,因为您必须为每个需要的语句重复 5 次。当您使用关键帧时,情况会更糟,因为您必须重复整个块。使用前缀,样式表最终会比所需的大 5 倍。 【参考方案1】:是的,-prefix-free 允许您在任何地方只使用无前缀的 CSS 属性。它在幕后工作,仅在需要时将当前浏览器的前缀添加到任何 CSS 代码中。 Project's website
特点
处理或元素中的每个样式表,并在需要时添加供应商前缀 处理具有样式属性的元素并在需要时添加供应商前缀 处理新元素或元素、样式属性更改和 CSSOM 更改(需要插件) 让 jQuery 的 .css() 方法获取和设置无前缀属性(需要插件)限制
不支持在 @import-ed 文件中添加前缀代码 不支持为跨域链接样式表添加前缀,除非它们启用了 CORS 未加前缀的链接样式表在 Chrome 和 Opera 中无法本地工作。不过,您可以自行更改。 内联样式中的无前缀值(在样式属性中)在 IE 和 Firefox如何使用
只需在页面的任何位置包含 prefixfree.js。建议放在样式表之后,尽量减少 FOUC
就是这样,大功告成!
浏览器支持
目标浏览器支持IE9+、Opera 10+、Firefox 3.5+、Safari 4+和桌面版 Chrome 和 Mobile Safari、Android 浏览器、移动版 Chrome 和 Opera Mobile。
前缀mycss
此外,还有一项在线服务,可让您粘贴不带前缀的 css 代码并返回带有所有供应商前缀的 css。 http://prefixmycss.com/
CSS3请
css3please.com:一个跨浏览器的 css3 规则生成器,由 Jonathan Neal 和 Paul Irish 制作。除了同步和规范化必要属性的更改外,它还通过 IE 过滤器潜入 IE 对一些功能的支持。
SASS 和指南针
另一种方法是将 CSS 预处理器 SASS 与 COMPASS 混合使用。
Sass 是 CSS3 的扩展,它添加了嵌套规则、变量、mixin、选择器继承等。 Sass 生成格式良好的 CSS 并使您的样式表更易于组织和维护。
Compass 允许扩展 Sass,它充满了可重用的模式,它允许基于最佳实践以简单和标准的方式使用 sprite、CSS3 和排版。
最后,我建议您阅读 Paul Irish 的一篇文章,他是 Google 最优秀的前端开发人员之一:http://paulirish.com/2012/vendor-prefixes-are-not-developer-friendly/
【讨论】:
我的答案逐渐增加了更多内容,所以一定要通读。以上是关于没有 webkit 和 moz 前缀的 CSS3的主要内容,如果未能解决你的问题,请参考以下文章