建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > html/xhtml >

你的站点如何才能使用HTML5(2)

时间:2010-07-26 22:39来源: 作者: 点击:
圆角 (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+) -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; 文本阴影 (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+) t

    圆角 (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+)

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

    文本阴影 (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+)

    text-shadow: 5px 5px 3px #CCC;

    区块阴影(Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+):

    -webkit-box-shadow: 10px 10px 5px #666;

    -moz-box-shadow: 10px 10px 5px #666;

    box-shadow: 10px 10px 5px #666;

    哪些特性有一天你会用到?

    这个目录里包含了开发人员和设计师已经想了很多年的特性。可惜的是,在它们能够在现实世界真正使用之前,可能还得再等上几年时间。

    智能表单,前面已经提到过了,但是其实还有很多更好用的元素没有提及,但在更广泛的支持之前,是没有办法使用的。

    滑动选择器:

    <input type="range" min="0" max="100" step="2" value="50">

    颜色选择器:

    <input type="color">

    日期选择器:

    <input type="date">

    带有正则验证的输入框:

    <input type="text" pattern="[0-9]{13,16}">

    必须输入的输入框:

    <input type="text" required>

    所有这些标签都没有跨浏览器,跨平台实现支持,不过当那天到来的时候,你一定会很向往使用这些标签的。

    打印式布局,另一个CSS3的特性,全面实施尚需好几年的时间。给设计师们提供了多列布局的特性。目前只能在Firefox和Safari的测试用例里实现。

    -moz-column-count: 3;

    -moz-column-gap: 20px;

    -webkit-column-count: 3;

    -webkit-column-gap: 20px;

    地理位置检测,随着基于位置的服务增长,例如Gowalla和Foursquare,对于浏览器来说,知道用户 在哪里是很有用的。所以,基于手机的移动浏览器率先实现这个特性也就不足为奇了,Firefxo 3.5和Safari 5已经开始提供地理定位的支持了。(Chrome的类似服务是通过Gears实现的,不过正在逐步转向到HTML5上面)。

    离线工作和本地存储,在你没发现你没有网络连接的时候,将数据存储在云端是非常伟大的主意;或者你有一个应用程 序,需要处理大量的数据,这样就不得不频繁地在服务端和客户端之间往来,比你想像得到的还要多;又或者你的移动数据流量有限,你想在手机上存储更多的数据 以避免太多的流量损耗,这个时候的答案就是,使用本地储存来使应用程序离线工作,当连线的时候再同步到云端的功能。

    支持此功能的浏览器有:Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+。

    画板、动画和变换效果,HTML5的承诺之一使用Canvas元素和一些CSS3属性可以实现是全说明和全动画的网站。这来自2010年7月12号的标准。

 

    使用最尖端的HTML5的捷径

    如果你已经迫不及待地想IE8老死掉,那么,有很多种方法可以跳过它继续往前——再说一次,依然取决于你的访客。查看一下你的站点的访问日志,看看 访问量最多的浏览器标头是什么。这其中有一种方法就是,例如,使用Google的Chrome Frame,给IE嵌入了一个Chrome实例,如果你明白你站点的访问者可能已经安装了GCF[Google Chrome Frame],那么你可以在你的HEAD里加上一行META标签,强制IE浏览器使用GCF来显示你的网站:

    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    [编者:不过提醒你的就是,这样做会使得原来的IE=7的IE7兼容模式失效,如果选择请自己权衡。]

    再加上一小段的Google提供的脚本,可以让没有安装GCF的用户跳转到GCF的安装页面,那么你也许可以跳过IE的限制。[编者:我疯了,怎么看怎么像是免费为GCF打广告来带来免费流量……]

    列举在本篇文章里的元素只是当前HTML5和CSS3草案中的一小部分,如果你不得不使用另外的一些新特性,那么去检查一下现有的开源项目是很有必要的,这样可以将浏览器兼容性的问题降到最低。

    许多媒体在报道HTML的时候都把焦点放在立场上面,什么“不到2022年”,什么“Flash杀手”之类的。现实是,HTML5是长期以来的需要和对久未更新的HTML4的一次全新升级——所以,今天你就可以开始使用它了。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片