寫在前面

前端技術(shù)日新月異，我們需要不斷學(xué)習(xí)來更新自己的前端知識并運用到自己的項目中。這次筆者整理一些未來普及或者現(xiàn)在同學(xué)們可能已經(jīng)用到的CSS特性，包括SVG圖標、滾動特性、CSS自定義屬性、CSS現(xiàn)代偽類 、JS in CSS、Web Layout、混合模式和濾鏡、CSS計數(shù)器等等。

滾動特性

在能用CSS實現(xiàn)的就不用麻煩JavaScript^[1]文章提及到滾動捕捉的特性，更多有關(guān)于容器滾動方面的CSS新特性其實還有有很多個，比如：

• 自定義滾動條的外觀
• scroll-behavior指容容器滾動行為，讓滾動效果更絲滑
• overscroll-behavior優(yōu)化滾動邊界，特別是可以幫助我們滾動的穿透

自定義滾動條的外觀

默認的window外觀和mac外觀

windows mac

在CSS中，我們可以使用-webkit-scrollbar來自定義滾動條的外觀。該屬性提供了七個偽元素：

• ::-webkit-scrollbar：整個滾動條
• ::-webkit-scrollbar-button：滾動條上的按鈕（下下箭頭）
• ::-webkit-scrollbar-thumb：滾動條上的滾動滑塊
• ::-webkit-scrollbar-track：滾動條軌道
• ::-webkit-scrollbar-track-piece：滾動條沒有滑塊的軌道部分
• ::-webkit-scrollbar-corner：當同時有垂直和水平滾動條時交匯的部分
• ::-webkit-resizer：某些元素的交匯部分的部分樣式（類似textarea的可拖動按鈕）

html {
    --maxWidth:1284px;
    scrollbar-color: linear-gradient(to bottom,#ff8a00,#da1b60);
    scrollbar-width: 30px;
    background: #100e17;
    color: #fff;
    overflow-x: hidden
}

html::-webkit-scrollbar {
    width: 30px;
    height: 30px
}

html::-webkit-scrollbar-thumb {
    background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60));
    background: linear-gradient(to bottom,#ff8a00,#da1b60);
    border-radius: 30px;
    -webkit-box-shadow: inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25);
    box-shadow: inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25)
}

html::-webkit-scrollbar-track {
    background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17)
}
復(fù)制代碼

通過這幾個偽元素，可以實現(xiàn)你自己喜歡的滾動條外觀效果，比如下面這個示例：

完整演示^[2]

css自定義屬性

你大概已經(jīng)聽說過CSS自定義屬性，也被稱為 CSS 變量，估計熟悉SCSS、LESS就會很快上手，概念大同小異，都是讓我們的CSS變得可維護，目前Edge最新版都已經(jīng)支持這個特性了，這說明現(xiàn)在 CSS 自定義屬性已經(jīng)能用在實際項目中了，相信不久以后開發(fā)者們將大大依賴這個特性。但還請在使用之前請先檢查一下本文附錄中 Postcss 對于 CSS 自定義屬性的支持情況，以便做好兼容。

什么是自定義屬性呢？簡單來說就是一種開發(fā)者可以自主命名和使用的 CSS 屬性。瀏覽器在處理像 color 、position 這樣的屬性時，需要接收特定的屬性值，而自定義屬性，在開發(fā)者賦予它屬性值之前，它是沒有意義的。所以要怎么給 CSS 自定義屬性賦值呢？這倒和習(xí)慣無異

.foo {
  color: red;
  --theme-color: gray;
}
復(fù)制代碼

自定義元素的定義由 -- 開頭，這樣瀏覽器能夠區(qū)分自定義屬性和原生屬性，從而將它倆分開處理。假如只是定義了一個自定義元素和它的屬性值，瀏覽器是不會做出反應(yīng)的。如上面的代碼， .foo 的字體顏色由 color 決定，但 --theme-color 對 .foo 沒有作用。

你可以用 CSS 自定義元素存儲任意有效的 CSS 屬性值

.foo {
  --theme-color: blue;
  --spacer-width: 8px;
  --favorite-number: 3;
  --greeting: "Hey, what's up?";
  --reusable-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.85);
}
復(fù)制代碼

使用

假如自定義屬性只能用于設(shè)值，那也太沒用了點。至少，瀏覽器得能獲取到它們的屬性值。

使用 var() 方法就能實現(xiàn)：

.button {
  background-color: var(--theme-color);
}
復(fù)制代碼

下面這段代碼中，我們將 .button 的 background-color 屬性值賦值為 --theme-color 的值。這例子看起來自定義屬性也沒什么了不起的嘛，但這是一個硬編碼的情況。你有沒有意識到，--theme-color 的屬性值是可以用在任意選擇器和屬性上的呢？這可就厲害了。

.button {
  background-color: var(--theme-color);
}
 
.title {
  color: var(--theme-color);
}
 
