Effective前端1---chapter 1 HTML/CSS優化

時間 2019-11-18

標籤 effective 前端 chapter html css 優化欄目 HTML 简体版

原文原文鏈接

最近在讀高效前端：web高效編程與優化實踐，藉此本書的感覺總結下前端代碼與性能優化，純屬本身看法，若有錯誤，歡迎指出。css

1.能用HTML/CSS解決的問題就不要用js

場景1：鼠標懸浮時顯示

鼠標懸浮在菜單上時，顯示子菜單。html

實現思路：剛開始隱藏掉子菜單，信息框做爲hover目標的子元素或者相鄰元素，才方便使用CSS控制。前端

.menu{
    display:none;  
}

當導航hover時結合相鄰選擇器，把子菜單顯示出來；web

.find:hover + .menu{
     display:list-item;
}
//保證menu自己在hover的時候也要顯示，
.menu:hover{
　　display:list-item;
}

.menu菜單的位置可使用絕對定位顯示在你想要顯示的位置。編程

場景2：自定義radio/checkbox的樣式

在咱們使用原生的單選或者複選框時，不能知足咱們的需求時，須要本身定製其樣式。移動web開發

兩種方法：（1）使用label元素的綁定選中，修改其樣式瀏覽器

<label for="checkbox_1">
        <input type="checkbox" id="checkbox_1">
        <span class="checkbox"></span>
        HELLO WORLD
</label>

       /**
            複選樣式（使用label選中）
        */
        label{
            cursor: pointer;
            display: block;
        }
　　　　　//隱藏input
        label input[type=checkbox]{
            display: none;
        }
　　　　　//使用span的樣式代替原生input樣式
        label input[type="checkbox"] + .checkbox{
            box-sizing: border-box;
            display: inline-block;
            width: 16px;
            height: 16px;
            border: #ccc 1px solid;
            border-radius: 3px;
            position: relative;
            top: 2px;
        }
        input[type=checkbox]:checked + .checkbox{
            border: #307bb5 1px solid;
            background-color: #307bb5;
        }
        input[type=checkbox]:checked + .checkbox::after{
            content: '✔';
            position: absolute;
            top: -3px;
            left: 1px;
            color: #fff;
            transition: all 0.3s linear;
            font-size: 14px;
        }

      /**
            單選樣式（使用label選中）
        */
        label input[type=radio]{
            display: none;
        }
        label input[type="radio"] + .radiobox{
            box-sizing: border-box;
            display: inline-block;
            width: 16px;
            height: 16px;
            border: #ccc 1px solid;
            border-radius: 50%;
            position: relative;
            top: 2px;
        }
        input[type=radio]:checked + .radiobox{
            border: #307bb5 1px solid;
            background-color: #307bb5;
        }
        input[type=radio]:checked + .radiobox::after{
            content: '';
            width: 6px;
            height: 6px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 4px;
            left: 4px;
            color: #fff;
        }

上述作法必需要保證label綁定對應input的值，不然不會生效；性能優化

效果以下圖：app

（2）直接使用input的僞類實現ide

<input type="checkbox" id="">

//隱藏原生複選框樣式       
input[type=checkbox]{
     appearance: none;
     -webkit-appearance: none;
     outline: none;
     margin: 0;
     /* 將 */
     position: relative;
      top: 2px;
}
//顯示的複選框樣式
input[type=checkbox]:after {
            box-sizing: border-box;
            display: block;
            content: "";
            width: 16px;
            height: 16px;
            background: #fff;
            border-radius: 3px;
            border: 1px solid #aaa;
}
//選中後複選框樣式
input[type=checkbox]:checked:after{
            box-sizing: border-box;
            border: #307bb5 1px solid;
            background-color: #307bb5;
            text-align: center;
            content: '✔';
            color: #fff;
            transition: all 0.3s linear;
            font-size: 12px;
            position: relative;
            top: -2px;
}

效果以下：

此種方法的好處就是不須要多餘的標籤，能夠實現改變原生樣式。可是也存在一個小問題，感興趣的小夥伴能夠去試一下。（以上content裏用到的對號是搜狗輸入法的特殊符號）

場景3：使用表單提交

表單提交存在兩種方式，一個AJAX,另外一種是表單提交。以下：若是點擊搜索按鈕後要跳轉到列表頁，咱們就可使用表單提交

<form action="/search" id="search-form">
        <input type="search" name="keyword">
        <input type="email">
</form>

把全部的字段的名字寫在input的name裏面，而後form的action做爲搜索頁的連接，這樣就能夠實習那不用一行js實現搜索跳轉。

若是須要表單驗證的話，那就監聽submit事件作驗證，驗證經過後調用原生表單元素的submit函數就能夠實現表單提交，不須要手動獲取form的值。

場景4：巧用CSS3僞類元素

CSS3的僞類提供了狀態切換特性，除了以上實現的單選複選樣式的：checked以外，還有focus，invalid等等。以下：

input獲取焦點後，width發生改變。

實現：

.search{
    width:100px;  
}
//input獲取焦點後樣式
input[type=search]:foucs + .search{
    width:200px;
}

還有一些輸入框輸入不合法時，例如提交按鈕置灰，下一步按鈕置灰等等操做，可使用input的type和pattern等屬性約束合法性，而後觸發:invalid，實現以上操做。

場景5：用CSS3的attr屬性實現簡單的tooltip效果

當要實現一個hover的時候顯示提示信息，若是使用title屬性以爲效果很差看，又不想使用JS寫，這時可使用CSS3的attr屬性實現。

<p>
      hello,
      <span data-title='Effective Frontend Development'>EFED</span>
 </p>

 span[data-title]{
         position: relative;
 }
//定義顯示框的樣式
span[data-title]:hover::before{
       content: attr(data-title);
       position: absolute;
       top: 150%;
       left: 50%;
       transform: translateX(-50%);
       white-space: nowrap;
       border: 1px solid #ccc;
       padding: 5px 10px;
       border-radius: 5px;
}

效果以下圖：另外，你也可使用after畫一個三角形，指向要顯示的元素位置。

JS是萬能的，幾乎能夠作任何事情，但有時候會顯得笨拙，咱們要學會在JS/HTML/CSS之間選擇適合的開發形式，儘量的簡化開發，提高本身。

另外，這樣的場景還有不少，像自動監聽回車事件用於提交，導航懸浮，多列等高等等，這裏就再也不贅述。