前端观察

Modernizr与HTML5

神飞 — Wed, 01 Sep 2010 14:10:36 +0000

好吧，现在流行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和特性检测的争论一直都有，我这里想说的是，具体问题具体分析，在网站中使用HTML5来检测特性支持要比UA更靠谱、更方便～～

使用Modernizr

modernizr的用法很简单，仅仅在页面中引入库的js文件即可：

<script type="text/javascript" src="modernizr-1.5.js"></script>

Modernizr是开源的，但是由于某种原因，它被G-FW给封掉了。

Modernizr @ git

modernizr项目托管在git，你可以通过以下地址获取它：
http://github.com/Modernizr/Modernizr
作者还在git提供了一个简单的输出页：
http://modernizr.github.com/Modernizr/output.html
和一个详细测试页面：
http://modernizr.github.com/Modernizr/test/index.html

扩展阅读：

detacting HTML5 features
Safely Deploy HTML5 and CSS3 with Modernizr

Raphael js库简介

神飞 — Wed, 01 Sep 2010 02:06:16 +0000

Raphael JS库是在webrebuild交流会上听专家将到的，后来就看了下，果然很强大——通过SVG/VML+JS实现跨浏览器的矢量图形实现方案。

这其实和cufon等网络字体的实现原理是有些类似的：非IE浏览器使用SVG绘图，然后IE中使用VML。它的目的是想要提供一种简单易用的真正跨浏览器的矢量图形实现方案，包括一些动画效果。

Raphael的语法也很简单，基本上了解SVG就会很容易上手的：

var c = paper.path("M10 10L90 90");
// 画一条线；

浏览器支持

IE6+、Firefox 3.0+、chrome、opera等都是很好支持的。

一些酷酷的例子：

使用Raphael绘制的117个矢量图标：

嗯，这些图标都是用Raphael实现的，点击例子页面中的图标下面就会显示代码。

简单的动画效果，虽然也可以用JS+CSS3实现，但是这个可是跨浏览器的哦。。。

感兴趣的同学可访问官方网站查看更多demo，以及参考文档。

9月2日 Google互联网开发技术交流会

神飞 — Tue, 31 Aug 2010 15:38:23 +0000

这个交流会，在前几天webrebuild交流会的时候，胡坤老师有提到过，很是期待，等我真正了解它的时候，发现已经晚了，报名已经结束～～

这次交流会主要是面向网站前端开发人员，主题是下一代网站开发技术和浏览器发展趋势。

从与会嘉宾来看，这简直是一场前端开发者的盛宴：国内最强的技术团队负责人，包括腾讯公司的梁璟彪、腾讯研究院的邹赞、淘宝的小马和怿飞、人人网的UED负责人，更有国内各大浏览器厂商的负责人，比如，傲游的创始人陈明杰、Opera的谢子斌、Mozilla中国的过元铮等等。

我灰常想去听啊～～

感兴趣的同学可以访问交流会官方页面了解更多。

9月11日：webrebuild年会广州站

神飞 — Tue, 31 Aug 2010 13:54:47 +0000

8月21日的webrebuild年会深圳站已经取得了很大的成功，相信各位前端牛人的精彩分享和会议工作人员的悉心组织给大家留下了很深刻的印象。

嗯，下一站广州站也开始接受报名了，如果你在广州或者离广州比较近，不要错过这次机会哦～～其实深圳站很多人报名晚了，以至于没有能够参加（我不是工作人员，无能为力啊）。

广州站的日程安排：

这几个题目都是很不错的，特别是前两个关于移动网站的重构，看的我心痒痒，很想去听胡鑫和ucweb的专家的分享～～

活动页面：http://webrebuild.org/guangzhou/

报名页面：http://webrebuild.org/guangzhou/signup.html

8月21日 webrebuild年会深圳站

神飞 — Sun, 08 Aug 2010 14:55:57 +0000

一年一度的webrebuild年会北京站在7月17日已经成功举办了，深圳站也将在8月21日在腾讯大厦Image店二楼举行。