.image-grid > .image {
  border-color: var(--theme-color);
}
復(fù)制代碼

缺省值

如果開發(fā)者并沒有定義過 --theme-color 這個變量呢？var() 可以接收第二個參數(shù)作為缺省值：

.button {
  background-color: var(--theme-color, gray);
}
復(fù)制代碼

注意：如果你想把另一個自定義屬性作為缺省值，語法應(yīng)該是 background-color: var(--theme-color, var(--fallback-color))

傳參數(shù)時總是傳入一個缺省值是一個好習(xí)慣，特別是在構(gòu)建 web components 的時候。為了讓你的頁面在不支持自定義屬性的瀏覽器上正常顯示，別忘了加上兼容代碼：

.button {
  background-color: gray;
  background-color: var(--theme-color, gray);
}
復(fù)制代碼

CSS現(xiàn)代偽類

這些最新的偽類特性，我們也需要知道。

使用 :is() 減少重復(fù)

你可以使用 :is() 偽類來刪除選擇器列表中的重復(fù)項。

/* BEFORE */
.embed .save-button:hover,
.attachment .save-button:hover {
  opacity: 1;
}

/* AFTER */
:is(.embed, .attachment) .save-button:hover {
  opacity: 1;
}
復(fù)制代碼

此功能主要在未處理的標準CSS代碼中有用。如果使用Sass或類似的CSS預(yù)處理程序，則可能更喜歡嵌套。

注意：瀏覽器還支持非標準的 :-webkit-any() 和 :-moz-any() 偽類，它們與 :is() 相似，但限制更多。WebKit在2015年棄用了 :-webkit-any() ，Mozilla已將Firefox的用戶代理樣式表更新為使用 :is() 而不是 :-moz-any()。

使用 :where() 來保持低特殊性

:where() 偽類與 :is() 具有相同的語法和功能。它們之間的唯一區(qū)別是 :where() 不會增加整體選擇器的特殊性（即某條CSS規(guī)則特殊性越高，它的樣式越優(yōu)先被采用）。

:where() 偽類及其任何參數(shù)都不對選擇器的特殊性有所幫助，它的特殊性始終為零

此功能對于應(yīng)易于覆蓋的樣式很有用。例如，基本樣式表 sanitize.css 包含以下樣式規(guī)則，如果缺少 <svg fill> 屬性，該規(guī)則將設(shè)置默認的填充顏色：

svg:not([fill]) {
  fill: currentColor;
}
復(fù)制代碼

由于其較高的特殊性（B = 1，C = 1），網(wǎng)站無法使用單個類選擇器（B = 1）覆蓋此聲明，并且被迫添加 !important 或人為地提高選擇器的特殊性（例如 .share- icon.share-icon）。

.share-icon {
  fill: blue; /* 由于特殊性較低，因此不適用 */
}
復(fù)制代碼

CSS庫和基礎(chǔ)樣式表可以通過用 :where() 包裝它們的屬性選擇器來避免這個問題，以保持整個選擇器的低特殊性(C=1)。

/* sanitize.css */
svg:where(:not([fill])) {
  fill: currentColor;
}

/* author stylesheet */
.share-icon {
  fill: blue; /* 由于特殊性較高，適用 */
}
復(fù)制代碼

其它新偽類特性有情趣同學(xué)可以按照導(dǎo)圖查閱一下相關(guān)文檔資料。

完整演示^[3]

JS in CSS

前面提到過，使用CSS自定義屬性的時候，可以通過JavaScript來操作自定義屬性的值。其實還可以更強大一點，如果你對CSS Houdini熟悉的話，可以借助其特性，直接在CSS的代碼中來操作CSS自定義屬性

:root {
  --property: document.write('hello world!');
}
復(fù)制代碼

window.onload = () => {
  const doc = window.getComputedStyle(document.documentElement);
  const cssProp = doc.getPropertyValue('--property');
  new Function((cssProp))();
}
復(fù)制代碼

完整演示^[4]

Web layout

對于Web布局而言，前端就一直在探討這方面的最優(yōu)方式。早期的table布局，接著的float和position相關(guān)的布局，多列布局，F(xiàn)lexbox布局和Grid布局等。Flexbox和Grid的出現(xiàn)，Web布局的靈活性越來越高。

如圖不依賴媒體查詢實現(xiàn)自動計算

CSS Grid中提供了很多強大的特性，比如：

• fr單位，可以很好的幫助我們來計算容器可用空間
• repeat()函數(shù)，允許我們給網(wǎng)格多個列指定相同的值。它也接受兩個值：重復(fù)的次婁和重復(fù)的值
• minmax()函數(shù)，能夠讓我們用最簡單的CSS控制網(wǎng)格軌道的大小，其包括一個最小值和一個最大值
• auto-fill和auto-fit，配合repeat()函數(shù)使用，可以用來替代重復(fù)次數(shù)，可以根據(jù)每列的寬度靈活的改變網(wǎng)格的列數(shù)
• max-content和min-content，可以根據(jù)單元格的內(nèi)容來確定列的寬度
• grid-suto-flow，可以更好的讓CSS Grid布局時能自動排列

