博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
哆啦A梦欺骗了你!浏览器CSS3测试遭质疑
阅读量:5008 次
发布时间:2019-06-12

本文共 2341 字,大约阅读时间需要 7 分钟。

首先,说明,此处只是告诫各位参与CSS3.0学习使用或者将要使用或者学习CSS3.0的朋友,不要完全信任网络资源,依靠网络资源,我们需要利用网络资源的方便和可取的部分,结合自己的理解,学好,理解好!
当然,个人不敢妄加评论网络牛人,只是秉着一份真诚的心,抱着学习的态度看待问题,大牛们,你们怎么看!
哆啦A梦欺骗了你!浏览器CSS3测试遭质疑 - 丁竹 - 竹抱苍松
之前浏览器之家有报道过日本牛人编写的一个浏览器对CSS3支持的哆啦A梦演示。在该演示中,IE全灭,
甚至可以说是惨
不忍睹。Chrome支持得相当完美。 实际上,不管Firefox也好,IE也好,浏览器都有很多独有的特性,要写一个其他浏览器不能渲染的页面太容易了。在演示CSS标准的时候使出这招,不给出任何说明,不知道高手们怎么看待这个问题。
哆啦A梦欺骗了你!浏览器CSS3测试遭质疑 - 丁竹 - 竹抱苍松
在 Chrome 下支持最完美
这个相当有趣的实验,一方面让Webkit浏览器扬眉吐气了一番;另一方面也显示出IE的残缺。但最近有人对这个测试表示怀疑,指该测试使用了偏向性代码,测试的CSS代码偏向于支持Chrome,Safari等Webkit浏览器。下面是图解说明:
哆啦A梦欺骗了你!浏览器CSS3测试遭质疑 - 丁竹 - 竹抱苍松
 各个内核浏览器效果对比 
哆啦A梦欺骗了你!浏览器CSS3测试遭质疑 - 丁竹 - 竹抱苍松
 相当悲剧的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浏览器下执行计算更容易得到支持。
最后再次说明:网络上不乏有厉害的大人物,我们只需要借鉴,不觉得的信任,但是却又要学取别人的长处,这才是真正的好的学习态度。

转载于:https://www.cnblogs.com/herbertchina/p/4306789.html

你可能感兴趣的文章
Vue 全家桶介绍
查看>>
java基础
查看>>
Vue运用
查看>>
[转载]基于ANSYS经典界面的单个螺栓联接的分析-1
查看>>
学习web的road-map
查看>>
url模块和querystring模块
查看>>
.net core入门 部署到Linux实践
查看>>
WPF Bitmap转Imagesource
查看>>
Java compiler level does not match the version of the installed Java project facet.解决方法
查看>>
笔记_小结
查看>>
Linux lsof命令 umount U盘
查看>>
自定义Font
查看>>
Matlab绘制透明平面(二元函数)
查看>>
基于二部图的推荐
查看>>
POJ 1543
查看>>
linux svn 服务端搭建
查看>>
maven用途、核心概念、用法、常用参数和命令、扩展
查看>>
linux时间同步ntp服务的安装与配置
查看>>
django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE的解决办法...
查看>>
网络编程-socket并发-粘包问题
查看>>