这是一次非常值得参加的重构界的技术盛宴，除了牛人们的技术分享外，更重要的是可以和业内的精英们一起面对面交流。

大概日程：

可以看出，这届的内容比往届都要多，一整天排的满满当当，嗯，很好，更充实了～～

如果你还没有报名，赶紧来报名吧.

如果没有太大意外，我也将会去听大牛们的分享。

PS：yt关于webrebuild年会的总结很不错

访问webrebuild.org

CSS3 appearance简介

神飞 — Sun, 08 Aug 2010 05:30:04 +0000

我们来简单了解一下上文中提到的css appearance。在之前研究HTML5表单的时候，一直很好奇浏览器是通过什么渲染不同的表单界面的，后来在Chrome中查看类型为range的input的时候，发现了这个有趣的属性：

然后右边的样式显示是这样的：

后来就发现CSS3规范中对appearance有定义，MDC也有对这个属性的描述。

这真是个非常有趣的属性，可以用来伪装或是实现一些特殊的界面，比如将input[type=text]的appearance设置为button后，它看起来就像是一个按钮了：

样式如下：

input[type=text]{
	-moz-appearance:button;
	-webkit-appearance:button;
	appearance:button;}

不过现在只有webkit和firefox通过私有属性支持，各大浏览器还都没有完全正式的支持，而且它们支持的appearance属性值也不完全相同。不过既然W3C将其列入规范中，相信不久的将来，各大浏览器都会对这个属性实现一些基本的支持的吧，这样我们就能更好的控制页面中元素的表现了。

David Walsh不久前也简单的讲述了这个属性，只是只针对webkit，他还做了个demo页面。

关于CSS3 appearance，欲了解更多，请查阅：

我们也会不断关注这个属性在各个浏览器中的进展。

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

神飞 — Sun, 08 Aug 2010 03:56:32 +0000

这是之前组内分享的一个PPT，关于HTML5的表单，本来想整理成文字的，由于精力有限，终于决定放弃，偷个懒，直接把PPT放上来～～

个人认为表单是HTML5的最大改进之一，它也被业界称为web form 2.0，这种称呼是名副其实的，从HTML3.2(1997年1月)到HTML4(1997年12月)，旧的表单陪伴了我们十几年，始终没有太大的改进。HTML5表单不仅仅大大的改进了表单的功能，改进了表单的语义化，同时也是对用户体验的一次增强，而对前端开发者来说，HTML5表单也可以大大增加工作效率。

不多说了，看PPT：

Html5 表单

关于HTML 5表单的几个要点：

浏览器遇到不支持的input type的时候，会将其解析为默认的text，所以在项目中可以大胆的使用相应的type；
mobile webkit对range type的支持不完善，可能是因为它对css appearance的支持不足；
W3C只规范了HTML 5表单的内容，并没有定义其实现方式，各浏览器实现的UI出现差异成为一种必然；

如果你对HTML5表单有疑问或更好的认识和经验，欢迎通过评论提出～～

PS:发现现在Chrome dev版本也开始支持HTML5表单中的日期类型了，这和PPT中有点儿出入 @2010/8/8

Firefox 4 beta 1发布——前端开发者须知

神飞 — Wed, 07 Jul 2010 15:53:10 +0000

在Mozilla发布几个Firefox 3.7 preview版本之后，今天终于发布了Firefox 4 beta 1，在这个硝烟愈来愈浓的浏览器战场，Firefox 4的发布让情况更加复杂了。现在让我们来看看Firefox 4的改进和对前端开发的影响吧。

一、界面改进

正如之前泄漏出来的概念图一样，Firefox最终大刀阔斧的改变了自己的界面：

这个界面确实变的简洁漂亮了，我个人也很喜欢它的某些细节，但是结构和Chrome/Opera的相似性，让我不得不担心，是不是将来主流的浏览器都要采用将tab放到上面并隐藏工具栏的布局了，所以，如果将来IE 9正式版出来的时候也是这样的布局，大家不要意外呀～～～

二、性能提升

