Die Zukunft von CSS

Vorwort

Wenn Sie sich für CSS-Präprozessoren interessieren, dann könnte dieser Artikel für Sie geeignet sein.

Als ich zum ersten Mal etwas über CSS-Präprozessoren erfuhr, verstand ich eigentlich nicht ganz, warum ich so etwas verwenden musste, aber dann wurde mir eines klar: Alles dient der Wartbarkeit. Zum Beispiel hat das Bild unten

einen kleinen Abstand von links, und der von anderen Elementen festgelegte Abstand ist oft derselbe, aber wenn wir keinen Präprozessor verwenden , vielleicht werden wir so sein. Schreiben Sie

CSS

.box{
padding:12px;
}
.footer{
padding:12px;
}
....{
padding:12px;
}

Aber das Problem dabei ist, dass wenn Sie müssen den gesamten Abstand ändern. Oh, das bringt viel unnötige Arbeit mit sich. Es wäre einfacher, wenn Sie einen Präprozessor verwenden, da Sie mit dem Präprozessor eine globale Variable definieren können Wenn nötig, referenzieren Sie diese globale Variable. Gehen Sie davon aus, dass der Code wie folgt lautet:

var pad = 12px;
.box{
padding:pad;
}
.footer{
padding:pad;
}

Mit anderen Worten, ein großer Teil des Präprozessors besteht darin, das Wartbarkeitsproblem zu lösen. In diesem Kapitel wird der Postprozessor erläutert.

Was ist also der Unterschied zwischen einem Postprozessor und einem Präprozessor?

Sie können es so verstehen: Ein Postprozessor ist wie eine dynamische Sprache und ein Präprozessor ist wie eine statische Sprache. Der Präprozessor kompiliert die Ergebnisse vorab, der Postprozessor ist jedoch anders, der Wert wird zur Laufzeit ermittelt.

Die Zukunft von CSS

In Zukunft wird CSS mehr Attribute und Funktionen unterstützen, einschließlich Variablen, Verschachtelung, Wertberechnung usw. Wir werden sie in diesem Kapitel erklären.

Hinweis: Da die meisten Inhalte in diesem Abschnitt die Unterstützung zukünftiger CSS-Versionen erfordern, verfügt Ihr Browser möglicherweise nicht unbedingt über diese Wirkung. Es gibt jedoch ein Plug-in (cssnext), das dieses Problem lösen kann Informationen zur Verwendung dieses Plug-Ins finden Sie im letzten Abschnitt dieses Abschnitts.

CSS-Variablen

1. Grundlegende Verwendung von Variablen

Unter diesen neuen Funktionen werden CSS-Variablennamen durch benutzerdefinierte Attribute bestimmt (zu implementieren). Globale Variablen müssen in

oder

oder in der

-Pseudoklasse deklariert werden) und benutzerdefinierte Attribute müssen mit html beginnen und über body aufgerufen werden. Wie folgt: :root--var()CSS

Der Effekt ist in Abbildung 13.11 dargestellt

:root{
  --colorRed:red;
  --size:16px;
  --h:35px;
  --l-h:35px;
}
 
a{
  display:block;
  height:var(--h);
  line-height:var(--l-h);
  color:var(--colorRed);
  font-size:var(--size);
  outline:1px solid #666;
}

13.11 Variablen

Oben haben wir mehrere Variablen global über

definiert und diese Variablen dann über die Funktion

im a-Element verwendet.

:rootEs ist zu beachten, dass bei diesen Variablen die Groß-/Kleinschreibung beachtet wird, zum Beispiel: var und

sind zwei verschiedene Variablen.

--colorDarüber hinaus können diese Variablen auch vererbt werden, wie unten gezeigt: --Color

CSS

Der Effekt ist wie in Abbildung 13.12 dargestellt

CSS-Variablen

:root{
  --color-red:red;
}
.box{
  color:var(--color-red);
}

Abbildung 13.12 Vererbung

Diese Variablen sind ebenfalls kaskadierend, wie in diesem Code gezeigt:

Wie im obigen Absatz deklarieren wir ein global und deklarieren es erneut in

:root{
  --head-color:red;
}
.box{
  --head-color:blue;
}
.box p{
  color:var(--head-color);
}

, dann verwendet es schließlich das in seinem übergeordneten Element definierte

, basierend auf dem Proximity-Prinzip, dem Der Effekt ist wie in Abbildung 13.13 dargestellt --head-color .box--head-color

Abbildung 13.13 Variablen sind ebenfalls kaskadierend

Es sollte jedoch beachtet werden, dass dies bei diesen Variablen nicht der Fall ist Unterstützung

, was bedeutet, dass die Einstellung dasselbe ist wie keine Einstellung, sie ist überhaupt nutzlos, wie folgt:

!importantCSS

Der Effekt ist wie in Abbildung 13.14 gezeigt

CSS-Variable

:root{
  --head-color:red !important;
}
.box{
  color:var(--head-color);
}
.box{
  color:blue;
}

Abbildung 13.14 Variablen unterstützen !important nicht

Siehe, obwohl wir

auf < gesetzt haben 🎜>, wenn es normal ist, sollte es wie folgt aussehen:

--head-colorCSS!important

Der Effekt ist wie folgt dargestellt in Abbildung 13.15

.box{
  color:red !important;
}
.box{
  color:blue;
}

Abbildung 13.15 Wenn möglich, sollte es so aussehen

Diese

-Funktion unterstützt auch eine sehr Leistungsstarke Funktion, mit der Sie einen Standardparameter übergeben können. Der Standardwert wird wie folgt verwendet, wenn die Variable nicht vorhanden ist:

CSS

:root{
  /*--head-color:red;*/
}
.box{
  color:var(--head-color,orange);
}

以上我们在var中使用了一个默认的值，当--head-color不存在就会使用orange，效果如图13.16

图13.16 使用默认值

2.CSS变量的意义

如果你使用过一些编程语言，你不会忘记变量是多么的重要，如在Javascript中，我们经常会写这样一段代码：

JavaScript

var oBox = document.getElementById('box');
oBox.style.width = '100px';
oBox.style.height = '100px';
oBox.style.backgroundColor = 'red';

在这段代码中我们通过oBox变量来引用.box元素，在下次的使用中就不需要重新去获取这个元素了，这样给我们带来了很大的便利。在CSS中变量也同样重要，不然你让Less、Sass等预处理情何以堪，正是因为它们支持在CSS中像编程语言一样编程，所以在之前的很长一段时间里它们是那样的让人着迷。在CSS中合理的使用变量，可以减轻不少的工作，以及可维护性。比如一个网站的主调色，它们基本都是固定的，那么我们完全可以使用变量来储存它们，另外一点就是当网站改版时，如果网站主调色改变时我们只需要改变相应的变量即可，这或许就是变量的最大好处吧。从另一个角度来讲使用变量的另一个好处就是，具有一致性，比如页面中所有元素的字体大小都是引用的同一个变量，那么当我们改变这个变量时，其他元素的字体大小都会相应的改变，我们来看一下，下面这段代码：

CSS

:root{
  --main-size:12px;
}
.box{
  font-size:var(--main-size);
}
.box2{
  font-size:var(--main-size);
}
.box3{
  font-size:var(--main-size);
}
 
@media screen and (min-width:600px){
  :root{
    --main-size:16px;
  }
}

以上当屏幕宽度大于600px时，这三个元素都会相应的改变字体大小，使用这个可以和rem媲美。也许你还想给其中一个元素单独指定一个比--main-size大一点的字体，那我们可以结合使用calc函数，如下:

CSS

:root{
  --main-size:12px;
}
.box{
  font-size:var(--main-size);
}
.box2{
  font-size:calc(var(--main-size) + 2px);
}
.box3{
  font-size:var(--main-size);
}

效果如图13.17

图13.17 单独设置某个样式

calc允许你使用计算功能，不过需要注意的是中间需要一个空格。

虽然以上只是几个很简单的例子，但这些也足以说明CSS变量是多么的重要，在以后的CSS写作中不要忘了使用它。

应用规则集(@apply)

我想你如果体验过组件化，那么你对@apply肯定会爱不释手，简单来说@apply可以实现更小的组合。如下：

CSS

:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

在以上我们定义了一个用来实现当元素溢出时隐藏文字的代码段--overflow-ellipsis，当我们需要时只需要通过@apply来引用即可，真的是很实用的一个功能，不由想起来了Javascript中的函数。

如果某段代码是重复的，你不妨试试@apply。

未来的媒体查询

1.自定义媒体查询

使用自定义的媒体查询使之更加语义化，使用如下：

CSS

@custom-media --big-viewport (max-width:1100px);
 
@media (--big-viewport) {
  body{
    background-color:red;
  }
}

通过@custom-media来设置一个媒体规则。感觉没什么用？好吧，来看下一个功能。

2.限制媒体查询范围

以前如果我们想实现一个限制媒体查询的范围也许是这样的：

CSS

@media (min-width: 320px) and (max-width: 640px) {
  body{
    background-color:red;
  }
}

以上我们限制屏幕的宽在320到640之间时让页面背景变成红色，但现在我们可以这样：

CSS

@media (width >= 320px) and (width <= 640px) {
  body{
    background-color:red;
  }
}

是不是更加一目了然了，当然它还可以结合@custom-media来使用，如下：

