PostCSS 和 cssnext

2019-09-10 郑州网站建设  

PostCSS 是使用 javascript 插件转换 CSS 的后处理器。PostCSS 本身不会对你的 CSS 做任何事情,你需要安装一些 plugins 才能开始工作。这不仅使其模块化,同时功能加强。

cssnext 是一个 CSS transpiler,允许你使用*新的 CSS 语法。cssnext 把新 CSS 规范转换成兼容性更强的 CSS,所以不需要等待各种浏览器的支持。

PostCSS 的工作原理就是解析 CSS 并将其转换成一个 CSS 的节点数,这可以通过 javascript 来控制,然后返回修改后的树并保存。它与 Sass(预处理器)的工作原理不同,你基本上是用一种不同的语言来编译 CSS。

CSS 的未来:PostCSS 和 cssnext

预处理和后处理的区别

为了简单的方式解释预处理和后处理的不同,这里以单位转换为例。当书写 Sass 时,我们可以用函数px转换成rem:

/* input */

.selector { margin-bottom: rem(20px); }

/* output, assuming base font size is 1rem */

.selector { margin-bottom: 1.25rem; }

这种方式节省了我们手工计算的时间。不过通过 PostCSS,我们能够做的更好。因为是后处理的缘故,我们不需要任何函数来编译 CSS。我们可以直接书写px,它可以自动地转换成rem。

/* input */

.selector { margin-bottom: 20px; }

/* output, assuming base font size is 1rem */

.selector { margin-bottom: 1.25rem; }

PostCSS 会在每一个px值出现并运行计算之前处理声明,将其转换成rem的值。

cssnext 新特性

cssnext 包含了大量的新特性:

自动提供浏览器前缀支持

自定义属性与 var() 支持

自定义属性集合与 @apply 支持

简化的、更安全的 calc()

可自定义的媒体查询

媒体查询范围

自定义选择器

嵌套

image-set()

color()

hwb()

gray()

rrggbbaa 色彩

rgba() 的降级方法

rebeccapurple 色彩

font-variant 属性

filter 属性

inital 值

rem 单位的降级方法

:any-link 伪类

:mathces 伪类

:not 伪类

:: 伪元素语法的降级方法

overflow-wrap 属性的降级方法

不区分大小写的属性

功能增强的 rga()

功能增强的 hsl()

sysem-ui 字体

自动提供浏览器前缀支持

自动添加(以及删除过时/没用的前缀),由 autoprefixer 实现

自定义属性与 var() 支持

自定义属性的当前转换旨在提供一种限定在:root选择器中、面向未来的、由原生 CSS 自定义属性提供的新特性。

使用特性:

:root {

--mainColor: red;

}

a {

color: var(--mainColor);

}

自定义属性集合与 @apply 支持

允许你在已命名的自定义属性中存储一套变量,然后在其他类型规则中引用它。

:root {

--danger-theme: {

color: white;

background-color: red;

};

}

.danger {

@apply --danger-theme;

}

简化的、更安全的 calc()

使用优化预分析 var() 引用来允许你更安全的用 calc() 使用自定义变量

:root {

--fontSize: 1rem;

}

h1 {

font-size: calc(var(--fontSize) * 2);

}

可自定义的媒体查询

一个更好的办法来实现语义化的媒体查询

@custom-media --small-viewport (max-width: 30em);

/* check out media queries ranges for a better syntax !*/

@media (--small-viewport) {

/* styles for small viewport */

}

媒体查询范围

允许用 <= 和 >=来取代min和max

@media (width >= 500px) and (width <= 1200px) {

/* your styles */

}

/* or coupled with custom media queries */

@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

@media (--only-medium-screen) {

/* your styles */

}

自定义选择器

允许你创造自己的选择器

@custom-selector :--button button, .button;

@custom-selector :--enter :hover, :focus;

:--button {

/* styles for your buttons */

}

:--button:--enter {

/*

hover/focus styles for your button

Read more about :enter proposal

*/

}

嵌套

允许你使用嵌套选择器

a {

/* direct nesting (& MUST be the first part of selector)*/

& span {

color: white;

}

/* @nest rule (for complex nesting) */

@nest span & {

color: blue;

}

/* media query automatic nesting */

@media (min-width: 30em) {

color: yellow;

}

}

image-set() 函数

允许你根据不同的用户设备来提供不同的图片解决方法

