| 王成

本文轉載自SegmentFault

WebP格式介紹

WebP是Google開發的一種新的圖片格式，它支持有損壓縮、無損壓縮和透明度，壓縮后的文件大小比JPEG、PNG等都要小。所以可以節省帶寬，減少頁面載入時間，節省用戶的流量。

Android和iOS的App只要引入Google提供的解碼庫，都可以很輕松的支持WebP格式。不過在Web上，WebP的支持還不是很廣泛。根據Can I Use的數據，目前只有Chrome、Opera瀏覽器，以及Android的WebView是支持WebP的。但是WebP圖片有這么多優點，我們能不能在Web頁面中使用呢？可以。這篇文章就來討論一下這個問題。

把已有的圖片轉換為WebP格式

要使用WebP格式，需要將你網站用到的圖片都制作一份WebP格式的版本，如果你使用CDN服務商，它們一般都會提供轉碼到WebP格式的選項。如又拍云：

增加這樣的配置后，我們可以通過給圖片URL加上相應的后綴，來使用WebP格式的版本資源。

你也可以使用Webpack、Gulp的插件來批量轉換圖片格式。這里不贅述。

在瀏覽器中使用WebP格式

因為不是所有瀏覽器都支持WebP格式，我們就有兩種思路：一個是只在支持WebP格式的瀏覽器中使用WebP格式；一個是讓不支持WebP格式的瀏覽器可以支持WebP。

姿勢一： <Picture>標簽

<Picture>是HTML5中的一個新標簽，類似<Video>它也可以指定多個格式的資源，由瀏覽器選擇自己支持的格式進行加載。

<picture class="picture">

<source type="image/webp" srcset="image.webp">

<img class="image" src="image.jpg">

</picture>

如果瀏覽器支持WebP格式，就會加載Image.webp，否則會加載Image.jpg。

即使瀏覽器不支持<Picture>標簽，圖片仍然會正常顯示，只是CSS可能無法正確選取到Picture元素。比如在IE8中，下面的CSS就不會起作用：

.picture img { width: 100px; height: 100px;}

但是可以這樣來給圖片寫樣式：

.image { width: 100px; height: 100px;}

即使瀏覽器使用的是WebP格式的圖片，最終還是會應用img元素的樣式。

不過只要使用了HTML5Shiv，使舊的瀏覽器支持這個標簽，CSS選擇器就可以正常使用了。這種方法是最簡單的，但是不能作用于CSS中的圖片（如背景）。

姿勢二：使用JS替換圖片的URL。

我們有很多的頁面往往會用到圖片的“懶加載”——通常是把圖片的URL放在Img元素的一個自定義屬性中，然后用JS在適當的時機將URL賦值給SRC屬性。用類似的原理，我們可以根據瀏覽器是否支持WebP格式，給Img元素賦予不同的SRC值。

首先我們需要用JS來判斷瀏覽器是否支持WebP格式，方法是給瀏覽器一個WebP格式的圖片，看瀏覽器能否正確渲染。這種方法是異步的，所以需要把后續的操作寫在回調函數中。我們可以將結果存儲在LocalStorage中，這樣之后就不用再次檢查了。

function checkWebp(callback) { var img=new Image();

img.onload=function () { var result=(img.width > 0) && (img.height > 0);

callback(result);

};

img.onerror=function () {

callback(false);

};

img.src='data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';

}

然后用下面的代碼來根據是否支持WebP替換相應的SRC。

function showImage(useWebp){ var imgs=Array.from(document.querySelectorAll('img'));

imgs.forEach(function(i){ var src=i.attributes['data-src'].value; if (useWebp){

src=src.replace(/\.jpg$/, '.webp');

}

i.src=src;

});

}

checkWebp(showImage);

這種方式的優點是可以與已有的懶加載函數相結合。而且使用JS，我們還可以處理CSS中的圖片（如背景圖等）。

姿勢三：使用JS解碼WebP圖片

既然WebP的解碼器是開源的，那么能否用JS來實現呢？當然可以，有人就用JS寫出了WebP的解碼器。引入這個JS庫，就是將所有的WebP圖片用JS解碼后轉換為Base64，然后替換掉原來的URL，這樣就可以讓原本不支持WebP的瀏覽器正常顯示WebP了。這個庫的使用方法非常簡單，看網頁的說明即可。

這種方法的缺點是，因為JS要解碼WebP圖片，需要在此異步請求SRC中的URL（不過因為圖片本身之前被下載了一次，直接使用了緩存）；而且JS解碼比較慢，對性能有影響，可能需要一段時間才能顯示出圖片來。

以上就是在瀏覽器中使用WebP圖片的幾種方法，可以根據自己的實際情況選用。在我們的實踐中，使用了WebP格式后，圖片的體積普遍縮小了1/3以上，既加快了加載的速度，還節省了用戶的流量，我們十分推薦從現在就開始使用這種格式。

又小拍也關注WebP一段時間呢，不但關注了WebP，還關注了動態WebP，不久之后會有驚喜帶給大家哦。

又拍云的處理功能實在太豐富，在圖片處理方面，略縮圖任意尺寸更改，全網一鍵更新所有圖片，打水印，URL防盜鏈等。最近上線的又拍直播云，除了直播加速、推拉流外，更具有豐富的美顏、濾鏡、水印、防盜鏈、鑒黃、禁播等功能，幫助直播平臺快速上線直播業務，快來試試吧~

文章總結了一下在切圖工作中常見的關于瀏覽器尤其是IE8下兼容的一些問題，為了使頁面更好的兼容各個瀏覽器，達到更好的用戶體驗。

1. Respond.min.js

我們在寫頁面時，經常會碰到頁面在電腦端自適應的頁面，并且要求兼容到IE8瀏覽器，因為是自適應的頁面，所以我們會用到Media Query,

即: “@media(max-width:1200px){},” 但是這個屬性在IE8瀏覽器以及IE8以下是不支持的，這時我們可以加載一個js文件,使 IE8以及IE8以下版本也支持Media Query屬性; 即：

Respond.min.js是一個快速、輕量的js文件，

用于為IE6-IE8以及其他不支持CSS3 Media Queries的瀏覽器提供媒體查詢的min-width 和max-width特性，實現響應式的網頁設計。

其中Media Query 的兼容性如下:

使用方法：引入respond.min.js，但要在css的后面(越早引入越好，在IE下面看到頁面閃屏的概率越低，因為做出css會先渲染出來，如果respond.min.js的加載的很后面，這是重新根據media Query解析出來的css會再改一次頁面的布局)

<!--[if lt IE 9]>

<script src="js/respond.min,js"></script>

<![endif]-->

其中：“<!--[if lt IE 9]>”是“html if條件注釋”它的含義是當IE瀏覽器版本小于IE9瀏覽器版本時，就運行這個js文件，否則就不運行這個js文件(比如：在chorme瀏覽器下是不識別的)

2. Htmlif條件注釋

<!--[if !IE]><!-->除IE瀏覽器外都可識別<!--<![endif]--> <--[if IE]>所有IE可識別<![endif]--> <--[if IE6]>僅IE6可識別<![endif]--> <--[if lt IE6]>IE6以及IE6以下版本可識別<![endif]--> <--[if gte IE6]>IE6以及IE6以上版本可識別<![endif]--> <--[if lt IE9]>IE9以及IE9以下版本可識別<![endif]-->

注意：圖中標識的紅線是空格，必須嚴格按照這個樣式來寫，否則ie9上會出現顯示這些字符：

3. html5shiv.min.js

我們在寫頁面時，html5的新增標簽在IE9以下的版本是不識別的，所以在IE8以及以下的版本內容是錯亂的，解決方案是加載一個js文件，可以讓html5的新增標簽在ie8以及以下也能正常顯示。

用于解決IE9以下版本的瀏覽器對HTML5新增標簽不識別，并導致css不起作用的問題。

<!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <![endif]-->

其中html5新增的標簽有：<article>、<aside>、<audio>、<bdi>、<canvas>、<command>、<datalist>、<details>、<embed>、<figcaption>、<figure>、<footer>、<header>、<keygen>、<mark>、<meter>、<nav>、<output>、<progress>、<rp>、<rt>、<ruby>、<section>、<source>、<summary>、<time>、<track>、<video>、<wbr>

4. CSS3個瀏覽器兼容問題

1. Css3選擇器的兼容情況

注意：

l first-child 兼容到IE8+(包括IE8)

l Last-child: 兼容到IE9+(包括IE9)

l nth-child(n):兼容到IE9+(包括IE9)

l 解決方案，詳見【7.偽類兼容問題】

2.Css3屬性的兼容情況

注解：

l Css動畫只能支持到ie10+(包括ie10)，Chrome和Safari是沒有問題的。

l 如果是ie8以下的動畫需要用jquery1.x的動畫函數實現，jquery2.x是不支持ie9以下的瀏覽器的動畫效果的。

l 透明度(opacity)和 rgba() 僅支持到ie9+(包括ie9);如果要兼容到IE8，就要用到濾鏡,用法：

background: rgba(157,151,162,0.56);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#569d97a2",endColorstr="#569d97a2");

例如：其中“#569d97a2”中后六位(9d97a2)是顏色的十六進制的色值，前兩位(“56”)指的是不透明度代表不透明度是 0.56。

l Border radius, box-shadow: 支持到IE9+(包括IE9)，IE8的解決方案：詳見【6.PIE.htc】

5. IOS的字體的問題

我們在寫頁面是會發現，數字和英文在ios系統中顯示異常，經過研究發現，IOS系統中是識別微軟雅黑的字體的，所以在定義字體的時候要寫上IOS系統的默認字體，IOS默認的字體為

中文字體：STHeiti

英文和數字：Helveticas

所以在定義字體的時候，要注明Ios

font-family:"微軟雅黑","Helvetica";

6. PIE.htc

我們知道IE8瀏覽器不支持css3的屬性，這里PIE實際上是指的是一個名為pie的htc文件，即pie.htc，使用CSS的behavior行為，可以調用此文件，然后使IE8也能實現一部分常見的CSS3效果，如：圓角(border-radius)、漸變(gradient)、陰影(box-shadow)。

CSS代碼如下(以box-radius為例)：

[codesyntax]

.pie_radius{ width:360px; height:200px; background:#34538b; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; behavior: url(PIE/PIE.htc);behavior: }

[/codesyntax]

7. 偽類兼容問題

在頁面中我們通常會用到偽類，以country項目為例，

為了時左右的內容跟上部分對齊，我們常常使用偽類消除左右兩邊的間距，這樣做是正確的，但是偽類的兼容性不好，只能兼容到IE9+，如果客戶要求的兼容性是IE9的話，這樣做沒有任何問題！

但是，如果客戶要求兼容性是IE7或是IE8的話，這樣做就會出錯，因為在IE7和IE8下是不支持偽類的。我們可以用另一種方法解決這個問題。

1) 不必清掉左右兩邊的內容的左右邊距

2) 給循環的元素的父級一個較大的寬度，使其即使在不清掉左右邊距的情況下，也能保證內容布局不錯亂，跟設計一致！

3) 此時這個父級的寬度顯然就跟設計不一致了，可以給這個父級再加一個父級，這個父級的寬度要跟設計一致，并為它加上{overflow:hidden}即可。

如下圖: 去掉.sectionSeven .listType的偽類之后，給”.listType” 的父級“.sectionSeven” 的寬度由之前的1000px增加到1010px(增加10px是因為listType的右邊距是10px);這樣寬度夠大，內容就不會錯亂，然后為了保持跟設計圖一致的寬度，再給.sectionSeven的父級.bigSection的寬度設置1000px(設計圖的寬度),同時設置{overflow:hidden},即隱藏掉多出來的部分即可。

文/切版網

http://www.qieban.cn/10-jianrongxing-qietu

家在第一次做網站的時候，一般都是拿別人的模板來直接用，很少有人會為自己的個人網站做個模板，甚至是從頭到尾都自己寫代碼的。特別是現在最為流行的響應式網站，不是專業的寫起來是相當的麻煩，而且小問題多多，比如今天就要說到的問題。要知道在微軟提供的IE瀏覽器問世的前夕是沒用響應式網站的，那么要想在IE上瀏覽響應式網站會怎么樣呢？

大家是不是經常在瀏覽網頁的時候出現下圖這樣的情況

出現這個問題的原因是什么呢？細心的朋友就會發現在上圖的瀏覽器地址欄后面有個IE的圖標，這就表示我們瀏覽這個網頁是通過IE的內核瀏覽的。大家都知道，自適應一般采用@media的媒體查詢方式進行，雖然大多數瀏覽器都支持，但IE的老版本即IE9以下都是不支持媒體查詢的。這時，我們就需要為IE9以下版本的瀏覽器提供媒體查詢支持，經過大量百度，終于找到了方法。

使用respond.min.js可以為IE9以下版本提供媒體查詢支持。資源百度上有很多，這里就不提供了，以免違反規則。

在使用respond.min.js的時候有幾個需要注意的地方：

1. respond.min.js只能識別網頁地址是http://開頭的網址，它只會給http://開頭的網頁提供媒體查詢支持，我們在本地編寫代碼調試的時候一般是使用file:///形式瀏覽的。

   解決辦法：開啟本地服務器，（打開PHPstudy使用localhost或者127.0.0.1訪問就好了）或者上傳到云端服務器。

2. 提供respond.min.js支持的代碼必須在你加載css樣式之后。也就是說先加載你的css樣式，在加載respond.min.js。使用方法如下：

   <link rel="stylesheet" href="css/main.css"/><script src="js/respond.min.js"></script><script src="js/html5shiv.js"></script>

做到以上兩點，基本上你的網頁就能成功為IE9以下版本用戶提供媒體查詢了。效果如下圖所示：