从 PostCSS 与 cssnext 中看 CSS 的新特性
今天刚好看了一下 PostCSS，看到了 postcss-cssnext 的网站，觉得用来学习一些新特性（虽然现在来看似乎不怎么新）。
先来介绍一下 PostCSS 与 Sass / Less / Stylus 相比的区别，也就是后处理器和预处理器的区别。
预处理器与后处理器
对于预处理器（Sass / Less / Stylus）而言，就像 JavaScript 的方言语法 coffeescript，或者 HTML 的方言语法 pug(jade) 那样，你需要学习一套新的不同的语法，这些 CSS 方言通过编译器编译成 CSS 文件，最终浏览器实现解析。
而 PostCSS 可以让你无缝迁移到现代化的 CSS 中，本身并没有任何功能，只由 postcss 的 plugin 来实现相关的功能，也就是说，等到浏览器实现了，你随时可以去掉这个插件，由原生浏览器来解析，而预处理器则是全家桶。
postcss-cssnext
cssnext 提供了一些最新的 CSS 语法支持，让你不用担心于浏览器是否支持这些特性，因此，配合 postcss 实用，就取得了最佳的效果。
特性列表
- 自动提供浏览器前缀支持
- 自定义属性与
var()支持 - 自定义属性集合与
@apply支持 - 简化的、更安全的
calc() - 可自定义的媒体查询
- 媒体查询范围
- 自定义选择器
- 嵌套
image-set()color()hwb()gray()#rrggbbaa颜色rgba()的降级方案rebeccapurple颜色font-variant属性filter属性initial值rem单位的降级方案:any-link伪类:mathces伪类:not伪类::伪元素语法的降级方案overflow-wrap属性的降级方案- 不区分大小写的属性
- 功能增强的
rga() - 功能增强的
hsl() system-ui字体
功能介绍
说了这么多，然而我们还是不知道，这些功能到底是用来干嘛的，所以凑合翻译一下……
自动提供浏览器前缀支持
自动添加（以及删除过时 / 没用的前缀），由 autoprefixer 实现。
自定义属性与 var() 支持
自定义属性的当前转换旨在提供一种限定在 :root 选择器中、面向未来的、由原生 CSS 自定义属性提供的新特性。
使用特性：
1:root {
2 --mainColor: red;
3}
4
5a {
6 color: var(--mainColor);
7}
8
注：仅限 :root 选择器来定义变量。
自定义属性集合与 @apply 支持
允许你在已命名的自定义属性中存储一套变量，然后在其他类型规则中引用它。
1:root {
2 --danger-theme: {
3 color: white;
4 background-color: red;
5 };
6}
7
8.danger {
9 @apply --danger-theme;
10}
11
注：仅限 :root 选择器来定义变量。
简化的、更安全的 calc()
使用优化预分析 var() 引用来允许你更安全的用 calc() 使用自定义变量。
1:root {
2 --fontSize: 1rem;
3}
4
5h1 {
6 font-size: calc(var(--fontSize) * 2);
7}
8
可自定义的媒体查询
一个更好的方法来实现语义化的媒体查询。
1@custom-media --small-viewport (max-width: 30em);
2/* check out media queries ranges for a better syntax !*/
3
4@media (--small-viewport) {
5 /* styles for small viewport */
6}
7
媒体查询范围
允许用 <= 和 >= 来取代 min 和 max（使得语法更具有可读性）。
1@media (width >= 500px) and (width <= 1200px) {
2 /* your styles */
3}
4
5/* or coupled with custom media queries */
6@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
7
8@media (--only-medium-screen) {
9 /* your styles */
10}
11
自定义选择器
允许你创造自己的选择器
1@custom-selector :--button button, .button;
2@custom-selector :--enter :hover, :focus;
3
4:--button {
5 /* styles for your buttons */
6}
7:--button:--enter {
8 /*
9 hover/focus styles for your button
10
11 Read more about :enter proposal
12 http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877
13 */
14}
15
嵌套
允许你使用嵌套选择器。
1a {
2 /* direct nesting (& MUST be the first part of selector)*/
3 & span {
4 color: white;
5 }
6
7 /* @nest rule (for complex nesting) */
8 @nest span & {
9 color: blue;
10 }
11
12 /* media query automatic nesting */
13 @media (min-width: 30em) {
14 color: yellow;
15 }
16}
17
image-set() 函数
允许你根据不同的用户设备来提供不同的图片解决方案。
1.foo {
2 background-image: image-set(url(img/test.png) 1x,
3 url(img/test-2x.png) 2x,
4 url(my-img-print.png) 600dpi);
5}
6
color() 函数
一个颜色函数来修改颜色（转换为 rgba()）
1a {
2 color: color(red alpha(-10%));
3}
4
5a:hover {
6color: color(red blackness(80%));
7}
8
有很多颜色修饰符，记得看看这个链接
hwb() 函数
与 hsl() 相似，不过更容易阅读。（会转换为 rgba()）
1body {
2 color: hwb(90, 0%, 0%, 0.5);
3}
4
gray() 函数
允许你使用超过 50 种渐变的灰度值（转换为 rgba()），对于第一个参数，你可以使用一个 0 - 255 的数值或者百分比。
1.foo {
2 color: gray(85);
3}
4
5.bar {
6 color: gray(10%, 50%);
7}
8
#rrggbbaa 颜色值
允许使用 4 位或者 8 位十六进制数来表示颜色（转换为 rgba()）
1body {
2 background: #9d9c;
3}
4
rgba() 的降级方案
如果你使用的是旧的浏览器（比如 IE8），那么把 rgba() 转换为实体颜色。
1body {
2 background: rgba(153, 221, 153, 0.8);
3 /* you will have the same value without alpha as a fallback */
4}
5
rebeccapurple 颜色
允许你使用新的颜色关键词。
1body {
2 color: rebeccapurple;
3}
4
font-variant 属性
通过 font-feature-settings 降级的一种属性。你可以通过这个链接来查看浏览器支持
1h2 {
2 font-variant-caps: small-caps;
3}
4
5table {
6 font-variant-numeric: lining-nums;
7}
8
filter 属性
W3C 的 filters 只允许使用 url(data:*) 来转换 svg filter。
1.blur {
2 filter: blur(4px);
3}
4
initial 值
允许你使用任何值的初始值。该值表示属性初始化值所指定的值，但这并不意味着浏览器的默认值。
比如，对于 display 属性，initial 时钟标示内联，因为这是属性指定的初始值。一个例子，div { display: initial } 并不代表 block，而是 inline。
1div {
2 display: initial; /* inline */
3}
4
杀手级特性：一次性初始化所有属性
1div {
2 all: initial; /* use initial for ALL PROPERTIES in one shot */
3}
4
rem 单位
在旧浏览器里将 rem 降级为 px（比如 IE8）。
1h1 {
2 font-size: 1.5rem;
3}
4
:any-link 伪类
允许你使用 :any-link 伪类。(只要有 :link 或者 :visited 都在 :any-link 的范围内）
1nav :any-link {
2 background-color: yellow;
3}
4
:matches 伪类
允许你使用 :matches 伪类（可以看作 or 选择）
1p:matches(:first-child, .special) {
2 color: red;
3}
4
:not 伪类
允许你使用支持多选择器的 :not 伪类，将此降级为只支持一个选择器的 :not。
1p:not(:first-child, .special) {
2 color: red;
3}
4
:: 伪元素语法降级
如果你的浏览器是旧浏览器，会将 :: 降级为 :。
1a::before {
2 /* ... */
3}
4
overflow-wrap 属性
将 overflow-wrap 转换为 word-wrap 属性（考虑到许多浏览器只支持 word-wrap）。
1body {
2overflow-wrap: break-word;
3}
4
不区分大小写的属性
允许你使用不区分大小写的属性。
1[frame=hsides i] {
2 border-style: solid none;
3}
4
功能增强的 rga()
允许你使用由空格分割的参数与可选的由斜线分割的不透明度新语法。
你也可以使用数字来表示颜色通道。
alpha 值接受百分比和数字，并且将 rgb() 作为可选参数。因此 rgb() 和 rgba() 现在是彼此的别名。
1div {
2 background-color: rgb(100 222.2 100.9 / 30%);
3}
4
功能增强的 hsl()
允许你使用由空格分割的参数与可选的由斜线分割的不透明度新语法。
hsl() 现在接受角度（deg, grad, rad, turn）以及用数字表示色调，用百分比或者数字来表示 alpha 值。所以 hsl() 与 hsla() 现在也是彼此的别名。
1div {
2 color: hsl(90deg 90% 70%);
3 background-color: hsl(300grad 25% 15% / 70%);
4}
5
system-ui 字体
允许你使用 system-ui 通用字体系列。当前转换提供了一个实际的字体列表来作为降级方案。
1body {
2 font-family: system-ui;
3}
4
写在最后
今天的博客好长，虽然我也知道翻译的很垃圾 T^T。通过这个列表，我们也能理解和阅读到一些新的特性了。
评论 (0)