| 王成

本文转载自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以下版本用户提供媒体查询了。效果如下图所示：