Firefox 4改进了很多方面的性能，比如DOM和CSS渲染、JS引擎、以及部分硬件加速，据说可以更快的处理更复杂的DOM和CSS选择器。据Zimbra的性能测试，Firefox 4性能比之前版本提升了两倍。

三、HTML 5

Firefox 4加入了一些HTML 5特性的支持，包括HTML 5表单和一些标签，比如article、section、nav、aside、hgroup、header、footer等，但是根据这个页面显示的状态，Firefox 4对HTML 5表单的支持还很鸡肋。

四、HTML 5 parser

Firefox 4是“第一个完全支持”HTML 5 Parser的浏览器，这使得Firefox 4可以在HTML代码中嵌入SVG和MathML。

五、HTML 5视频

Firefox 4开始支持WebM视频格式

六、CSS

这个beta版本的Firefox几乎完全支持CSS transition
可以使用-moz-resize定义textarea元素是否可伸缩
支持CSS3 calc属性
原生支持CSS 3的背景大小属性，-moz-background-size属性直接改名为background-size，私有属性将不再支持
支持-moz-image-rect属性来显示背景图片的一部分

七、其它

当然还有一些其它方面的增强，包括JS和DOM Event的增强，感兴趣的同学可以查看http://hacks.mozilla.org/2010/07/firefox-4-beta-1-is-here-whats-in-it-for-web-developers/

另外，由于Firefox 4 更换了插件引擎，所以之前的插件基本都不能用了——不知道Mozilla的那些家伙是怎么想的，3.5还是3.6的时候就更新过一次引擎，导致之前的插件全部要重写，现在又这样做，这让插件开发者和我们这些使用者情何以堪啊，不过，这次貌似可以暂时曲线解决旧插件的问题的。

各大网站已经对Firefox 4 beta 1进行了一系列的测试，结果显示它与Chrome和Opera等还有一些差距，不过我在html5test.com上做了下测试，在Windows xp系统中，Firefox 4 beta 1拿到了189分的高分，这的确是一个很不错的成绩。

从上面列出的新特性以及IE 9 pre版的一些新特性可以看出，浏览器厂商都开始在HTML 5方面发力，但是到目前为止没有一个浏览器完美的支持HTML5，但是我们可以考虑在自己的项目中适度的使用HTML5的特性了。标准的实现需要时间，但是理想化的标准是不存在的，我唯一期望的是各个浏览器对HTML 5和CSS 3的标准支持不要有太大的差距。

另外，Firefox 4 beta 1开始引入硬件加速了，mac版的safari也有一些硬件加速功能，IE 9的硬件加速让其性能大增——这或许会是另一个趋势吧，毕竟浏览器能做越来越多的事情了，而速度和性能也是赢取用户的最重要的因素。

无论如何，虽然我个人对Firefox期待更多，但是这次确实是一个不小的改进，让我们期待Firefox 4的正式版发布吧。

media type与media query

神飞 — Tue, 06 Jul 2010 15:23:09 +0000

media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视。

media type

让我们先了解一下media type，其实这个大家会比较熟悉一点，我们通常会用到的media type会是all 和screen，然后是print，一些网站会专门通过print类型为页面的打印格式提供更友好的界面。
其实，media type有很多种：

类型	解释
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯
screen	彩色电脑屏幕
speech	演讲
tty	固定字母间距的网格的媒体，比如电传打字机
tv	电视

media type的几种使用方法

我们可以通过几种方法来声明media type：

方法一

<link href="style.css" media="screen print" ...

方法二

 media="screen" href="style.css"...

方法三

@import url("style.css") screen;

方法四

1
2
3

<style media="screen">
@import url("style.css");
</style>

方法五

1
2
3

@media screen{
selector{rules}
}

当然，这几种方法各有利弊，而我们常用的是第一种和最后一种方法。

media type的浏览器支持

IE5.5/6/7不支持在@import中使用媒体类型
Safari/firefox只支持all,screen,print三种类型(包括iphone)
Opera 完全支持
Opera mini 支持handheld，未指定则使用screen
Windows Mobile系统中的IE支持handheld，其它支持不明…