.foo {

background-image: image-set(url(img/test.png) 1x,

url(img/test-2x.png) 2x,

url(my-img-print.png) 600dpi);

}

color() 函数

一个色彩函数来修改色彩

a {

color: color(red alpha(-10%));

}

a:hover {

color: color(red blackness(80%));

}

hwb() 函数

与 hs1() 相似,不过更容易阅读

body {

color: hwb(90, 0%, 0%, 0.5);

}

gray() 函数

允许你使用超过50种渐变的灰度值,对于*个参数,你可以使用 0 - 255 的数值或者百分比。

.foo {

color: gray(85);

}

.bar {

color: gray(10%, 50%);

}

rrggbbaa 色彩值

允许使用4位或者8位十六进制数来表示色彩

body {

background: #9d9c;

}

rgba() 的降级方法

如果你使用的是旧的浏览器(比如 IE8),那么把 rgba() 转换为实体色彩

body {

background: rgba(153, 221, 153, 0.8);

/* you will have the same value without alpha as a fallback */

}

rebeccapurple 色彩

允许你使用新的色彩Keywords

body {

background: rgba(153, 221, 153, 0.8);

/* you will have the same value without alpha as a fallback */

}

font-variant 属性

通过 font-feature-settings降级的一种属性。你可以通过这个链接来查看浏览器支持

h2 {

font-variant-caps: small-caps;

}

table {

font-variant-numeric: lining-nums;

}

filter 属性

W3C 的 filters 只允许使用url(data:*)来转换 svg filter。

.blur {

filter: blur(4px);

}

inital 值

允许你使用怎么值的初始值。该值表示属性初始化值所指定的值,但这并不意味着浏览器的默认值。

比如,对于display属性,initial 时钟标示内联,因为这是属性指定的初始值。一个例子,div { display: initial }并不代表block,而是inline。

div {

display: initial; /* inline */

}

rem 单位

在旧浏览器里将 rem 降级为 px(比如IE8)

h1 {

font-size: 1.5rem;

}

:any-link 伪类

允许你使用:any-link伪类

nav :any-link {

background-color: yellow;

}

:matches 伪类

允许你使用:matches伪类

p:matches(:first-child, .special) {

color: red;

}

:not 伪类

允许你使用支持*多选择器的:not伪类,将此降级为只选择一个选择器的:not

p:not(:first-child, .special) {

color: red;

}

:: 伪元素语法降级

如果你的浏览器是旧浏览器,会将 :: 降级为:。

a::before {

/* ... */

}

overflow-wrap 属性

将overflow-wrap转换为word-wrap属性

body {

overflow-wrap: break-word;

}

不区分大小写的属性

允许你使用不区分大小写的属性

[frame=hsides i] {

border-style: solid none;

}

功能增强的 rga()

允许你使用由空格分割的参数与可选的由斜线分割的不透明度新语法。

你也可以使用数字来表示色彩通道。

alpha 值接受百分比和数字,并且将 rgb() 作为可选参数。因此 rgb() 和 rgba() 现在是彼此的别名。

div {

background-color: rgb(100 222.2 100.9 / 30%);

}

功能增强的 hs1()

允许你使用由空格分割的参数与可选的由斜线分割的不透明度新语法。

hsl() 现在接受角度(deg, grad, rad, turn)以及用数字表示色调,用百分比或者数字来表示 alpha 值。所以 hsl() 与 hsla() 现在也是彼此的别名。

div {

color: hsl(90deg 90% 70%);

background-color: hsl(300grad 25% 15% / 70%);

}

system-ui 字体

允许你使用 system-ui 通用字体系列。当前转换提供了一个实际的字体列表来作为降级方法。

body {

font-family: system-ui;

}

使用 cssnext 书写未来的 CSS

cssnext 是一个 PostCSS 的包,我们可以在样式表中利用 cssnext 额外增加一些 CSS 规范。

/* custom properties */

:root {

--heading-color: #ff0000;

}

/* custom selectors */

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

/* usage */

:--headings {

color: var(--heading-color);

}

通过 cssnext,上述代码会被处理成以下内容

h1,

h2,

h3,

h4,

h5,

h6 {

color: #ff0000;

}


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1829.html转载请标明出处,谢谢合作!
标签:
  • 使用
  • PostCSS
  • cssnext
  • javascri