哆啦A梦欺骗了你!浏览器CSS3测试遭质疑

这个相当有趣的实验,一方面让Webkit浏览器扬眉吐气了一番;另一方面也显示出IE的残缺。但最近有人对这个测试表示怀疑,指该测试使用了偏向性代码,测试的CSS代码偏向于支持Chrome,Safari等Webkit浏览器。下面是图解说明:


上面两张图是这个CSS3浏览器测试页面的测试结果,从近一年来的浏览器内核大战的角度来看,此网页所表达的意思就是:使用Webkit引擎的Safari和ChromeCSS3的支持最好,Firefox其次,因为Firefox无法实现CSS3的动画效果(即哆啦A梦的眼睛移动动画渲染失败),其他浏览器CSS3渲染的表现则很差。但事实真的是这样吗?
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 特有代码
实际上,不管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浏览器下执行计算更容易得到支持。
哆啦A梦欺骗了你!浏览器CSS3测试遭质疑的更多相关文章
- 多啦爱梦~多啦A梦CSS3测试源代码
先直接看图片,感觉一下!一直以来,我们都在说浏览器对CSS3支持度这个问题.可是,鉴于知识认识水平问题,又没几个人真正了解CSS3是什么东西,和它在网站显示上的重要性.现在好了,日本某位大神写了个CS ...
- css3之3D 旋转立方体与哆啦A梦
主要记录两个css3 3D转换的示例 ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...
- CSS源码之纯css3制作的哆啦a梦图片
本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...
- html打造动画【系列4】哆啦A梦
我相信每个人的童年都有一个哆啦a梦,一个小小的肚皮里装满了不可思议的哆啦a梦,一个在你无助伤心的时候陪在你身边的哆啦a梦,一个陪你胡思乱想陪你吃铜锣烧的哆啦a梦~今天我们就来画一个我们心中的哆啦a梦吧 ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- 创建【哆啦A梦】风格字体
学习canvas,为作画.对于一个毫无逻辑思维的人简直遭罪啊~想象坐标坐标坐标啊- - 好啦言归正传,基于本月16号,在春熙路IFS展出120只哆啦a梦,以及canvas的作用,在此介绍一种PS的美化 ...
- 哆啦A梦 canvas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 哆啦A梦连连看游戏源码完整版
这个源码是哆啦A梦连连看游戏源码完整版,也是安卓教程网android.662p.com分享过来的,哆啦A梦大家一定再熟悉不过了,这次登场的角色你能认出全部吗?赶紧把相同的小图标全部消除吧,一起体验下! ...
- 纯css画哆啦A梦
今天有点无聊,照着网上的图写了个哆啦A梦,无技术可言,纯考耐心. <!doctype html> <html lang="en"> <head> ...
随机推荐
- DX与OpenGL投影矩阵的区别
之前学习DX和OpenGL时到是知道一点,但是没仔细研究过,只是跟着教程抄个公式就过了,看双API引擎时发现转换时是个问题,必须搞懂,gamedev上找了个解释,希望用得上. https://www. ...
- ubuntu服务器搭建DVWA站点
把DVWA里面的文件夹拷贝到/var/www/html里面去 1.安装之前先更新系统 sudo apt update 2.安装Apache2 sudo apt install apache2 3.安装 ...
- OpenCV从2到3的过渡
与版本2.4相比,OpenCV 3.0引入了许多新算法和功能.有些模块已被重写,有些已经重组.尽管2.4中的大多数算法仍然存在,但接口可能不同.本节描述了一般性的最显着变化,过渡操作的所有细节和示例都 ...
- 分享《机器学习实战基于Scikit-Learn和TensorFlow》中英文PDF源代码+《深度学习之TensorFlow入门原理与进阶实战》PDF+源代码
下载:https://pan.baidu.com/s/1qKaDd9PSUUGbBQNB3tkDzw <机器学习实战:基于Scikit-Learn和TensorFlow>高清中文版PDF+ ...
- elasticsearch 安装,以及遇到的问题总结
系统.软件环境: Centos 6.5 elasticsearch 6.1.1 elasticsearch 安装的话是很简单的,但是安装完成启动的时候报错,下面我就一一的来描述错误,并提供相应的解决方 ...
- Linux基础理论
本节内容 1. Linux的安装及相关配置 2. UNIX和Linux操作系统概述 3. Linux命令及帮助 4. 目录结构 6. 用户.群组和权限 7. 用户.群组和权限的深入讨论 1 ...
- JDBC创建链接的几种方式
首先,使用java程序访问数据库的前提 数据库的主机地址(ip地址) 端口 数据库用户名 数据库用户密码 连接的数据库 代码: private static String url = "jd ...
- 1.开始学习ASP.NET MVC
Hello,大家好! 好久没有开始记录博客了,是时候开始分享一下了,这个系列主要为零基础的同学,量身打造的.废话不多说,我们开干! 什么是ASP.NET MVC MVC(Model-View-Cont ...
- ASP.NET MVC下使用AngularJs语言(四):$window.alert
判断文本框是否有填写,没有填写使用angularjs的$window.alert来提示用户. 创建一个ASP.NET MVC控制器: 接下来是准备一个angularjs的控制器: pilotApp.c ...
- linux中ftp的安装过程记录[运维篇]
安装FTP的全过程记录,对于相同情况希望有所帮助.[centOS] 1.查询本机是否安装vsftpd: rpm -qa |grep vsftpd : 2.安装ftp服务 yum install vsf ...