项目一 第三阶段 任务23 测试及兼容性设置-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 制作响应式网页 第三阶段 能描述各个浏览器对HTML5及CSS3的兼容情况； 能根据浏览器兼容性情况使用CSS3前缀解决兼容性问题； 能够使用W3C提供的验证工具对D清单页面进行验证，并能根据验证结果修改不符合W3C规范的代码。 任务目标 任务23测试及兼容性设置 1、完善上一任务的D清单网页，让该网页的兼容性更强。 2、使用W3C对D清单页面HTML和CSS代码进行验证，确认是否符合W3C标准。W3C CSS验证测试页面如图1-23所示。 任务描述 图1-23 W3C HTML和CSS验证测试页面 任务23测试及兼容性设置 完成对D清单页面进行兼容性测试和W3C验证测试，需要： 学习常见的浏览器及其对H5的兼容性； 学习并为D清单页面添加CSS3浏览器前缀； 对D清单页面代码进行W3C认证测试。 任务分析 任务23测试及兼容性设置 知识与技能准备 目前，支持CSS3和HTML5的浏览器变得越来越多，包括最新版的Microsoft Edge浏览器。但是，由于CSS3和HTML5的W3C规范在不断的完善，浏览器的兼容性也在不断的更新。 目前IE，Firefox，Opera，Chrome，Safari五大主流浏览器对 HTML5 和 CSS3 各种特性都有比较好的支持，HTML5正在成为开发的主流。 1、五大浏览器对CSS3和HTML5兼容性比较 知识与技能准备 1.1 CSS3属性 目前我国用户浏览器使用情况如下图： 注：第3、4、6列分别为Firefox、Chrome和Opera，数据来自http://caniuse.com/usage-table。 各浏览器版本对CSS3、HTML5、JS、JS API、Other、Security、SVG等的支持情况由于版本不断更新，请自行前往http://caniuse.com/#comparison了解。 1、五大浏览器对CSS3和HTML5兼容性比较 图1-23-1 国内占98.09%市场份额浏览器各版本使用情况 知识与技能准备 浏览器一直都在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法存在波动时，它们提供针对浏览器的前缀。现在主要流行的浏览器内核主要有： （1）Trident内核：主要代表为IE浏览器； （2）Gecko内核：主要代表为Firefox； （3）Presto内核：主要代表为Opera； （4）Webkit内核：产要代表为Chrome和Safari。 针对这些不同内核的浏览器，CSS3部分属性需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性。 2、CSS3前缀 知识与技能准备 2、CSS3前缀 表1-23-2 CSS3前缀 这样编写代码，无形之中给前端人员增加了不少工作量，那么如何在编写CSS时不需要添加浏览器的私有前缀，又能让浏览器识别呢？ 我们可以通过引用一个prefixfree脚本来解决这个问题。只需要在.html文件中插入一个prefixfree.js文件（建议把这个脚本文件放在样式表之后）。 添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。 prefixfree脚本仅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。 但是对于开发人员来说，使用这个方法也是需要调试的。一旦客户端禁用了JavaScirpt，它的功能会失效。另外对于客户体验来说，也有一定影响。 打开Visual Studio Code，输入如下标签： 课堂练习1-23-1 制作如下图效果的图像 html 1 <div></div> css 1 2 3 4 5 6 7 8 9 div{ width:200px; height:100px; background: #80A060; background-image: linear-gradient(transparent, rgba(10,0,0,.3)); /*线性渐变*/ border-radius: 50%; box-shadow: 1em 2em 4em -2em black; /*阴影*/ transform: rotate(15deg); } js 1 2 <script src="prefixfree.min.js" type="text/javascript"> </script> 图1-23-2图像 知识与技能准备 在本教程的项目一中我们已经介绍过W3C标准了，知道我们在建设网站时应该要保证代码符合W3C规范。 那要如何验证我们编写的代码符合W3C标准呢？ W3C本身已经提供了该验证服务