哆啦A梦欺骗了你！浏览器CSS3测试遭质疑
2015-02-09 23:29:42| 分类：
JSJQ&HTMLCSS
| 标签：
|举报
|字号大中小 订阅
首先，说明，此处只是告诫各位参与CSS3.0学习使用或者将要使用或者学习CSS3.0的朋友，不要完全信任网络资源，依靠网络资源，我们需要利用网络资源的方便和可取的部分，结合自己的理解，学好，理解好！
当然，个人不敢妄加评论网络牛人，只是秉着一份真诚的心，抱着学习的态度看待问题，大牛们，你们怎么看！
之前浏览器之家有报道过日本牛人编写的一个浏览器对CSS3支持的哆啦A梦演示。在该演示中，IE全灭，甚至可以说是惨不忍睹。Chrome支持得相当完美。 实际上，不管Firefox也好，IE也好，浏览器都有很多独有的特性，要写一个其他浏览器不能渲染的页面太容易了。在演示CSS标准的时候使出这招，不给出任何说明，不知道高手们怎么看待这个问题。在 Chrome 下支持最完美
这个相当有趣的实验，一方面让Webkit浏览器扬眉吐气了一番；另一方面也显示出IE的残缺。但最近有人对这个测试表示怀疑，指该测试使用了偏向性代码，测试的CSS代码偏向于支持Chrome，Safari等Webkit浏览器。下面是图解说明： 各个内核浏览器效果对比
相当悲剧的IE家族
上面两张图是这个CSS3浏览器测试页面的测试结果，从近一年来的浏览器内核大战的角度来看，此网页所表达的意思就是：使用Webkit引擎的Safari和ChromeCSS3的支持最好，Firefox其次，因为Firefox无法实现CSS3的动画效果（即哆啦A梦的眼睛移动动画渲染失败），其他浏览器CSS3渲染的表现则很差。但事实真的是这样吗？我们查看下这个演示的源码，会发现有很多针对特定浏览器内核编写的代码：
下面是实现哆啦A梦眼睛转动的部分代码：
div.black_eye{
position:absolute;
width:15px;
height:15px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
background:#333;
z-index:21;
-webkit-animation-name: cate;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 200;
}
最后一段居然是
Webkit 特有代码注意图中，-webkit- 开头的属性。就是哆啦A梦的黑色眼睛部分的CSS3移动特效，据闻这是被指定了webkit 内核only，即只有使用webkit 内核的Chrome和Safari可以使用。IE之类默认根本就不支持这个特性，其结果可想而知。
实际上，不管Firefox也好，IE也好，浏览器都有很多独有的特性，要写一个其他浏览器不能渲染的页面太容易了。在演示CSS标准的时候使出这招，不给出任何说明，不知道高手们怎么看待这个问题。
当然我们也能看到在其他CSS代码部分，比如face部分，也给出了针对Mozila和一般处理方式的代码，唯独上面的眼睛处，只看到webkit 内核指定。
#face{
position:relative;
width:310px;
height:300px;
border-radius:146px;
-webkit-border-radius:146px;
-moz-border-radius:146px;
background:#07beea;
background: -webkit-gradient(linear, right top, left bottom, from(#fff) ,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95, #000), to(#444));
background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%);
border:#333 2px solid;
top:-15px;
box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
-webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
-moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
}
网友反馈：因为IE不支持这类型的代码，即使假设出同类型的代码，IE还是不能支持，这种专有的以内核开头的代码，是特定浏览器在CSS标准没有统一之前为了各自实现CSS3效果也编写的。但IE系列，无论怎么编写，使用什么代码，因为内核问题还是解析不了。Tips:解释下关于浏览器独有的CSS特性：比如Mozilla浏览器支持一些扩展的CSS是以-moz开头的。这些措施包括了一些功能，包括圆形边界，并能够指定不同的方块的宽度和高度的计算，在非标准方式下，这种css在Mozilla浏览器下执行计算更容易得到支持。
最后再次说明：网络上不乏有厉害的大人物，我们只需要借鉴，不觉得的信任，但是却又要学取别人的长处，这才是真正的好的学习态度。
评论这张
转发至微博
转发至微博
关闭
玩LOFTER，免费冲印20张照片，人人有奖！
我要抢>
<#--最新日志，群博日志-->
<#--推荐日志-->
<#--引用记录-->
<#--博主推荐-->
<#--随机阅读-->
<#--首页推荐-->
<#--历史上的今天-->
<#--被推荐日志-->
<#--上一篇，下一篇-->
<#-- 热度 -->
<#-- 网易新闻广告 -->
<#--右边模块结构-->
<#--评论模块结构-->
<#--引用模块结构-->
<#--博主发起的投票-->
评论