CSS

@custom-media --noly-mobile (width >= 320px) and (width <= 640px);
 
@media (--noly-mobile) {
  body{
    background-color:red;
  }
}

自定义选择器

想过自己来定义选择器吗，接下来我们就来实现一个，如下：

CSS

@custom-selector :--title h2,h3;
 
.main :--title{
  font-size:18px;
  font-weight:normal;
}

自定义选择器通过@custom-selector来定义，后面跟随一个:--接着是自定义选择器的名称，后面是你需要定义的选择器，多个用逗号隔开，如果你不理解的话，可以看下面这段代码，以上和下面这段代码效果是一样的。

CSS

.main h2,
.main h3{
  font-size:18px;
  font-weight:normal;
}

要说，上面这两段代码的区别，可能就是自定义选择器更加灵活以及方便吧。

选择器嵌套

选择器嵌套是我非常喜欢的一个功能，话说当初我使用预处理器就是因为它有这个功能，小二来一段不加盐的代码

CSS

p {
  & h2 {
    font-size:16px;
    &.title{
      color:red;
    }
    & span{
      color:pink;
    }
  }
}

它的效果和下面这段代码一样：

CSS

p h2 {
    font-size: 16px
}
p h2.title {
    color: red
}
p h2 span {
    color: pink
}

有没有一种再也不想用预处理器的冲动，另外对于媒体查询我们不需要用&来引用，直接在大括号中使用即可，如下：

CSS

p {
  @media (max-width:1100px) {
    background-color:red;
  }
}

效果和下面这段代码一样：

CSS

@media (max-width:1100px) {
    p {
        background-color: red
    }
}

它还支持比较复杂的嵌套（规则嵌套），如下这段：

CSS

a{
  @nest p &{
    color:red;
  }
}

规则嵌套需要使用关键字@nest，效果和下面这段一样：

CSS

p a{
    color: red
}

颜色函数通过color使用，如下：
颜色函数

CSS

body{
  background-color:color(pink a(30%));
}

这段代码的意思是说给body添加了一个背景为pink的颜色并且透明度为30%，和下面这段代码一样：

CSS

body{
  background-color:rgba(255, 192, 203, 0.3);
}

当然你也可以使用其它的颜色表示法，如:

CSS

body{
  background-color:color(#666 a(30%));
}

这个还是比较方便的。

更多这方面的功能可以到https://drafts.csswg.org/css-color/#modifying-colors中查看。

初始值

我们知道一个p默认是块元素，那么如果你不想它默认变成块元素可以通过initial将它设置成初始值。如下：

CSS

p {
  display: initial;
}

我才是真正的DIV，T_T
我才是真正的DIV，T_T

效果如图13.18所示

图13.18 初始值

这里它之所以在一排了，是因为display的初始值就是inline，而为什么不将p的display设置成initial它默认是block是因为浏览器给p设置了默认样式，也就是说initial可以去掉浏览器默认样式。

如果你想去掉一个元素中的所有浏览器默认样式，可以这样：

CSS

p{
  all:initial;
}

但不是特别建议你这样，最好还是根据需求来。

cssnext插件使用

cssnext插件允许你在CSS中写未来版本的CSS，它会将这些代码转换成浏览器兼容的代码，不过要使用cssnext我们还得下载一个postcss，那么postcss是什么呢？官方是这样说的：

使用JavaScript来转换CSS的工具

这里并不想详细的讲解postcss是什么，更多关于postcss的说明可以到http://postcss.org/官网查看，接下来我们来安装一下postcss

1. 安装postcss-cli

npm install postcss-cli -g

2.

npm install postcss postcss-cssnext -g

下载完以后，我们接着下载cssnext如下：

为了方便我们这里使用的是命令行工具，如果想在命令行工具中使用postcss需要下载postcss-cli，这里我们是通过npm来下载的，npm是一个包管理工具，这里不做讲解，如果你不知道npm是什么，我想，你应该是前端新人，建议如果遇到不懂的通过搜索引擎来搜索。npm官网https://www.npmjs.com/

这些都成功安装完以后我们就可以开始使用它了，如下：

postcss styles.css -u postcss-cssnext -d dist

效果如图13.19所示

图13.19 输入这段代码

以上这段代码的意思是用postcss-cssnext这个插件将styles.css里面的代码转换成兼容的代码，-d表示要输出到哪个目录，-w可以用来监听文件的变化，当文件变化时会自动输出文件，如下：

postcss styles.css -u postcss-cssnext -w -d dist

具体效果如下：

源代码：

CSS

:root{
  --main-color:red;
}
p{
  display:flex;
}
span{
  color:var(--main-color);
}

转换后的代码：

CSS

p{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
span{
  color:red;
}