Tagged

HTML5

A collection of 26 posts

HTML5

30个使用循环视频做背景的网站设计欣赏

用循环视频做网站背景是最近开始流行的一种趋势,嗯,主要还是在HTML5开始被各大浏览器支持之后才大量涌现的。其实有些类似N年前的Flash的Intro动画吧,不同的是用法和设计风格差别很大,相比当年的Flash就太Low了——呃,是不是无意间暴露了年龄了。。。 总之,用H5+视频直接做首页的动画背景,也是一键酷的事情,无论是技术还是表现上。另外,国内带宽蛮贵的,所以用视频也要考虑下服务器成本。之前知乎的登录页有个3MB的视频循环播放并且每次播放都会从服务器请求下载一次,真替他们心疼钱啊。。。 Purple, Rock, Scissors Project Skin DUNCKELFELD Digital Telepathy Kalexiko Geckoboard Cobble Hill MELANIE F. Pushreel Build Films St. Joseph’s Preparatory School Fresh Design Studio P’unk Avenue Believe.in Strijp-S Final

css3

css@supports

基于浏览器的特性检测大家应该已经很熟悉了,特别是modernizr.js推出来之后。其实w3c也出了规范,可以基于css来做一些特性检测,也就是@supports,这个特性已经有两年多了,之前浏览器支持度不够,现在webkit nightly也开始支持了,也就是说safari 9会支持到,这样的话,Blink+webKit+gecko都支持了,只剩下IE浏览器不支持了,嗯,这样更方便对IE差异化处理了。 但是@supports并不能完全替代JS的特性检测方法,它只支持对CSS属性的检测,其它HTML5 api以及webP等技术的检测还是需要JS来完成。 用法: @supports就像media query一样简单: @supports(prop:value) { /* more styles */ } @supports也允许你用各种复杂的组合来进行特性检测。 基本用法: @supports (display: flex) { div { display: flex; } } 你可以用这种方法来检测各种基本的CSS属性。 not关键词 就像这样: @supports not (display: flex) { div { float:

Chrome

srcset属性获chrome 34支持,大赞!

Chrome 34终于正式发布,最引人的特性是开始支持srcset属性了。 其实在此之前,Safari已经开始支持了,而目前来看,这个属性就是为rMBP服务的,因为桌面电脑上只有rMBP需要更高分辨率的图片。但是其实这个属性的用途并不仅限于此。 最常用的用法: <img src="normal.jpg" srcset="normal.jpg 1x, high-res.jpg 2x, highest-res.jpg 4x" /> 但是W3C规范的描述其实更详细: To specify an image, give first a URL, then one or more descriptors of the form 100w, 100h, or

HTML5

HTML5 Charset能用吗?

前一段某项目中页面在IE6突然出现了乱码,当时做了各种排查,最终推测是使用了HTML5的DOCTYPE和Charset以及中文注释的问题,于是临时采用旧的Charset方法来修复了下,后面乱码再没出现。 其实一直不太确定HTML5的Charset能否被IE6识别,于是做了一些测试。 先说下两种Charset声明方法,其实大家应该都很熟悉的: <meta charset="UTF-8"></meta> <meta content="text/html; charset=UTF-8" http-equiv="content-type"></meta> 后面我们简称第一种方法为HTML5方法,第二种方法为HTML4方法。 测试环境: Windows XP Sp2,中文版+英文版两个版本的IE6,及Windows 7 下IE9及其各种兼容模式和Chrome、Firefox等的当前Stable版本; 因为我们用到的HTML文件都是UTF8编码的,所以这里测试用例的HTML文件也都是UTF8(

HTML5

HTML5的hidden属性

我们已经知道了很多HTML5新增的属性,比如placeholder、download、autofocus等,还有个新的可能会常用的属性hidden,也是蛮好用的,这里简单介绍下~~ 用法很简单: <div hidden=""> You can't see me! </div> 这个属性的表现类似css的display:none,用了这个属性后,元素会被隐藏,块级元素也会折叠起来不再占位,和visible:hidden不一样。所以,对于不支持HTML5的浏览器来说,也可以做下简单的兼容: *[hidden] { display: none; } 嗯,之前我们的通用做法是直接给目标元素一个style=”display:none”或者定义一个.none之类的选择器,现在我们又多了一种选择。是否好用,还要看项目实际需要吧~~ 整理自:http://davidwalsh.name/html5-hidden 中文原文:HTML5的hidden属性

HTML5

Safari 6的重要更新

苹果在7月25日发布了新的OSX mountain lion系统,Safari 6.0也随之发布,这次更新有比较大的功能和性能改进,我们来了解下: 不支持Windows——至少到现在为止尚未发布Windows版本,之前safari对Windows的版本基本是同时发布的。好吧,这未必是坏事~~ audio api——终于支持了 css3 filter——这个很赞,虽然在webkit nightly和chrome中早已提供了支持 HTML5 notification——支持notification api,并整合到mountain lion系统的通知中心中 HTML5 timed text track——定时文本轨道,用于为媒体元素指定定时文本,比如,视频的字母,音频的歌词等,用法实例: HTML5 media synchronization——媒体同步,可以精确控制多个媒体文件之间的同步,比如,你可以为一首歌曲提供两个音频文件,一个是伴奏,一个是人声原唱,可以用本方法提供类似KTV的功能了。详细了解请查看规范。 Javascript增强——支持最新的ECMA

appcache

appcache的浏览器限制

appcache(之前的manifest)是html5的一个特性,用来实现浏览器端的资源缓存,是webapp的一个重要工具。虽然大部分浏览器的最新版都它提供了支持,但是各浏览器的实现却有些差异,我们来看一下~~ 数据来源:browserscope 浏览器最大存储Android 2.18MBAndroid 2.312MBAndroid 2.3.448MBAndroid 2.3.518MBAndroid 2.3.712MBAndroid 4.0.432MBchrome 1817MBchrome 19+无限制fennec 10.0+无限制Firefox 10.0+无限制IE 10.010MBiOS 5.1.15MBiOS 6.026MBSafari 5.1.7无限制Safari 6.0无限制Opera不详可以看出,桌面端的浏览器除了IE10都没有限制,移动端的基本都有各种限制。

HTML5

iOS 6中Safari对HTML5的支持

iOS6发布了beta版,其中包括了新版的Safari浏览器,增强了对HTML5的支持,我们来了解下吧~~ 目前,ios 5.1中safari在HTML5test.com的测试得分是324,而ios 6中safari的分数是360。 远程调试 新的远程调试工具可以更方便的在PC/Mac上对iOS上Safari中的页面进行调试,界面类似Android上的Chrome浏览器。** ** 终于支持这个了,可以在浏览器中上传照片文件什么的了。。。内牛满面。。。 Audio API 这个大家也期待已久了吧,不多解释 CSS3 Filter 这个我们之前有介绍过,最新的 chrome 19正式版已经实现了该功能但是默认并没有开启,你需要通过about://flags(chrome://flags)来开启。 离线存储(app cache)数据限制从5MB提高到25MB requestAnimationFrame webkit私有api,不过基本除了opera,各个最新的浏览器也都开始支持了,详情查看MDN的介绍。 横屏模式下支持全屏 也就是fullscreen api了。 其它更新 更快的Javascript 好吧,每次更新都会有这个,不算新闻了。

Apple

iOS 5中safari带来的新特性

随着iPhone4s的发布,iOS5也正是发布了,增加了很多很有用的新特性,不过对于前端开发者来说,最关心的还是浏览器,让我们来看一下苹果为iOS5中的safari新增了哪些新特性吧。 CSS 终于支持position:fixed了; 支持overflow:scroll了,通过-webkit-overflow-scrolling: touch;来实现: selector{ overflow:scroll; -webkit-overflow-scrolling: touch; } CSS3 gradient语法更新,将-webkit-gradient(linear|radial)拆分为,-webkit-linear-gradient和-webkit-radial-gradient。PS,年初发表过一篇关于《webkit对于CSS3渐变样式语法的更新》的文章,看来现在就剩下android的webkit了。 HTML5 新的兼容HTML5的解释器(parser) 表单增强新增时间类型date, datetime, month, time和range支持,好赞: 同时iOS5中safari也增强了number类型的input的验证功能。 支持web workers ,传说iOS3中短暂出现过web workers,不过后来消失了,现在又回来了。。。 增强ECMAScript5,测试结果显示支持情况跟上PC版的Safari 5.1了。

css3

IE10将增强对HTML5和CSS3的支持

Windows 8 终于发布了,虽然现在可用的只是开发者预览版,好消息是,IE 10 也随着发了,虽然现在还只有Windows 8可用。我们来看下IE10都有哪些新特性吧。 IE开发者中心给到了一份详细的针对前端开发者的文档,列出了IE10支持的HTML5和CSS3新特性。嗯,它终于跟上了: CSS3 css region css3多列 Flexbox grid 定位浮动(positioned float) 3D变换(3D transfrom) 动画(animation) 渐变(gradient) text-shadow 去掉样式表限制——在IE9之前的版本中,每个页面最多只能加载31个样式表文件,@import也只能最多嵌套4层,IE10中去掉了这些限制。 HTML5 - 脚本同步——script标签的async属性,用来定义脚本是否异步执行 - File API - History - Parsing -

HTML5

HTML5技术分享沙龙和w3ctech javascript专题会议

最近的这两个技术分享活动,看起来都很不错的,推荐一下。 HTML5技术分享沙龙 竟然第五期了,前些天有看到然后最近忙的都给忘掉了~~~7月16日,嗯,就是明天。 这次错过的就关注以后的吧 :) ,可以关注下他们的活动版块。 这个活动比较好的地方是很多城市都会有,包括北京、上海、广州、深圳、杭州、南京、成都等。。。 话说,HTML5研究小组这个网站不错,建议前端的童鞋关注之。 Javascript专题会议 W3Ctech组织的专题技术会议,很赞这样的活动。 今年将会在三个地方举办,分别是广州(7月30日)、北京(8月27日)、上海(9月24日)。 感兴趣的同学速度去报名哈~~ 活动网址:http://www.w3ctech.com/2011/js

css3

Opera 11.10正式版以及IE10 pre版本发布

前几天发了篇文章预告Opera 11.10版本的发布,Opera效率还是很高的,两三天一个 snapshot版本,昨天正式版终于发出来了。差不多同时,IE10 预览版也发了。我们简单的看一下吧。 Opera 11.10对HTML5和CSS3的支持,和前一篇文章中提到的基本一样,不再多说,值得注意的是,正式版增加了对HTML5 File Api的支持,详情请查看Opera官方的文档。 IE团队貌似也想发力了,IE9刚发布不久就搞下一个版本的IE了,是想让人看到一点点希望么?但是IE的作风是,从来不会让前端开发人员省心的。 IE10 pre中的新特性列表: 支持兼容模式(x-ua-compatible) 支持ECMAScript 5 strict模式 支持渐变,支持此背景,而且引入了-ms-linear-gradient和-ms-radial-gradient以及-ms-repeating-linear-gradient和-ms-repeating-radial-gradient等私有属性。 支持CSS3多列(multi-column) 支持CSS3 Flexbox,悲催的,又是私有的display:-ms-box,以及-ms-box-xxx属性 支持CSS3 格栅(grid),嗯,还是私有的属性,display:

HTML5

超酷的HTML5网站设计

译自:[Awesome HTML5 Websites](http://designartwall.com/2011/03/awesome-html5-websites/) 中文原文:[超酷的HTML5网站设计](http://www.qianduan.net/awesome-html5-website-design.html) 请尊重版权,转载请注明出处!- - - - - - 我们已经了解很多关于HTML5的技术了,很多人也开始在自己的项目中应用各种HTML5技术。这里,[Design Art Wall](http://designartwall.com/)收集了15个采用HTML5实现的网站,当然它们还有非常赞的界面设计,这些网站不仅在coding上,更在设计上能给我们更多的参考,当然,国内很多网站仅仅是使用了HTML5的doctype而没有真正的采用HTML5的语义化标签和更多高级特性。嗯,是时候做更多的尝试了。 当然,如果你做了或者见到了很棒的采用HTML5技术实现的中文网站,欢迎通过评论反馈给我们,多谢~~ Youzee Brasserie Gerard

css3

IE9正式发布

无论你是否期待,也无论你支持或者反对,IE9正式版如期发布了。嗯,这一点儿比Mozilla好,Firefox 4正式版不知道要跳票到什么时候了。 下载地址:http://windows.microsoft.com/en-US/internet-explorer/products/ie/home 以我个人来说,对IE9怨念太深,所以不再发表什么评论了,这里贴一些关于HTML5和CSS3的测试数据: IE9对CSS3新特性的支持: IE9对CSS3 选择器的支持 IE9对HTML5特性的支持 IE9对HTML5表单的支持 这些测试数据来自于 Findmebyip.com,这个网站基于modernizr项目,可以快速检测出浏览器对于HTML5新特性的支持。有Windows 7的同学可以自行访问测试下。 另外一个测试是在HTML5test.com的: 当然,这里还有一个其它浏览器的测试数据对比: 第二列是版本好,第三列是得分,最后一列是所谓的亮点。 值得一提的是,IE9终于完整支持CSS2选择器并支持绝大部分CSS3选择器了!!!

HTML5

HTML5 中 div section article 的区别

刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感。尤其是对 div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下。 div HTML Spec: “The div element has no special meaning at all.” 这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。 section HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a

HTML5

HTML5书籍推荐

HTML5技术越来越火了,浏览器的支持加上移动互联网的兴起,使得很多HTML5技术可以派上用场并为用户提供更好的用户体验。而HTML5相关的资料目前却很少,只有少数像前端观察一样关注新技术的博客在介绍一些(:羞),或者就是去查W3C或者浏览器厂商的说明文档。不过,现在已经有不少的HTML5书籍出版了,大家可以视情况买几本来读。 HTML5 用户指南 在卓越购买 |在当当购买 国外小册子《Introducing HTML 5》的中文版,浅显易懂,快速上手。 HTML5 揭秘 在卓越购买 | 在当当购买 《HTML5 揭秘》是知名的《HTML5:up and running》的中文译本,很详细的介绍了HTML5的最新技术,如果你经常看Dive into HTML 5这个网站,肯定很了解这本书了。这本书是淘宝UED团队的牛人翻译的,非常推荐。 HTML5 高级程序设计 在卓越购买 | 在当当购买 《HTML5 高级程序设计》是《Pro HTML5

HTML5

HTML5本地存储初探

html5带给我们的不仅仅是更多语义丰富的标签,还有更多更牛逼的特性,比如“离线存储”。 对于台式电脑来说,或者它并没有带来什么惊喜,但是对于移动设备来说离线存储简直就是一个神迹。对于任何拥有支持离线存储浏览器的移动设备,比如iphone,ipod touch,离线存储使得web前端工程师可以很容易的针对它们开发应用程序。 前面吹嘘了一段,不过说实在的,html5本地存储就目前来说还是很受限的。其一,浏览器限制,目前只有 Safari 3.1 and later, and in iPhone OS 2.0 and later. 提供了javascript database 原生支持,不过也有 Taffy DB 可以曲线救国。(还没有用过,不敢妄下结论。)。 其二,服务器端需要修改配置,旦如果是自己的服务器就很简单了。 下面就以一个简单的offline web app-note book 为例,记录一下为iphone/

HTML5

iOS 4.2版safari对HTML5特性支持更新

文章整理自 [Safari on iOS 4.2: Accelerometer, WebSockets, SVG, AJAX2 & better HTML5 support ](http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5)请尊重版权,转载请注明出自[前端观察](http://www.qianduan.net)嗯,据说iOS 4.2发布了,所有的iPhone,iPod、iPad啥的,都可以免费更新。令人欣慰的是,这个版本的iOS对HTML5新特性的支持有比较大的升级,其中包括对WebSockets和加速器(Accelerometer)的支持,新的event、支持打印、新的JavaScript 数据类型和更好的SVG支持。 事实上,Apple还没有更新Safari文档。这里的信息只是基于在Safari(注:文中的Safari指iOS移动设备中的Safari浏览器,不包括PC和Mac机中的Safari)自身的JavaScript研究和测试上。

css3

IE9 beta对HTML5/CSS3的支持

IE9beta版本已经发布几天了,我也在第一时间体验了下,但是由于时间的问题,这篇日志一直没有发,嗯,最近比较忙,其实主要是没有大块大块的时间了,然后碎片时间利用的也不是很高效~~以至于最近博客的更新都比较慢… 有人说IE9是微软的二次革命,我觉得这种说法一点都不过,从IE6开始,IE的更新就没有这么彻底过,完全支持DOM level 2,完全支持CSS2.1,界面更精简……当然,我们最关心的是,IE9对HTML5和CSS3的支持到底怎么样~~ 在微软自家的ietestcenter网站中,我们看到了这个图表: 看到这个图我感到鸭梨很大啊,心里在想,IE9有这么牛x吗?认真看了说明之后才清楚,原来这里的测试项目只是微软提交给W3C的条目,并不是完整的内容,比如CSS3中,这里只包含了5项技术,而不是所有的CSS3内容——强烈的BS一下微软,差点上他的当了…… 其实,想要了解一个浏览器对HTML5/CSS3的支持很简单,上篇文章中介绍的Modernizr就是一个非常好的工具,我这里偷个懒,直接用访问findmebyip,即可看到IE9beta对它们的支持: IE9对CSS3新特性的支持: 可见,目前IE9beta对CSS3新特性的支持还是很弱的。 IE9对CSS3选择器的支持: IE9终于比较完整的支持CSS选择器了! IE9对HTML5新特性的支持: IE9beta对HTML5新特性的支持也是不完整的,音视频的支持非常弱,

HTML5

Modernizr与HTML5

好吧,现在流行HTML5,我就给它标题加上个HTML5吧 :) 其实modernizr就是为HTML5而生的——它是一个检测浏览器对HTML5和CSS3特性支持的JS库,著名的HTML5/CSS3浏览器兼容性网站FindmeByIP就是基于该框架实现的。 可以看到,右下角绿色按钮上面有Modernizr的链接。 Modernizr的功能 modernizr的功能其实很简单,就是用js检测浏览器对HTML5/CSS3的特性支持情况,支持某个属性,就在页面的标签上添加一个相应的class,不支持的话就添加一个no-前缀的class,比如,如果检测的浏览器支持video标签,modernizr就会在标签上添加video类,否则,添加no-video类。 查看FindMeByIP的源码或者用firebug之类的工具查看页面代码,就可以看到标签中的class。 另外,modernizr也提供了另外一种用法,就是单独的检测浏览器对某个特性的支持情况,例如: if (Modernizr.video) {} 通过类似的接口检测浏览器对HTML5的支持情况,是比较安全的。 浏览器检测:UA VS 特性 其实大家通常都会用UA去检测一个浏览器,当然ua也提供了更丰富的信息,UA不是万能的,它也有一些弱点,比如,用户浏览器的UA伪装,某些落后浏览器提供的UA信息太少,这些都会影响到对浏览器信息的判断。更重要的是,对于HTML5特性来说,用UA去判断一个浏览器是否支持某个特性,实现太复杂而且不靠谱。 当然,关于UA和特性检测的争论一直都有,

PPT:HTML5 表单——为体验而生
HTML

PPT:HTML5 表单——为体验而生

这是之前组内分享的一个PPT,关于HTML5的表单,本来想整理成文字的,由于精力有限,终于决定放弃,偷个懒,直接把PPT放上来~~ 个人认为表单是HTML5的最大改进之一,它也被业界称为web form 2.0,这种称呼是名副其实的,从HTML3.2(1997年1月)到HTML4(1997年12月),旧的表单陪伴了我们十几年,始终没有太大的改进。HTML5表单不仅仅大大的改进了表单的功能,改进了表单的语义化,同时也是对用户体验的一次增强,而对前端开发者来说,HTML5表单也可以大大增加工作效率。 不多说了,看PPT: **[Html5 表单](http://www.slideshare.net/mienflying/html5-4921810 "Html5 表单")**### 关于HTML 5表单的几个要点: 浏览器遇到不支持的input type的时候,会将其解析为默认的text,所以在项目中可以大胆的使用相应的type; mobile webkit对range type的支持不完善,可能是因为它对css appearance的支持不足; W3C只规范了HTML 5表单的内容,

css3

IE9初窥:支持CSS3,和HTML5?

微软昨天在其2009年专业开发者大会上展示了下一个版本的Internet Explorer浏览器IE9。 尽管只是一个早期版本,IE开发团队还是比较高调的宣布了IE9的一些改进,比如速度比之前的IE版本都更快些,缩小与FF和webkit之间的差距(也就是还是赶不上了?),支持CSS3的一些新特性,比如圆角(border-radius),不过现在还不清楚是原生支持还是使用私有属性-ms-border-radius。可喜的是,IE9已经可以支持大部分CSS 选择器了!IE开发团队展示了IE9在css3.info的一个CSS选择器的测试页面的测试结果,结果如下图显示: 测试结果显示,IE9支持43个选择器中的41个(另外两个中一个有bug,一个不支持),在578项测试中通过了574项,这是IE浏览器历史上最大的进步…… 虽然微软之前宣布将支持HTML5,但是此次IE开发团队并未给出一个明确的答案,据说,关于是否支持HTML5,他们还在讨论中…… 另外在Windows 7中引入的direct2D和directWrite等GPU硬件加速技术,也将在IE9中使用。 好吧,事实上,从泄漏出的这些信息可以看出来,IE9相对于IE8,无论在速度还是性能,以及对网站标准的支持,都有很大很大的进步。但是我们或许可以预见:将来某个时候发布的微软的IE9浏览器,已经远远落后于现在的firefox和chrome/safari了! 但是无论如何,前端观察都会一直关注微软的动静,毕竟大蛋糕在人家手里——这是一个杯具…… 欲了解更多信息,可查阅IE团队博客的介绍。