Skip to main content

后处理 CSS

此项目设置会压缩你的 CSS 并通过 Autoprefixer 自动为其添加浏览器前缀,因此你无需担心。

¥This project setup minifies your CSS and adds vendor prefixes to it automatically through Autoprefixer so you don’t need to worry about it.

all 属性break 属性自定义属性媒体查询范围 等新 CSS 功能的支持会自动填充以添加对旧浏览器的支持。

¥Support for new CSS features like the all property, break properties, custom properties, and media query ranges are automatically polyfilled to add support for older browsers.

你可以根据 浏览器列表规范 调整 package.json 中的 browserslist 键来自定义你的目标支持浏览器。

¥You can customize your target support browsers by adjusting the browserslist key in package.json according to the Browserslist specification.

例如,这个:

¥For example, this:

.App {
display: flex;
flex-direction: row;
align-items: center;
}

变成这样:

¥becomes this:

.App {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

如果你出于某种原因需要禁用自动前缀,请遵循这个章节

¥If you need to disable autoprefixing for some reason, follow this section.

默认情况下禁用 CSS 网格布局 前缀,但它不会删除手动前缀。如果你想选择加入 CSS 网格前缀,首先熟悉它的局限性

¥CSS Grid Layout prefixing is disabled by default, but it will not strip manual prefixing. If you'd like to opt-in to CSS Grid prefixing, first familiarize yourself about its limitations.

要启用 CSS 网格前缀,请将 /* autoprefixer grid: autoplace */ 添加到 CSS 文件的顶部。

¥To enable CSS Grid prefixing, add /* autoprefixer grid: autoplace */ to the top of your CSS file.