拒絕JavaScript，這三個CSS技巧你必定用的上

本文介紹三個很是棒棒的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;
}
複製代碼

效果以下

---

本文表明我的觀點，內容僅供參考。如有不恰當之處，望不吝賜教！

關注公衆號，第一時間接收最新文章。若是對你有一點點幫助，能夠點喜歡點贊點收藏，還能夠小額打賞做者，以鼓勵做者寫出更多更好的文章。