HTML5不仅仅是Html规范的当前最新版本

发布时间:2022-12-28编辑:zhushican阅读(397)

HTML5不仅仅是Html规范的当前最新版本,也代表了一系列Web相关技术的总称,其中最重要的3项技术就是HTML5核心规范,CSS3和JavaScript。HTML5为用户提供了一个新增元素Canvas,以及伴随这个元素而来的一套编程接口--Canvas API,可以在页面上绘制出任何用户想要的、非常漂亮的图形与图像;CSS3新增了一些用来实现动画效果的属性,通过这些属性可以实现以前通常需要使用JavaScript或Flash才能实现的效果;在技术层面上,HTML5+CSS3互相配合与支持可进行响应式Web设计。本模块将对HTML5的过渡,变形,动画,画布、响应式网页设计等高级特性进行详细讲解。

HTML5不仅仅是Html规范的当前最新版本

目前而言CSS3并没有完全统一,还在不断完善新的属性,也没有一款能完美兼容所有CSS3标准的浏览器,浏览器厂商为了实现这些属性,采用前缀方法,CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式,各大厂商前缀列表如图6-1所示。                           

HTML5不仅仅是Html规范的当前最新版本

                           图6-1 浏览器厂商前缀表示

例如,一个CSS3圆角的代码格式如下:

 

-webkit-border-radius: 50%;

 

-o-border-radius: 50%;

 

-moz-border-radius: 50%;

 

-ms-border-radius: 50%;

 

CSS3代码中(暂时)需要写上这么多前缀,他们的书写顺序是是先写私有的CSS3属性,再写标准的CSS3属性, 代码格式如下:

 

-webkit-transform:rotate(-3deg);  /*为Chrome/Safari*/

 

-moz-transform:rotate(-3deg);  /*为Firefox*/

 

-ms-transform:rotate(-3deg);  /*为IE*/

 

-o-transform:rotate(-3deg);  /*为Opera*/

 

transform:rotate(-3deg); /*为nothing*/

 

什么时候我们可以去掉一个属性的CSS3前缀呢?答案是,当一个属性成为标准,并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候。以border-radius为例:

 

-moz-border-radius: 12px; /*  FF1-3.6 */

 

-webkit-border-radius: 12px;  /* Saf3-4, iOS 1-3.2, Android <1.6 */

 

border-radius: 12px;

 

Firefox、Safari以及Chrome都支持border-radius属性了,我们就没有必要写以上两条了,代码格式如下:

 

border-radius: 12px;

 

我们知道CSS3的很多属性为实验属性, prefixfree.js解决方案,可以帮你自动识别浏览器,生成对应的CSS3样式前缀,这样就可以直接当作标准属性来使用了。引用方式格式如下:

 

<script src=“http://leaverou.github.com/prefixfree/prefixfree.min.js”></script>

 

注意:本模块中的所有案例假设都是引用了prefixfree.js来解决引用前缀的问题


标签HTML5

评论