CSS的未來－互聯網 - 大數據

文章出處

僅供參考

前言

完成《CSS核心技術與實戰》這本書，已有一個多月了，而這篇文章原本是打算寫在那本書里面的，但本章講解的內容，畢竟屬于CSS未來的范疇，而這一切都還不能夠確定下來，所以這一章沒有寫進去，但不管怎么說，多少了解一下還是有好處的，里面部分功能，有些瀏覽器已經實現了。

如果你對CSS預處理器感興趣，那么本篇文章也許很適合你。

初學CSS預處理器，其實我是不太明白為什么需要用這種東西的，后來想明白一件事，一切都是為了可維護性。比如下面這幅圖

距離左邊有一點點間距，而其他元素設置的間距往往也是一樣的，但如果不使用預處理器，或許我們會這樣寫

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

但這種問題是，如果需要更改所有間距，你不得不誒個去替換，這樣帶來了很多不必要的工作量，如果使用預處理器就好辦了，因為預處理器是允許你使用變量的，你可以像編程語言那樣，定義一個全局變量，在需要的地方，引用這個全局變量，更改的時候，只需要修改一處就好了，假設代碼如下:

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

也就是說預處理器很大一部分就是為了解決可維護性，本章講解的是后處理器。

那么后處理器和預處理器有什么區別

你可以這樣理解，后處理器就好比動態語言，而預處理器就好比靜態語言。預處理器就是事先將結果編譯出來，而后處理器則不同，值是在運行時才決定的。

CSS的未來

在未來的CSS中將會支持更多的屬性以及函數，其中不乏有變量，嵌套，值計算等，這一章我們將會講解它們。

注意：因為本節內容大部分需要CSS未來版本才支持，所以你的瀏覽器可能不一定有效果，不過有一個插件(cssnext)可以解決這個問題，關于這個插件的使用請到本節的最后一節中查看。

CSS變量

1. 變量的基本使用

在這些新增的功能中最喜歡的非CSS變量莫屬，CSS變量名通過自定義屬性來設置（要實現全局變量，需要在html或body也可以在:root偽類中聲明），并且自定義屬性必須以--開頭,使用var()來訪問。如下：

: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

圖13.11 變量

以上我們通過:root在全局中定義了幾個變量，然后在a元素中通過var函數來使用這些變量。

需要注意的是這些變量對大小寫是敏感的，如：--color和--Color是兩個不同的變量。

另外這些變量也是可以繼承的，如下這段：

:root{
  --color-red:red;
}
.box{
  color:var(--color-red);
}
<div class="box">
    <p>CSS變量</p>
</div>

效果如圖13.12

圖13.12 繼承

這些變量也具有層疊性，如下這段代碼：

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

如上這段，我們在全局聲明了一個--head-color在.box中又聲明了一次，那么它最終會使用的是它父元素中定義的--head-color，就近原則，效果如圖13.13

圖13.13 變量也具有層疊性

不過還得注意一下就是這些變量不支持!important，也就是說設置了和沒設置是一樣的，根本沒用，如下：

:root{
  --head-color:red !important;
}
.box{
  color:var(--head-color);
}
.box{
  color:blue;
}
<div class="box">CSS變量</div>

效果如圖13.14

圖13.14 變量不支持!important

看到了吧，雖然我們給--head-color設置了!important但還是被層疊了，如果是正常情況應該會像下面這段代碼一樣：

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

效果如圖13.15

圖13.15 如果可以的話應該是這個樣子

這個var函數還支持一個很強大的功能，允許你傳遞一個默認的參數，當變量不存在的時候就會使用默認值，如下：

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

以上我們在var中使用了一個默認的值，當--head-color不存在就會使用orange，效果如圖13.16

圖13.16 使用默認值

2.CSS變量的意義

如果你使用過一些編程語言，你不會忘記變量是多么的重要，如在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中合理的使用變量，可以減輕不少的工作，以及可維護性。比如一個網站的主調色，它們基本都是固定的，那么我們完全可以使用變量來儲存它們，另外一點就是當網站改版時，如果網站主調色改變時我們只需要改變相應的變量即可，這或許就是變量的最大好處吧。從另一個角度來講使用變量的另一個好處就是，具有一致性，比如頁面中所有元素的字體大小都是引用的同一個變量，那么當我們改變這個變量時，其他元素的字體大小都會相應的改變，我們來看一下，下面這段代碼：

: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函數，如下:

: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可以實現更小的組合。如下：

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

在以上我們定義了一個用來實現當元素溢出時隱藏文字的代碼段--overflow-ellipsis，當我們需要時只需要通過@apply來引用即可，真的是很實用的一個功能，不由想起來了Javascript中的函數。