結(jié)合這些功能點，布局會變得更輕松。比如我們要實現(xiàn)一個響應(yīng)式的布局，很多時候都會依賴于媒體查詢（@media）來處理，事實上，有了CSS Grid Layout之后，這一切變得更為簡單，不需要依賴任何媒體查詢就可以很好的實現(xiàn)響應(yīng)式的布局。特別是當今這個時代，要面對的終端設(shè)備只會增加不會減少，那么希望布局更容易的適配這些終端的布局，那么CSS Grid Layout將會起到很大的作用。

完整示例^[5]

Grid和flex都是面向未來的最佳布局方案。我們不應(yīng)該探討誰優(yōu)誰劣，而是應(yīng)該取長補短結(jié)合使用。

混合模式和濾鏡

能用CSS實現(xiàn)的就不用麻煩JavaScript — Part2^[6]一文提到混合模式。CSS混合模式和濾鏡主要是用來處理圖片的。熟悉PS之類軟件的同學(xué)很容易理解里面的屬性。

完整代碼演示^[7]

CSS計數(shù)器

CSS計數(shù)器其實涉及到三個屬性：counter-increment、counter-reset和counter()。一般情況都是配合CSS的偽元素::before和::after的content一起使用。可以用來計數(shù)

完整演示^[8]

SVG圖標

對于SVG而言，它是一套獨立而又成熟的體系，也有自己的相關(guān)規(guī)范（Scalable Vecgtor Graphics 2），即 SVG2。雖然該規(guī)范已經(jīng)存在很久了，但很多有關(guān)于SVG相關(guān)的特性在不同的瀏覽器中得到的支持度也是有所不一致的。特別是SVG中的漸變和濾鏡相關(guān)的特性。不過，隨著技術(shù)的革新，在Web的應(yīng)用當中SVG的使用越來越多，特別是SVG 圖標相關(guān)的方面的運用。

• 最早通過<img>標簽來引用圖標（每個圖標一個文件）

• 為了節(jié)省請求，提出了Sprites的概念，即將多個圖標合并在一起，使用一個圖片文件，借助background相關(guān)的屬性來實現(xiàn)圖標

• 圖片畢竟是位圖，面對多種設(shè)備終端，或者說更易于控制圖標顏色和大小，開始在使用Icon Font來制作Web圖標

• 當然，字體圖標是解決了不少問題，但每次針對不同的圖標的使用，需要自定義字體，也要加載相應(yīng)的字體文件，相應(yīng)的也帶了一定的問題，比如說跨域問題，字體加載問題

• 隨著SVG的支持力度越來越強，大家開始在思考SVG，使用SVG來制作圖標。該技術(shù)能解決我們前面碰到的大部分問題，特別是在而對眾多終端設(shè)備的時候，它的優(yōu)勢越發(fā)明顯

• SVG和img有點類似，我們也可以借助<symbol>標簽和<use>標簽，將所有的SVG圖標拼接在一起，有點類似于Sprites的技術(shù)，只不過在此稱為SVG Sprites

<!-- HTML -->
<svg width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">
    <symbol id="half-circle" viewBox="0 0 106 57">...</symbol>
    <!-- .... -->
    <symbol id="icon-burger" viewBox="0 0 24 24">...</symbol>
</svg>
復(fù)制代碼

SVG Sprites和img Sprites有所不同，SVG Sprites就是一些代碼（類似于HTML一樣），估計沒有接觸過的同學(xué)會問，SVG Sprites對應(yīng)的代碼怎么來獲取呢？其實很簡單，可以借助一些設(shè)計軟件來完成，比如Sketch。當然也可以使用一些構(gòu)建工具，比如說svg-sprite。有了這個之后，在該使用的地方，使用<use>標簽，指定<symbol>中相應(yīng)的id值即可，比如：

<svg class="icon-nav-articles" width="26px" height="26px">
    <use xlink:href="#icon-nav-articles"></use>
</svg>
復(fù)制代碼

使用SVG的圖標還有一優(yōu)勢，我們可以在CSS中直接通過代碼來控制圖標的顏色：

.site-header .main-nav .main-sections>li>a>svg {
    // ...
    fill: none;
    stroke-width: 2;
    stroke: #c2c2c2;
}
.site-header .main-nav:hover>ul>li:nth-child(1) svg {
    stroke: #ff8a00;
}
復(fù)制代碼

完整演示^[9]

寫在最后

以上列舉都是CSS一些優(yōu)秀的特性。還有很多，有時間再收集更多分享給大家。這些新特性在不同的瀏覽器中差異性是有所不同的。但這并不是阻礙我們?nèi)W(xué)習(xí)和探索的原因所在。我們應(yīng)該及時去了解并運用到，才可以做到對項目精益求精。