一、稱為引言的部分

週一的時候，見到條轉發較多的微博，是個頁面連結，頁面中有4個充分發揮CSS3 box-shadow潛力實現精湛的效果。

有4個demo4種效果哦！

比方說第三個的彩色轉啊轉的loading效果：

是不是帥得掉渣啊！

然而這種效果的實現就像是在大街上耍猴，圍觀人挺多，喝彩聲也不少，但是，看完了，大家各回各家、各找各媽了！

好比上面那個炫炫的酷酷的轉轉載入效果，全部CSS實現的啊，好讚的來！然而，僅少部分瀏覽器支援，實際專案中壓根用不了，至少在PC上如此，純屬華而不實的東西。於是，看完了，過癮了，頁面關掉後，就直接goodbye了，估計這輩子不會再過來了。

難道就沒有簡單實用的效果嗎，最好可以向下相容的，然後實際專案也能實用的？

有！本文就將展示如何完美向下相容實現loading效果的，順便分享下我自己想出來的一個給IE10+瀏覽器做Hack的方法。

二、效果實現的主演們

對於IE10+瀏覽器，FireFox, Chrome, Opera瀏覽器（如無特殊說明，均值最近版本）使用CSS3 box-shadow+animation實現loading效果，而IE6-IE9瀏覽器還是老方法，使用gif loading效果的圖片，如下這個(32X32)：

我是根據IE10下CSS生成效果基礎上製作的（Photoshop製作，如何製作可參考“gif動畫圖片製作”這篇前作），PSD原始檔可右鍵這裡下載。

簡潔的HTML，不違和的CSS，成就我們在新技術上的嘗試。

三、CSS3實現之box-shadow繪製

下圖是我們想要的效果（FireFox瀏覽器中放大後的截圖）：

8個點，有3個大小有規律變大，這樣旋轉的時候就有方向感和真實性。

8個點實際對應於box-shadow的8個投影，圖片大小標準32px*32px，考慮到點的八卦佈局以及大小限制，因此，我們的容器本身只有3px*3px，於是，有如下的實現程式碼：

.loading {
    width: 3px; height:3px;
    border-radius: 100%;                      /* 圓角 */
    box-shadow: 0 -10px 0 1px #333,           /* 上, 1px 擴充套件 */
 

                10px 0px #333,                /* 右 */    
                0 10px #333,                  /* 下 */
                -10px 0 #333,                 /* 左 */
                              
                -7px -7px 0 .5px #333,        /* 左上, 0.5px擴充套件 */
                7px -7px 0 1.5px #333,        /* 右上, 1.5px擴充套件 */                    
                7px 7px #333,                 /* 右下 */
                -7px 7px #333;                /* 左下 */
}

如果您的瀏覽器IE9+或Chrome一夥，同時不是在RSS中閱讀本文，就會看到上面程式碼的效果，就是下面這個靜止狀態的loading圈圈效果：

CSS3 box-shadow有四個值，分別表示“右偏移、下偏移、模糊大小、擴充套件大小”。因此，那3個稍大的圈圈就是利用了第4個引數——“擴充套件”來實現的。分別擴充套件0.5px, 1px以及1.5px.

以上就是CSS3 box-shadow的繪製，相比一開始的炫炫的彩色效果，這個要通俗易懂的多，大家都能輕鬆把玩實現的效果，只要定好位置，一切都很簡單。

CSS3 box-shadow有四個值，分別表示“右偏移、下偏移、模糊大小、擴充套件大小”。因此，那3個稍大的圈圈就是利用了第4個引數——“擴充套件”來實現的。分別擴充套件0.5px, 1px以及1.5px.

以上就是CSS3 box-shadow的繪製，相比一開始的炫炫的彩色效果，這個要通俗易懂的多，大家都能輕鬆把玩實現的效果，只要定好位置，一切都很簡單。

四、CSS3實現之animation與無限旋轉

一般開源的移動框架中，無限旋轉的CSS都是使用spin作為類名以及動畫關鍵字的，大家可以約定俗成的使用，無形中有利於前端大環境的建設。

CSS程式碼如下，目前在PC上，FireFox/IE10/Opera瀏覽器中animation動畫都已經不需要私有字首了（如果您不放心，可以自己加上），於是，如下CSS3程式碼：

.spin {
    -webkit-transform: rotate(360deg);
    -webkit-animation: spin 1s linear infinite; 
}
@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
      to {-webkit-transform: rotate(360deg);}
}
.spin {
    transform: rotate(360deg);
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
}

跟上面box-shadow生成的靜態點點效果結合，如下，就有（如果你沒有效果，請檢查瀏覽器或點選這裡檢視原文）：

HTML程式碼為：

<div class="loading spin"></div>

五、高不成低不就的IE9瀏覽器

IE9瀏覽器支援CSS3 box-shadow，但是不支援CSS3 animation. 於是，IE9瀏覽器下，雖有CSS生成的點點效果，但是卻無法持續旋轉。因此，考慮到相容性，我們需要把IE9瀏覽器跟IE6-IE8歸到一起去，sorry啦，誰讓你不自動升級的！

於是，我們現在的處理就是：IE6~9使用圖片（程式碼如下），IE10+以及其他現代瀏覽器使用CSS3生成，如何無縫拼接？

.loading {
    width: 32px; height: 32px;
    background: url(loading-css3.gif);
}

六、IE10+瀏覽器的處理

平時處理類似漸進增強功能都是IE6-IE8是一夥，IE9+及其他瀏覽器是一夥，我都是使用:root ie9_other{}實現，簡單易懂，屢試不爽，但是，IE10+還是頭一次遇到，怎麼破？

網上有這麼個Hack，說是針對IE10瀏覽器的：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
   /* IE10的樣式... */
}

先不說適不適用這裡的需求，單純從程式碼量以及記憶難度上將，個人是畏懼了。敢問各位，上面的Hack選擇器你可以一遍就記住嗎？

因此，需要另尋它法，IE10較新，相關知識較少，那就自己動腦子想，一個小小相容處理，有何難的！

思路
關鍵是要尋找IE9不支援，IE10支援的相關CSS樣式或選擇器，下面就是一些：

• :valid/:invalid IE9不支援，IE10以及其他瀏覽器支援
• :required/:optional IE9不支援，IE10以及其他瀏覽器支援
• ::before/::after IE9不支援（IE10↘IE9支援），IE10以及其他瀏覽器支援
• CSS Animations IE9不支援，IE10以及其他瀏覽器支援
• CSS Gradients IE9不支援，IE10以及其他瀏覽器支援

等……

本文相容難點就是因為IE9不支援animation，理論上，我們是可以藉助animation本身實現IE9的向下相容的，如何處理？在spin動畫的form和to設定background:none，以及放上box-shadow相關的CSS！類似：

@keyframes spin {
    from {transform: rotate(0deg); background:none; box-shaodw: ...}
      to {transform: rotate(360deg); background:none; box-shaodw: ...}
}

然而，這種處理有兩大問題：
1. 破壞了spin的重用性；
2. 程式碼冗餘；

因此，不考慮。

於是，我們可以從:valid/:invalid, :required/:optional, ::before/::after以及CSS Gradients中尋找突破。

1. :valid/:invalid偽類實現

:valid/:invalid偽類是針對表單元素的，合法還是不合法。相關tips如下：

• 適用於單複選框、單行多行文字框、下拉框等；
• button型別按鈕所有忽略；
• submit型別按鈕目前Firefox 21不支援，IE10,Opera,Chrome均支援；
• 表單元素如果設定了disabled或readonly，偽類忽略；

綜上所述，如果我們忽略FireFox瀏覽器，則可以藉助submit型別按鈕實現我們想要的效果，HTML為：

<input type="submit" class="loading spin" hidefocus="true" />

於是，配合結構如下的CSS我們就可以得到我們想要的效果了：

/* IE6-IE9, FireFox實現 */
.loading {
    width: 32px; height: 32px;
    background: url(loading-css3.gif);
    /* 按鈕樣式重置 */
    margin: 0; padding: 0; border: 0; outline: none;
    pointer-events: none;
}
/* IE10+, Chrome, Opera */
.loading:valid {
    background: none;
    width: 3px; height:3px;
    border-radius: 100%; 
    box-shadow: ...
}

沒有照顧到CSS支援，且使用者比例也頗高的FireFox瀏覽器，顯然不是最優方法。有人可能會提議使用單行input框或多行textarea域實現。理論上，這是可行的，但是，由於單行或多行文字框在focus的時候有游標，因此，在實現的時候要多些處理，HTML的和CSS部分都有，如下紅色程式碼：

<input class="loading spin" onfocus="this.blur();" hidefocus="true">

.loading {
    width: 32px; height: 32px;
    background: url(loading-css3.gif);
    /* 下面所有樣式均為input框樣式重置，去游標 */
    margin: 0; padding: 0; border: 0; outline: none;
    line-height: 0; font-size: 0; text-indent:-1px;    
    cursor: default;
    pointer-events: none;
}

2. :required/:optional偽類實現

:required/:optional偽類表示表單元素是選填呢還是必填，相關tips如下：

• 適用於單複選框、單行多行文字框、下拉框等；
• input標籤下，無論是button型別按鈕還是submit型別按鈕，Opera瀏覽器都忽略之；其他瀏覽器均可識別；
• button標籤下，無論是button型別按鈕還是submit型別按鈕，僅Chrome瀏覽器識別，其他瀏覽器均忽略
• 控制元件disabled後依然可識別；

相比:valid/:invalid偽類，雖然都有一種瀏覽器對按鈕的支援有問題，但是，:required/:optional偽類卻沒有disabled失效的問題。因此，我們就沒有了所謂焦點獲取、文字輸入、游標閃爍等文字框問題都可以通過新增disabled避免。

因此，如下HTML與CSS程式碼就可以實現比較健壯的loading效果啦！

<input class="loading spin" disabled>

/* IE6-IE9實現 */
.loading {
    width: 32px; height: 32px;
    background: url(loading-css3.gif);
    /* input框樣式重置 */
    margin: 0; padding: 0; border: 0;
}
/* IE10+以及其他或騷或帥之流 */
.loading:optional {
    background: none;
    width: 3px; height:3px;
    border-radius: 100%;
    box-shadow: ...
}

IE9以及IE10瀏覽器下的demo效果截圖如下：

從上面截圖，我們似乎發現了一個問題——尺寸！

很好理解，IE6~IE9瀏覽器實際尺寸32px*32px, 而IE10+等瀏覽器實際尺寸3px*3px，差別明顯，如何破？

1. 如果元素在固定容器中，且水平垂直居中佈局，無需破，效果一樣；
2. 如果元素固定定位，absolute化，同時.loading中的margin:0改成margin:-14.5px 0 0 -14.5px即可位置相容；
3. 自己看著辦微調等；

難道沒有尺寸也完全一樣的方法嗎？有！下面的偽元素就可以彌補。

3. ::before/::after偽元素登場

::before/::after偽元素就是:before/:after的進階版，IE8以及原生IE9支援後者，卻不認識前者。

上面提到了單標籤實現尺寸不一的問題，我們是不是可能這樣處理，CSS3 box-shadow生成的loading效果利用偽元素生成，這樣，就可以保證外部容器寬度一致了！但，::before/::after偽元素對於表單元素而言，幾乎就是剋星，因為表單元素都是大多都是單標籤，即使偶爾冒出個textarea也是醬油，button由於相容性問題，這裡實際上也無法大展拳腳。

怎麼破？

循序漸進，先使用最普通的div標籤，看下面的程式碼：

<div class="loading spin"></div>

普通的div誒~

/* 所有瀏覽器實現 */
.loading {
    width: 32px; height: 32px;
    background: url(loading-css3.gif);
}
/* IE10+以及其他 */
.loading::after {
    content: '';
    width: 3px; height: 3px;
    margin: 14.5px 0 0 14.5px;
    border-radius: 100%;
    box-shadow: ... ;
    position: absolute;    /* 可預設 */
}

上面程式碼實現有什麼問題呢？——雖然尺寸一致了，但IE10+以及其他現代瀏覽器::after偽元素生成的轉轉轉與背景圖片轉轉轉重複了，如下截圖效果：

於是，我們如果能夠讓IE10+瀏覽器無背景，IE10+瀏覽器使用::after偽元素就可以了，關鍵咋整呢？

4. 元素Hack與兄弟選擇器

CSS中有個兄弟選擇器~, 在“CSS radio/checkbox單複選框元素顯隱技術”一文中有展示，您可以觀摩觀摩。以及還有相鄰兄弟選擇器+

同樣的，既然，如:valid+input可以判斷是IE10+瀏覽器，那我們也可以使用:valid+input + ~判斷其兄弟元素也是IE10+瀏覽器，比方說下面的HTML程式碼：

<input class="hack">
<div class="loading spin"></div>

於是乎：

.hack:valid ~ .loading { /* IE10+瀏覽器 */ }

發現沒有，顛覆性的：CSS Hack不是CSS程式碼，而是HTML元素！

於是，結合上面的::after或::before偽元素生成，我們就可以得到我們等尺寸且完美漸進增強的效果了！

如下CSS:

/* 隱藏Hack元素 */
.hack { position: absolute; visibility: hidden; }

.loading {
    width: 32px; height: 32px;
    background: url(loading-css3.gif);
}
/* IE10+/FireFox/Chrome/Opera */
.hack:valid ~ .loading {
    background: none;
}
.hack:valid ~ .loading::before {
    content: '';
    width: 3px; height:3px;
    margin-left: 14.5px; margin-top: 14.5px;  /* 居中顯示 */
    border-radius: 100%;                      
    box-shadow: ...;
    position: absolute;
}

看看現在FireFox下的尺寸以及效果：

需要說明的
這裡demo中，起Hack作用的文字框和loading元素放在了一起，我們在專案中實際使用的時候，是不能這樣子的。你想啊，你的每一個loading效果旁邊都跟著個隱藏的文字框元素，豈不是很傻很天真。

實際使用的時候，這個隱藏的Hack文字框顯然是要放在很高的父級的，由於無法與body平起平坐，因此，個人建議直接放在body標籤之下（下一節要具體展示），然後，類似：

.hack:valid ~ div .loading { /* div僅示意，實際特定類名等 */ }

整個頁面只需要一個IE10+判斷的HTML Hack元素，你的loading效果可以自由使用。

5. CSS3 gradient的近乎完美處理

本段來自結尾，

由於IE9及其以下瀏覽器不認識CSS3 背景漸變。因此，對於IE10+我們需要重置掉的background: url(loading-css3.gif)就可以巧妙使用透明漸變背景實現。相關程式碼如下：

.loading {
    width: 32px; height: 32px;
    background: url(loading-css3.gif);
    /* IE10+ 去背景 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)));
    background:-moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0));
    background:-ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0));
    background:-o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0));
    background:linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0));
}

於是，由於IE10+才認識::before/::after，於是，再配合上面介紹的偽元素生成旋轉動畫，頁面單標籤，沒有hack元素，同時尺寸所有瀏覽器統一，簡直屌爆了！！

這裡之所以說“近乎完美”，是因為IE10瀏覽器向下自帶IE9瀏覽器是認識::before/::after偽元素的，因此，會有重複背景，不過，這種情況我覺得可以忽略，你覺得呢？

七、IE10+ CSS Hack介紹

如果你上面看得還算認真，就應該知道我要講的是什麼了。

如何寫IE10+瀏覽器的hack呢？如下處理：

1. body標籤下放入hack元素，如下截圖所示：
   
2. 比方說，我們的需要處理的元素全部都在#main的容器內，於是，IE10+的CSS Hack就是：

   .hack:valid ~ #main .ie10_other { }

   或者是：

   .hack:valid + #main .ie10_other { }

   差別在於，前者#main只要在Hack元素之後，後者需要是相鄰的兄弟，同時#main在Hack元素之後！

3. over!

核心CSS為：

.hack:valid ~ #main .loading { /* 啪啪啪 */ }

頁面效果如下（下圖為IE10下）：

這是IE6下的：

有人可能要說了，我只需要IE10瀏覽器的Hack，而不是IE10+和其他瀏覽器的Hack。這很簡單嘛：\0或\9不是IE10喜歡的零食嘛，在後面加上這個就好了，例如：

.hack:valid ~ #main .ie10 { color: green\0; }

補充，以上IE10 hack如果不滿意，您可以試試這個：_::-ms-reveal, .selector {}

八、其他一些小tip

1. 偽類:read-only/:read-write也是IE9不支援，IE10+以及其他瀏覽器都支援。但是，目前，FireFox瀏覽器下，需要私有字首才能使用，即:-moz-read-only/:-moz-read-write. 同時，需要注意的是，火狐的私有偽類必須與其他瀏覽器偽類分開寫，否則無效，什麼意思呢？看下面程式碼：

   <input class="test1" readonly="readonly" />
   <input class="test2" readonly="readonly" />

   .test1:read-only{background-color:#eee;}
   .test1:-moz-read-only{background-color:#eee;}
   .test2:read-only, .test2:-moz-read-only{background-color:#eee;}

   .test1所在文字框在所有IE10+及其他瀏覽器中是有#eee背景色的，而.test2所在的文字框在任何瀏覽器下都沒有效果。

   正是由於這個不能逗號並列書寫，因此，上面並沒有把:read-only放在實現方法的佇列中——雖然理論上很好用的。

   

2. 偽類中有個稱之為:empty的偽類，內容為空起作用，蠻有用的。有個疑問？如果我們使用::before/::after進行內容生成，那:empty偽類還起作用嗎？

   如下測試HTML以及CSS：

   <div class="empty"></div>

   .empty {
       width: 32px; height: 32px;
       background: url(loading-css3.gif);
   }
   .empty::before { content: ' '; display: block; }
   .empty:empty {
       background-color: #eee;
   }

   結果如下：
   

   表明，內容生成不會影響:empty偽類，換句話說就是，::before/::after不會影響:empty偽類的作用。

九、稱為結語的部分

基本上都是這周研究整理出來的東西，可能有遺漏，可能有更好的方法，例如，可以利用CSS3背景漸變打補丁，remove掉IE10+瀏覽器的背景圖片，這個自己還沒來得及研究。有個同事回家結婚去了，最近活有點多，沒有再多時間了。

擦，還是沒忍住，有花了些時間折騰了CSS Gradients下的處理，在結尾處嘮叨不太好，還是放到上面去吧~~

如果您發現本文有表述不準確的地方，歡迎大力指正。如果您有什麼其他的想法，歡迎交流。或評論，或郵件都可以！

感謝閱讀，希望本文的內容對你我的工作和學習有所幫助。