media query

正如前文所说，media query是CSS 3对media type的增强，事实上我们可以将media query看成是media type+css属性判断。

请注意，下面提到的一些关键字等内容，有些是在media type中就可用的，但是放到media query中将能更好的发挥其作用，所以我就在适当的地方引入。

css属性判断可以只是某个CSS属性的名称，也可以是属性+值：

<link rel="stylesheet" media="screen and (animation)” herf=“…”

如果设备支持CSS动画，那么就能执行这个外部样式表文件。

1
2
3

@media screen and (max-width:240px){
	body{font-size:medium;}
}

如果设备的浏览器的最大宽度是240px，则页面将使用中号字体。

PS:属性和值之间是用冒号连接的，而不是等号，这与正常的CSS的写法一致。

媒体查询语句结构

我们可以将上述语句称为媒体查询语句，这样也更能理解一些。从上面的例子也可以看出，媒体查询语句一般由media type+一到多个CSS属性判断组成，而多个CSS属性判断可以用关键字and连接：

1
2
3

@media screen and (min-width:1024px) and (max-width:1280px){
	body{font-size:medium;}
}

其中media type可以省略，属性值也可以为空：

@media (color:4){}

@media (color){}

当然，请注意，有属性值和没有属性值的情况代表的意义是不一样的，所以上面的这两条规则不是等价的。

而针对多个媒体类型的CSS规则，可以用逗号来隔开：

1
2
3

@media handheld and (min-width:360px),screen and (min-width:480px){
body{font-size:large;}
}

1
2
3

@media screen and (min-width:800px),print and (min-width:7in){
body{font-size:small;}
}

media query支持的属性

事实上，media query支持的属性和我们常用的CSS属性是不太一样的，它们是一些特别定义的条目：

属性	值	Min/Max	描述
color	整数	yes	每种色彩的字节数
color-index	整数	yes	色彩表中的色彩数
device-aspect-ratio	整数/整数	yes	宽高比例
device-height	length	yes	设备屏幕的输出高度
device-width	length	yes	设备屏幕的输出宽度
grid	整数	no	是否是基于格栅的设备
height	length	yes	渲染界面的高度
monochrome	整数	yes	单色帧缓冲器中每像素字节
resolution	分辨率(“dpi/dpcm”)	yes	分辨率
scan	Progressive interlaced	no	tv媒体类型的扫描方式
width	length	yes	渲染界面的宽度
orientation	Portrait/landscape	no	横屏或竖屏

从这些属性中我们可以看出，media query就是为了更好的适配各种设备而生的。

浏览器扩展

webkit

webkit是最早实现media query支持的浏览器内核之一，同时它也根据自己的需要搞了一些特有的扩展属性，最常用的有：

transform-2d	只用于支持使用 -webkit-transform实现2D变换的浏览器
transform-3d	只用于支持使用 -webkit-transform实现3D变换的浏览器
transition	只用于支持使用-webkit-transition实现变换效果的浏览器
animation	只用于支持使用-webkit-animation实现动画的浏览器

详情请看这里：http://webkit.org/specs/MediaQueriesExtensions.html

firefox

firefox也提供一些自己的扩展，不过由于firefox浏览器的手机版现在还很弱，所以很少会用到，感兴趣的同学可以到https://developer.mozilla.org/En/CSS/Media_queries查阅。

max与min

细心的同学可能已经注意到前面用到的这两个关键词，他们是要配合支持它们的属性使用的，它们的意义与我们常用的max-width和minwidth等类似。

各属性对max和min的支持在前面的属性列表中有给出，这里是一个详细的列表：

height	min-height	max-height
device-width	min-device-width	max-device-width
device-height	min-device-height	max-device-height
aspect-ratio	min-aspect-ratio	max-aspect-ratio
device-aspect-ratio	min-device-aspect-ratio	max-device-aspect-ratio
color	min-color	max-color
color-index	min-color-index	max-color-index
Monochrome	min-monochrome	max-monochrome
Resolution	min-resolution	max-resolution

