3個非常棒的CSS技巧，可以在項目中完全代替JS

​

本文介紹3個非常棒的css技巧，完全可以在你的項目中代替JavaScript，一起來看看這些技巧吧。

• :active僞類與css資料上報
• 超實用超高頻使用的:empty僞類
• 用好:only-child僞類

1、 :active僞類與CSS資料上報

如果想要知道兩個按鈕的點選率，CSS開發者可以自己動手，無需勞煩JavaScript開發者去埋點：

.button-1:active::after {
    content: url(./pixel.gif?action=click&id=button1);
    display: none;
}


.button-2:active::after {
    content: url(./pixel.gif?action=click&id=button2);
    display: none;
}      

此時，當點選按鈕的時候，相關行為資料就會上報給伺服器，這種上報就算把JavaScript禁用掉也無法阻止，友善快捷，特别适合A/B測試。

2、超實用超高頻使用的:empty 僞類

:empty 僞類用來比對空标簽元素，例如：

<div class="cs-empty"></div>
.cs-empty:empty{
    width: 120px;
    padding: 20px;
    border: 10px dashed;
}      

此時，div 元素就會比對 :empty 僞類，呈現出虛線框，如下圖

2.1 隐藏空元素

例如，某個子產品裡的内容是動态的，可能是清單，也可能是按鈕，這些子產品容器常包含影響布局的CSS屬性，如margin、padding屬性等。當然，這些子產品裡面有内容的時候，布局顯示效果是非常好的，然兒一旦這些子產品裡面的内容為空，頁面上就會有一塊很大的明顯的空白，效果就不好，這種情況下使用 :empty 僞類控制一下就再好不過了：

.cs-module:empty {
    display: none;
}      

無需額外的JavaScript邏輯判斷，直接使用CSS就可以實作動态樣式效果，唯一需要注意的，當清單内容缺失的時候，一定要把空格也去掉，否則:empty 僞類不會比對。

2.2 字段缺失智能提示

例如，下面的html

<dl>
    <dt>姓名：</dt>
    <dd>張三</dd>
    <dt>性别：</dt>
    <dd></dd>
    <dt>手機：</dt>
    <dd></dd>
    <dt>郵箱：</dt>
    <dd></dd>
</dl>      

使用者某些資訊字段是缺失的，此時由于開發人員應該使用其他占位字元示意這裡沒有内容，如短橫線（-）或者直接使用文字提示。

但是多年的開發經驗告訴我，開發人員非常容易忘記這裡的特殊處理，最終導緻布局混亂，資訊難懂。

dt {
    float: left;
}      

但如今，我們就不用擔心這樣的合作問題了，直接使用CSS就可以處理這種情況，代碼很簡單：

dd:empty::before {
    content: '暫無';
    color: gray;
}      

此時字段缺失後的布局效果如下：

2.3、資料為空提示

實際開發中類似的場景還有很多。例如，表格中的備注資訊經常都是空的，此時可以這樣處理：

td:empty::before{
    content: '-';
    color: gray;
}      

除此之外，還有一類典型場景需要用到 :empty 僞類，那就是動态Ajax加載資料為空的情況。當一個新使用者進入一個産品的時候，很多子產品内容是沒有的。要是在過去，我們需要在Javascript代碼中做 if 判斷，如果沒有值，我們要吐出”沒有結果“或者”沒有資料“的資訊。但是現在，有了 :empty 僞類，直接把這個工作交給CSS就可以了。例如：

.cs-search-module:empty::before{
    content: '沒有搜尋結果'；
    display: block;
    line-height: 300px;
    text-align: center;
    color: gray;
}      

又如：

.cs-article-module:empty::before{
    content: '您還沒有釋出任何文章'；
    display: block;
    line-height: 300px;
    text-align: center;
    color: gray;
}      

總之，這種方法非常好用，可以節約大量的開發時間，同時體驗更好，維護更友善，因為可以使用同一個類名使整站提示資訊保持一緻：

.cs-article-module:empty::before{
    content: '暫無資料；
    display: block;
    line-height: 300px;
    text-align: center;
    color: gray;
}      

3、用好:only-child僞類

:only-child 是一個很給力的僞類，尤其在處理動态資料的時候，可以省去很多寫JavaScript邏輯的成本。

:only-child 意思是比對沒有任何兄弟元素的元素。例如，下面的 p 元素可以比對 :only-child 僞類，因為其前後沒有其他兄弟元素：

<div class="cs-confirm">
    <!-- 可以比對:only-child僞類 -->
    <p class="cs-confirm-p">确定删除該内容？</p>
</div>      

雖然 .icon 元素後面有删除文字，但由于沒有标簽嵌套，是匿名文本，是以不影響 .icon 元素比對 :only-child 僞類。

尤其需要使用 :only-child 僞類的場景是動态場景，也就是某個固定小子產品，根據場景的不用，裡面可能是一個子元素，也可能是多個子元素，元素個數不同，布局方式也不同，此時就是 :only-child 僞類大放異彩的時候。

例如，某個加載元素（loading）子產品裡面可能就隻有一張加載圖檔，也可能僅僅就是一段加載描述文字，也可能是加載圖檔和加載文字同時出現，此時 :only-child 僞類就非常好用。

html示意如下：

<!-- 1. 隻有加載圖檔 -->
<div class="cs-loading">
    <img src="./loading.png"  class="cs-loading-img"\>
</div>
<!-- 2. 隻有加載文字 -->
<div class="cs-loading">
    <p  class="cs-loading-p">正在加載中...</p>
</div>
<!-- 3. 加載圖檔和加載文字同時存在 -->
<div class="cs-loading">
    <img src="./loading.png"  class="cs-loading-img"\>
    <p class="cs-loading-p">正在加載中...</p>
</div>      

我們無需在父元素上專門指定額外的類名來控制不同狀态的樣式，直接活用 :only-child 僞類就可以讓各種狀态下布局都良好。

.cs-loading {
    height: 150px;
    position: relative;
    text-align: center;
    /* 與截圖無關，截圖示意用 */
    border: 1px dotted;
}


/* 圖檔和文字同時存在時在中間留點間距 */
.cs-loading-img {
    width: 32px; height: 32px;
    margin-top: 45px;
    vertical-align: bottom;
}


.cs-loading-p {
    margin: .5em  0  0;
    color: gray;
}


/* 隻有圖檔的時候居中絕對定位 */
.cs-loading-img:only-child {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
}


/* 隻有文字的時候行号近似垂直居中 */
.cs-loading-p:only-child {
    margin: 0;
    line-height: 150px;
}      

本文完〜