【前端詞典】這些功能其實不須要 JS，CSS 就能搞定

前言

今天咱們你們介紹一些你可能乍一眼覺得必定須要 JavaScript 才能完成的功能，其實 CSS 就能完成，甚至更加簡單。

內容已經發布在 gitHub 了，歡迎圍觀 Star，更多文章都在 gitHub。

直接入題

1. 每一個單詞的首字母大寫

其實我第一次看到這個功能的時候就是使用 JS 去實現這個功能，想都沒想 CSS 能夠完成這個功能。立刻就屁顛屁顛的寫了一個方法：

function capitalizeFirst( str ) {
    let result = '';
    result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
    return result
}  
複製代碼

寫完這個方法後，還有點小得意，也就沒想其餘方案。直到有一天看到 CSS 也能作這個功能的時候，我才反應過來明明一句 CSS 就能解決的問題，我卻使用了更復雜的方案。

CSS 方案以下：

.capitalizeFirst-css {
    text-transform: capitalize;
}
複製代碼

是否是特別簡單（代碼在上面的 blog 倉庫，訪問 cssDo 路由即可，下面的案例都是這個路由下）：

text-transform 簡單介紹

這是 CSS2 中的屬性，參數有 capitalize | uppercase | lowercase | none

參數介紹：

1. none： 默認。定義帶有小寫字母和大寫字母的標準的文本。
2. capitalize： 文本中的每一個單詞以大寫字母開頭。
3. uppercase： 定義僅有大寫字母。
4. lowercase： 定義無大寫字母，僅有小寫字母。

從這個屬性咱們能夠知道所有大寫（小寫）的需求這個屬性也能輕易實現。

2. 單選高亮

可能你看到「單選高亮」沒反應過來，直接來張圖片你就立刻清楚了：

不知道你是否第一次看到這種單選高亮的需求時，是怎麼處理的。我第一次直接是用 JS 控制的。後來我發現這個需求用 CSS 更方便處理。

主要代碼就是一段 CSS 代碼：

// 省略部分代碼，詳細代碼看倉庫
.input:checked + .colors {
  border-color: #e63838;
  color: #e63838;
}

<div class="single-check">
    <input class="input" type="radio" name="colors" value="1">
    <div class="colors">天空之境</div> 
</div>
複製代碼

看效果：

兩個選擇器的區別

~ 選擇器：查找某個元素後面的全部兄弟元素

+ 選擇器：查找某個元素後面緊鄰的兄弟元素

擴展

其實這個技巧也徹底可使用在導航欄的交互效果，我的以爲能夠簡化一部分工做。

三、多列等高問題

以前作 pc 端的客戶畫像需求時，遇到須要左右兩邊等到的需求（左邊塊的高度會隨着內容變化）。

最初我使用的 JS 計算高度再賦值，但是這樣會有頁面閃動的效果。因此找到了兩種 CSS 的處理方案：

1. 每列設置一個很大的 padding，再設置一個很大的負的 margin
2. 使用 display: table;

第一種有明顯的缺陷：

1. border-bottom 看不到了
2. 設置的下方的兩個圓角也不見了

因此我使用了 display: table; 的方式來實現等高，能夠說很是的方便。

建議不要一味的抵觸 table，有的場景仍是可使用的。

四、表單驗證

先聲明：這裏沒有用到 JS，不過用到了 HTML5 關於 <input> 的新屬性 —— pattern( 檢查控件值的正則表達式 )。
還有一點：其實我在實際項目中沒這麼用過。

代碼以下：

input[type="text"]:invalid ~ input[type="submit"] {
    display: none
}

<div class="form-css">
    <input type="text" name="tel" placeholder="輸入手機號碼" pattern="^1[3456789]\d{9}$" required><br>
    <input type="text" name="smscode" placeholder="輸入驗證碼" pattern="\d{4}" required><br>
    <input type="submit" ></input>
</div>
複製代碼

效果以下（樣式很差看的問題請忽略）：

invalid 僞類和 vaild 僞類

• valid 僞類，匹配經過 pattern 驗證的元素
• invalid 僞類，匹配未經過 pattern 驗證的元素

後記

還有一些你們比較經常使用的這裏就不介紹了，週三愉快。

最後

你能夠關注個人同名公衆號【小生方勤】，這裏我會分享優質的文章，咱們一同進步。

若是你想進【大前端交流羣】，點擊加羣交流即刻加入。