not/only

媒体类型还支持 not和only关键字，它们可以用来更方便的定位某个媒体设备：

not：排除某种制定的媒体类型

@media not print and (color){
}

only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器：

@media only screen and (color){
}

media query的浏览器支持：

IE 9以下不支持
Firefox 3.5+(Gecko 1.9.1+)支持
Opera 9.5+完全支持
Opera mini 5支持
webkit 支持大部分属性(safari 3.0的内核版本是522，iPhone 1代的safari的内核版本是524，webkit大概从这个时候开始支持media query，但是对部分属性比如projection支持不好)
iPhone OS 3.2之前的版本不支持orientation属性，iPad和iPhone 4支持该属性。
iPhone Safari不支持orientation(iPhone 4支持)

实例：

现在让我们来看一些典型的例子：

检测iPhone safari：

<link media="only screen and (max-device-width: 480px)" href="style.css">

这是apple官方网站推荐的一种定位iPhone safari浏览器的方法，在iPhone一代和2代的时代，这条规则的确能够正确的判断出iPhone的浏览器，但是后来出现了Android的大屏幕手机，比如Nexus One和HTC desire，这条规则也能适配这些480px宽度的机器。

Google的iPhone横屏样式：

Google之前通过以下方式为iPhone手机提供横屏样式(因为最早的3代iPhone手机不支持orientation属性)：

@media screen and (max-height:300px){
    #linksDiv{
        margin-top:10px;
    }
    ...
}

android手机的多分辨率问题：

android系统的开放性导致其终端的多样性，那么对于各种各样的android手机来说，屏幕分辨率的差异导致针对android手机的页面重构复杂性增加，那么我们可以用media query为每种分辨率提供特定样式：

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

device-aspect-ratio

device-aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：

/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
    selector{
    }
}
 
/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
    selector{
    }
}

当然，对于手机也可以使用这个属性，比如对于480px*800px的Nexus One和Desire等手机，可以用下面的样式来匹配：

/* for 480px*800px width screen */
@media only screen (device-aspect-ratio:5/3){
    selector{
    }
}

O’Reilly区分iPhone和iPad的方法

O’Reilly为其网站制作了针对iPad和iPhone设备的不同版本，从而提供最适合相关设备阅读的界面，他们的做法就是使用media query：

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

详细介绍可以查看这里：http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html

总结

CSS 3的media query是一个很强大也很好用的工具，它为我们在不同的设备和环境下实现丰富的界面提供了一种快捷方法，虽然现在各个浏览器对它的支持还有些差异，但是大家都在改进，IE 9已经开始支持media query了。不过目前media query的最大舞台是在高端手持设备，相信随着移动互联网的快速发展，media query也会很好发挥自己的作用。

招聘：【高级网页美工/编辑/设计】

神飞 — Sun, 04 Jul 2010 06:33:15 +0000

嗯，代发一个招聘信息：

公司名称：杭州某信息科技有限公司

职位名称：高级网页美工/编辑/设计

工作职责：

负责网站整体视觉感官，以及网站运营活动的创意和展现；
对页面进行优化，使用户操作更趋于人性化，提供卓越的用户体验方式设计；
负责网站各频道页面设计；负责网站的美观度和友好性；
负责网站广告设计；负责网站专题和各种活动的美术设计；

职位要求：

本科以上学历，知名美术院校或者室内装饰设计毕业，美术功底高，超强的审美能力，个人形象时尚新潮；
五年以上大中型网站、网站设计公司、知名广告公司工作经验，非常熟练的运用多种平面，三维、动画、苹果设计软件等复合设计工具；
有国外艺术设计教育背景以及国外工作经验更佳；
优秀的职业素养和业务技能，乐观开朗，主动积极，认真负责，细致耐心，学习能力超强，善于接受挑战，能够承受一定的工作压力，具有良好的团队合作精神和协作能力；
英文通读，能大量快速学习国外网站和资料。
具有丰富的互联网专业知识及大型互联网公司从业经验。

有意者请将简历发送至：emihome@yahoo.cn