PostCSS 中文网

使用 JavaScript 转换 CSS 的工具

提高代码可读性

使用 Can I Use 中的值将浏览器前缀添加到 CSS 规则中。 Autoprefixer 将使用基于当前浏览器流行度和属性支持的数据来为你应用前缀。

:fullscreen {
}
CSS input
:-webkit-full-screen {
}
:-ms-fullscreen {
}
:fullscreen {
}
CSS output

现在就使用未来的 CSS！

PostCSS Preset Env，可让你将现代 CSS 转换为大多数浏览器可以理解的内容，并使用 cssdb 根据你的目标浏览器或运行时环境确定所需的 polyfill。

body {
  color: oklch(61% 0.2 29);
}
CSS input
body {
  color: rgb(225, 65, 52);
}
CSS output

终结全局 CSS

CSS 模块意味着你永远不需要担心你的名称太通用，只需使用最有意义的名称即可。

.name {
  color: gray;
}
CSS input
.Logo__name__SVK0g {
  color: gray;
}
CSS output

避免 CSS 中出现错误

使用 stylelint（一种现代 CSS 代码检查器）强制执行一致的约定并避免样式表中的错误。 它支持最新的 CSS 语法，以及类似 CSS 的语法，例如 SCSS。

a {
  color: #d3;
}
CSS input
app.css
2:10 Invalid hex color
Console output