如果某段代碼是重復的，你不妨試試@apply。

未來的媒體查詢

1.自定義媒體查詢

使用自定義的媒體查詢使之更加語義化，使用如下：

@custom-media --big-viewport (max-width:1100px);

@media (--big-viewport) {
  body{
    background-color:red;
  }
}

通過@custom-media來設置一個媒體規則。感覺沒什么用？好吧，來看下一個功能。

2.限制媒體查詢范圍

以前如果我們想實現一個限制媒體查詢的范圍也許是這樣的：

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

以上我們限制屏幕的寬在320到640之間時讓頁面背景變成紅色，但現在我們可以這樣：

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

是不是更加一目了然了，當然它還可以結合@custom-media來使用，如下：

@custom-media --noly-mobile (width >= 320px) and (width <= 640px);

@media (--noly-mobile) {
  body{
    background-color:red;
  }
}

自定義選擇器

想過自己來定義選擇器嗎，接下來我們就來實現一個，如下：

@custom-selector :--title h2,h3;

.main :--title{
  font-size:18px;
  font-weight:normal;
}

自定義選擇器通過@custom-selector來定義，后面跟隨一個:--接著是自定義選擇器的名稱，后面是你需要定義的選擇器，多個用逗號隔開，如果你不理解的話，可以看下面這段代碼，以上和下面這段代碼效果是一樣的。

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

要說，上面這兩段代碼的區別，可能就是自定義選擇器更加靈活以及方便吧。

選擇器嵌套

選擇器嵌套是我非常喜歡的一個功能，話說當初我使用預處理器就是因為它有這個功能，小二來一段不加鹽的代碼：

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

它的效果和下面這段代碼一樣：

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

有沒有一種再也不想用預處理器的沖動，另外對于媒體查詢我們不需要用&來引用，直接在大括號中使用即可，如下：

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

效果和下面這段代碼一樣：

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

它還支持比較復雜的嵌套（規則嵌套），如下這段：

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

規則嵌套需要使用關鍵字@nest，效果和下面這段一樣：

p a{
    color: red
}

顏色函數

顏色函數通過color使用，如下：

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

這段代碼的意思是說給body添加了一個背景為pink的顏色并且透明度為30%，和下面這段代碼一樣：

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

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

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

這個還是比較方便的。

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

初始值

我們知道一個div默認是塊元素，那么如果你不想它默認變成塊元素可以通過initial將它設置成初始值。如下：

div {
  display: initial;
}
<div>我才是真正的DIV，T_T</div>
<div>我才是真正的DIV，T_T</div>

效果如圖13.18所示

圖13.18 初始值

這里它之所以在一排了，是因為display的初始值就是inline，而為什么不將div的display設置成initial它默認是block是因為瀏覽器給div設置了默認樣式，也就是說initial可以去掉瀏覽器默認樣式。

如果你想去掉一個元素中的所有瀏覽器默認樣式，可以這樣：

div{
  all:initial;
}

但不是特別建議你這樣，最好還是根據需求來。

cssnext插件使用

cssnext插件允許你在CSS中寫未來版本的CSS，它會將這些代碼轉換成瀏覽器兼容的代碼，不過要使用cssnext我們還得下載一個postcss，那么postcss是什么呢？官方是這樣說的：

使用JavaScript來轉換CSS的工具

這里并不想詳細的講解postcss是什么，更多關于postcss的說明可以到http://postcss.org/官網查看，接下來我們來安裝一下postcss

安裝postcss-cli

npm install postcss-cli -g

下載完以后，我們接著下載cssnext如下：

npm install postcss postcss-cssnext -g

為了方便我們這里使用的是命令行工具，如果想在命令行工具中使用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

更多方法可以訪問https://github.com/postcss/postcss-cli

具體效果如下：

源代碼：

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

轉換后的代碼：

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

完。

文章列表

不含病毒。www.avast.com

AutoPoster

互聯網 - 大數據

AutoPoster 發表在痞客邦留言(0) 人氣()

E-mail轉寄

互聯網 - 大數據

本部落格為互聯網熱門頭條訊息管理中心

BloggerAds

CSS的未來

前言

那么后處理器和預處理器有什么區別

CSS的未來

CSS變量

1. 變量的基本使用

2.CSS變量的意義

應用規則集(@apply)

未來的媒體查詢

1.自定義媒體查詢

2.限制媒體查詢范圍

自定義選擇器

選擇器嵌套

顏色函數

初始值

cssnext插件使用

歷史上的今天

留言列表

參觀人氣

最新文章

熱門文章

文章分類

最新留言

文章搜尋

文章精選

誰來我家

POWERED BY

QR Code