网页前端设计之HTML5表单特性的小技巧

在网页设计过程中经常会有一些容易被我们忽略的细节,大部分主流的浏览器会为我们提供一些形如自动完成、自动更正、自动大写、拼写检查、语音输入等人性化特性,但是并不是任何场景下我们都需要这些特性,比如对于电子邮件地址的输入,我们就不需要自动更正、自动大写、拼写检查等特性,而对于用户登录表单,为安全考虑则不希望自动完成的特性存在,今天要介绍的就是这些特性以及如何禁止这些特性的存在。

1. 自动完成(autocomplete)

大部分浏览器为了便于你下一次填写表单可能会有记忆功能或者又称为“自动完成”,形如下面的图示:

继续阅读

判断浏览器客户端是否禁用JavaScript脚本

主流现代浏览器默认都不会禁用js脚本的,但是也有例外,除了用户主动禁用脚本外,还有就是维护模式下的安全浏览,这样会禁用页面上的js脚本。

禁用了脚本会发生什么?哦,JQuery无法使用?准确的说是所有和JavaScript有关的都无法使用。包括你上面曾经引以为豪的特效,比如AJAX、图像延时加载以及本地脚本存储等等。是不是感觉像是回到了原始社会,严重一点可能感觉像是过着盲人的生活,呵呵,不过有一点可以肯定的是未开启脚本的这部分用户少之又少,我们可以抛弃他们。你说什么?抛弃我们的客户?这怎么可以?别急,下面我要介绍的就是针对这部分用户的判断,以便于我们能够优雅的降级页面渲染来优化用户体验。

1. 使用noscript标签

这个标签貌似很久就有了,我记得第一次学习HTML的时候就已经在那儿了。不过那时很少用,见得最多的例子是用在统计代码上面,比如有下面的代码:

<script src="http://example.com/stat.js"></script>
<noscript>
  <img src="http://example.com/stat_pic.gif"
      border="0" height="0" width="0" />
</noscript>

继续阅读

使用JavaScript脚本框架实现HTML5+CSS3网页兼容

现在网页技术发展的很快,连网页制作标准都有了HTML5版的了,不过很多朋友可能都在观望,担心新技术会不兼容于老爷车式的浏览器,同时也不愿意写上那么多的Hack来确保兼容,但是大家可能和我一样也垂涎于HTML5这个新技术带来的新特性,大家都在观望,希望出现个吃螃蟹的人,不过这样的人已经有了,在这里淘宝网就开始尝试用HTML5新技术布局了,就目前看来,各项技术良好,而且保持了绝大多数浏览器的兼容。如果我们想用HTML5布局网站但想少写或者不写CSS Hack什么的,有什么便捷的办法呢?这点已经有人为我们铺好道路了,网上一些JavaScript脚本框架减轻了我们的工作,可以让我们放心大胆的去实践新的HTML5技术了。具体的一些框架我总结了下,不全的话可以提出来:

1. html5shiv – HTML5 IE enabling script

让低版本IE支持HTML5标签,主要是一些类似于header、footer等这样的标签,不过测试下来,貌似IE5.5支持不是很好的,这个大家应该没必要介意了,这么古董的浏览器还是比较少的。

项目主页 : //code.google.com/p/html5shiv/

当然你可以直接借助Google的代码托管库这样写到你的HTML5文档里:

<!–[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

2. css3-mediaqueries-js – make CSS3 Media Queries work in all browsers (JavaScript library)

这个主要是实现CSS3的media Queries属性兼容的,说直接点就是为不同媒体设备实现不同的分辨率的CSS样式而准备的,比如台式机访问是一种分辨率样式,手机访问是另外一种分辨率样式,具体可以参考《CSS3 Media Queries》这篇文章。当然如果没有为指定设备的指定分辨率设置CSS,就可以不用这个脚本帮忙了。

项目主页 : //code.google.com/p/css3-mediaqueries-js/

3. ie7-js – A JavaScript library to make MSIE behave like a standards-compliant browser.

看名字就晓得这个又是为IE准备的,的确,这个主要是为了让低版本的IE看起来更符合标准,其修复了一些低版本IE的不符合标准的问题,当然不单单是HTML5 + CSS3可以采用,XHTML + CSS2也可以试一试。

项目主页 : //code.google.com/p/ie7-js/

也可以直接使用Google的代码托管库这样写:

<!–[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]–>

当你引用了IE9.js就不需要再引用IE8.js或者IE7.js了,因为IE9.js包含了这两个脚本的内容。

4. Modernizr

具体介绍可以参考《Taking Advantage of HTML5 and CSS3 with Modernizr》,幸运的是我找到了一篇翻译的中文资料《Modernizr——为HTML5和CSS3而生》,说到底这是个HTML5和CSS3的特性检测器,它能自动检测浏览器是否支持相应的特性并且还能将不支持特性的某些class样式符加上前缀no-,这样就大大方便了我们在面对不兼容浏览器时实现优雅的降级。

项目主页 : http://www.modernizr.com/ (可能无法访问)

目前主页可能无法访问,不过大家可以通过github上托管项目进行下载。

5. Google Font API

貌似这个和JavaScript没有关系,好吧,我承认这个是CSS的实现,目的是让网站使用一些用户电脑上没有的字体,不过前提是这些字体Google Web Font目录下必须存在,其实是调用的谷歌的一个接口,有了这个我们就能放心大胆的使用一些特殊的字体而不用担心用户有没有安装了。

项目主页 : //code.google.com/apis/webfonts/docs/getting_started.html