Question

I've heard of preprocessors, post processors, LESS, SASS, SESSPOOL and others. What do I need to make my CSS work better across all browsers? Should I use multiple libraries?

Here is an example code:

<div id="myDiv">some content</div>

CSS:

#myDiv {
    border-radius: 8px;
}

Answer 1

关于预处理器：

当谈到预处理器所有时，它们会被编译回常规的旧CSS。

前缀：

当你使用一些最新的CSS3属性时，如果你不确定它是否支持总是检查，前缀就会起作用。

支持哪些前缀需要什么？

以下是一些链接，可以告诉您最新CSS3属性需要哪些前缀。

What CSS should I Prefix?

CSS3浏览器支持的完整列表：CSS3 Browser Support Reference

我懒得加上我的前缀！

您可以在浏览器中使用http://pleeease.io/play/为您添加前缀，最适合小型项目。

对于更大的项目，使用Autoprefixer等工具与Gulp＆amp;等任务管理员更实用。咕噜。这样你可以直接从你的CSS前缀CSS！

Answer 2

您可以按照以下步骤使您的css规则与各种浏览器兼容。

使用此链接检查各种浏览器是否支持您正在使用的css规则http://caniuse.com/#search=border-radius
使用此链接http://pleeease.io/play/

正如你提到的LESS，SASS预处理器，有用于编写css的脚本，它将帮助你编写一个可重用的代码（即mixins），当你编译这些less或sass脚本时，你会获得格式良好的CSS文件。

上述前两个步骤可以解决您的问题。如果你在使用LESS或SASS编写脚本时使用这两个步骤，那么你最终会得到精心设计的CSS，并且还会提高你的工作效率。

Answer 3

您需要使用供应商前缀。

Typically the vendors use these prefixes:

-webkit- (Chrome, newer versions of Opera.)
-moz- (Firefox)
-o- (Old versions of Opera)
-ms- (Internet Explorer)
Vendors also use prefixes on API. On interfaces, they typically use:

Webkit (Chrome, newer versions of Opera.)
Moz (Firefox)
O (Old versions of Opera)
MS (Internet Explorer)
On properties and methods, they typically use:

webkit (Chrome, newer versions of Opera.)
moz (Firefox)
o(Old versions of Opera)
ms (Internet Explorer)

来源：https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

What should I use to make sure my CSS works with all browsers?

3 个答案: