| 王成
本文轉載自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的時候有幾個需要注意的地方:
respond.min.js只能識別網頁地址是http://開頭的網址,它只會給http://開頭的網頁提供媒體查詢支持,我們在本地編寫代碼調試的時候一般是使用file:///形式瀏覽的。
解決辦法:開啟本地服務器,(打開PHPstudy使用localhost或者127.0.0.1訪問就好了)或者上傳到云端服務器。
提供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以下版本用戶提供媒體查詢了。效果如下圖所示:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。