幸福收藏夹

跨浏览器实现投影(box-shadow)那点事

sofish — Tue, 17 Aug 2010 20:21:24 +0800

对于投影的实现，其实有一个很好的方式，那就是利用 PNG 半透明效果。可惜，IE6 他不会让你这么做。当然，要实现的话，还是有可能的，只是，可能要绕很多圈。可是今天不是来绕圈的，而是来提供一个跨浏览器投影解决方案的。LOL。先来看一下效果：

我想，你可能首先想到的是 CSS 3 的 box-shadow。我也一样。对于 Gecko / Webkit / Opera 的实现，想象中来说，有一个很理想的方案是一个表达式即可实现。像：


box-shadow: 1px 3px 12px #aaa;

一句话，这就是CSS 3 提供给我们的。多漂亮。可惜，可惜，可惜，目前来说也只有 Opera 能显示正常。FT。想到 -moz -webkit 这了前缀了没？没错，这一句需要变成：


-moz-box-shadow: 1px 3px 12px #aaa; 
-webkit-box-shadow: 1px 3px 12px #aaa; 
box-shadow: 1px 3px 12px #aaa;

看看。代码看起来就一坨坨的，多恶心。不过，至少实现了我们的效果。而且，还是比较好的效果。最囧的是，IE，甚至 IE 9，都没有 box-shadow。废话少说，抱怨并不会让你上面那几行代码在 IE 下正常显示。那，我们有什么好的方法来实现一个 fallback 吗? FILTER！！很多时候我都会想，至少是找到解决方法了，即使代码并不好看。是吧，比如这里使用 Glow 和 Shadow 来实现。


/* gte ie8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#eeeeee,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=135,strength=6)"; 
 
/* lte ie7 */  
*filter: progid:DXImageTransform.Microsoft.Glow(color=#eeeeee ,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=135,strength=6);

好了，投影投下来了，但结果却是这样的：

我们要的是 box-shadow，可不是 text-shadow 呢。杯具。改 Doctype、层级、XX 都不行。这整个都是个杯具。然后，好吧。其实，你一定不耐烦了。给你一个方案吧。那就是给加个背景色。比如：


// hack for ie  
background: #fff;

这样，终于，显示了。当然，如下图。这依然是个杯具。这样的澡点，我们又不是搞艺术的。我的目的很简单。只是为了实现跨浏览器的投影，一样的投影，为什么就这么麻烦呢？

囧。继续继续。既然 PNG 半透明对于 IE6 本身来说就是一个杯具，就让我们从这个有澡点的结果入手吧。其实，这个，Glow 是有那么点问题。那么… 这个 Shadow 不是显示挺好么。??? 明白了没？对，对，就是这样，利用 Shadow 的方向。不使用 Glow，直接投向 0 、 90 、180 、270 四个面，不就行了么？哦哈哈，先让我们来写下代码：


/* gte ie8 */ 
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)"; 
 
/* lte ie7 */        
*filter: progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6);

结果，哈哈，自己测试吧。也附上全部代码：

测试页面：box-shadow demo


/* hack for ie */ 
background: #fff; 
         
/* sane web browsers */ 
-moz-box-shadow:1px 3px 12px #bbb; 
-webkit-box-shadow:1px 3px 12px #bbb; 
box-shadow:1px 3px 12px #bbb; 
         
/* gte ie8 */ 
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)"; 
         
/* lte ie7 */ 
*filter:  
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) 
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) 
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) 
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6);

话说，本来一句 box-shadow 就可以搞定的东西，竟然要写这么一坨很恶心的代码来实现。囧。同时，期待更好的方案！

标签
是不是块级元素

sofish — Sun, 01 Aug 2010 16:13:31 +0800

块级元素：block-level，相信大家都知道吧（or Google it）。以前在写代码的时候，面对 <li /> 标签总觉得很奇怪。为什么它可以设定高度，但又不像 <h1 /> 这些元素，那种感觉就像它是个“半内联"的（内联：inline[text]-level）元素。HTML 4是这样描述的：

The following elements may also be considered block-level elements since they may contain block-level elements:

DD – Definition description

DT – Definition term

FRAMESET – Frameset

LI – List item

TBODY – Table body

TD – Table data cell

TFOOT – Table foot

TH – Table header cell

THEAD – Table head

TR – Table row

via: HTML 4 Block-Level Elements

这段描述中，似乎也是在说， <li /> 就是一个"半内联"的元素。当然，这个列表里面的类似于 <td /> 这些元素，也曾给我带来这样的疑惑。今天看了一下各浏览器的默认CSS。结果是这样的：

Browsers	CSS
IE6/IE7	`li{display:block;`}
IE8+ / Webkit / Firefox / Opera	`li{display:list-item;`}

在这里，也基本上明了了。在除 IE6/7 以外的 A-Grade 浏览器中，就是一个"半内联"的元素。提到 display:list-item; ，其实，即使现在所有的 A-Grade 浏览器都支持，用的人其实不多。为什么？其实就是没什么用。在 Quirks Mode，PPK 是这样说的：

display: list-item means that the element is displayed as a list-item, which mainly means that it has a bullet in front of it (like an UL), except in IE 5 on Mac where it gets a number (like an OL). The numbers are buggy: all previous LI’s in the page count as one, so this example starts with number 5 (the screenshot was made before I inserted my compatibility-LI’s).

Live example:

display: block

display: list-item

display: list-item

Right。其实这个意义不大。但也算是解了自己的一个疑惑。分享出来，如果你也有这样的疑惑，或许下次 Coding 的时候出现 Bug 或者其他疑问，估计也就能很快反应过来了。

关于 HTML5 那点事

sofish — Fri, 30 Jul 2010 19:28:01 +0800

分享一下今天在公司“半月谈”分享会上的一个KeyNote。没现场听，可能看内容会有地方找不到头绪。无论你想简单了解，还是深入学习，强烈推荐一下《解读 HTML5：建议、技巧和技术》这篇文章。

View more presentations from sofish.

打败 IE 的葵花宝典：CSS Bug Table

sofish — Wed, 28 Jul 2010 21:00:35 +0800

原文发表于：Alipay UED Blog – 打败 IE 的葵花宝典：CSS Bug Table

作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。

今天，趁着想完善公司的内部样式框架，把HasLayout.net的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。

同时，由于整理仓促，有些理解和表达不当，以及其他纰漏在所难免，还请大家帮忙更正。谢谢。

	问题	浏览器	DEMO	解决方法
Hacking Rules: property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;
1	input[button \| submit] 不能用 margin:0 auto; 居中	IE8	bug \| fixed	为input添加width
2	body{overflow:hidden;}没有去掉滚动条	IE6/7	bug \| fixed	设置html{overflow:hidden;}
3	hasLayout的标签拥有高度	IE6/7	bug \| fixed	*height:0; _overflow:hidden;
4	form>[hasLayout]元素有margin-left时，子元素中的[input \| textarea] 出现2×margin-left	IE6/7	bug \| fixed	form > [hasLayout 元素]{margin-left:宽度;} form div{*margin-left:宽度÷2;}
5	当border-width有1条<边3条时被设置成dotted时，1px的边dotted显示成dashed	IE7	bug \| fixed	不在同一个元素上使用不同宽度的 dotted
6	当子元素有position:relative的时候，父元素设置overflow:[hidden\|auto]相当于给子元素设置了position:visible;	IE6/7	bug \| fixed	给父元素设置position:relative;
7	:hover伪类不能改变有position:absolute的子级元素的left/top值	IE7	bug \| fixed	把top/left的值设置成除0%外的所有百分值；或添加一个margin-[所有方向]除0外的所有值，包括0%
8	:focus + selector {} 选择器失效	IE8	bug \| fixed	在失效选择器后面添加一个空选择器, :focus{}
9	列表中混乱的浮动：在list中浮动图片时，图片出现溢出正常位置；或没有list-style	IE8	bug \| fixed	用背景图片替换list-style
10	th 不会自动继承上级元素的 text-align	IE8	bug \| fixed	给th添加text-align:inherit;
11	样式(包括link/style/@import(link)) 最多允许个为是：32	IE6-8	─ 常识	99.99%的情况下，不会遇到
12	:hover 时若background-color为#fff, 失效	IE7	bug \| fixed	把background-color改成background。或者，非#fff \|\| #ffffff
13	忽略’>’后有注释的选择器：selector> /**/ selector{}	IE6	bug \| fixed	官方DEMO有误
14	* html	IE6	─ HACK	只对IE6有效
15	PNG图片中的颜色和背景颜色的值相同，但显示不同	IE6-7	bug \| fixed	利用 pngcrush 去除图片中的 Gamma profiles
16	margin:0 auto; 不能让block元素水平居中	IE6-8	bug \| fixed	给block元素添加一个width
17	使用伪类 :first-line \| :first-letter, 属性的值中出现!important 会使属性失效	IE8	bug \| fixed	!important is evil, don’t use it anymore
18	:first-letter 失效	IE6	bug \| fixed	把 :first-letter 移到离{}最近的地方，如 h1, p:first-letter{}，而非 p:first-letter h1{}
19	Position:absolute元素中，a display:block, 在非:hover时只有文本可点击	IE6/7	bug \| fixed	给a添加background, 如果背景透明，使用background:url(‘任何页面中已经缓存的文件链接’)，不推荐background：url(#)[官方的解决方法]，因为会增加一下HTTP请求
20	float列表元素不水平对齐：li不设置float，a设置display:block;float:[方向]，li不水平对齐	IE6/7	bug \| fixed	给li设置display:inline 或 float:[方向]
21	dt, dd, li 背景失效	IE6	bug \| fixed	dt, dd, li{position:relative;}
22	<noscript />元素的样式在启用javascript的情况下显示了样式	IE6-8	bug \| fixed	利用js给<noscript />添加display:none;
23	使用filter处理的透明背景图片的透明部分不可点	IE6-8	bug \| fixed	把background:none变成background:url(‘链接’)，链接到本身和图片之外的任何文件
24	li内元素偏离 baseline 向下拉	IE8	bug \| fixed	给li设置display:inline 或 float:[方向]
25	列表中li的list-style不显示	IE6/7	bug \| fixed	给li添加margin-left，留空间来显示（不要加在ul上）
26	图片不能垂直居中	IE6/7	bug/fixed	添加一个空标签，并赋给"Layout", 比如display:inline-block;
27	不能自定义指针样式	IE6-8	bug \| fixed	给指针文件设置绝对路径
28	背景溢出，拖动滚动条后显示正常	IE6	bug \| fixed	给父元素添加overflow:hidden防止溢出，并赋予hasLayout,如果添加_zoom:1;
29	高度超过height定义的高	IE6	bug/fixed	添加_overflow:hidden;(推荐)或者_font-size:0;
30	宽度超过width定义的宽	IE6	bug/fixed	添加_overflow:hidden;
31	双倍边距	IE6	─ 常识	添加display:inline到float元素中
32	margin负值隐藏：hasLayout的父元素内的非hasLayout元素，使用负边距时，超出父元素部分不可见	IE6/7	bug/fixed	去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;
33	给两个浮动元素的某中一个的文字设定为斜体，另一个元素下拉在有斜体文字元素的下面	IE6	bug/fixed	给有斜体文字的元素添加overflow:hidden;
35	3px 间隔：在float元素后的元素，会有3px间隔	IE6	bug/fixed	因为是确切的3px，所以，用“暴力破解”吧，比如_margin-left:-3px;
35	text-align 影响块级元素	IE6/7	bug/fixed	整理你的float；或者分开设置text-align

Javascript 的 this 关键字

sofish — Sat, 24 Jul 2010 13:41:41 +0800

Javasrcipt的 this 是个神奇的东东，其指向很难把握。不过，有一个原则，可是说是理解 this 的关键，那就是，它指的是调用函数的那个对象。看看这个例子：

function fn(){
    alert(this.ref)
};

var obj = {};

// 定义 ref
obj.ref = "hello world";

obj.fn2 = fn;
obj.fn2();

fn() 中的 this，指向的是 obj 这个对象，因此，ref 的值是 "hello world" 。

REF: The this keyword | Javascript 的 this 用法

解读 HTML5：建议、技巧和技术

sofish — Tue, 20 Jul 2010 21:33:43 +0800

想总结一下HTML5 的支持列表，写了许久，无果。在众多文章中，这篇文章涉及到了我想到的，以及没想到的。遂做粗略的翻译，因个人英文水平一般，本文FYI。原文请看：HTML5 Unleashed: Tips, Tricks and Techniques。

=====

现今我们能用 HTML5 吗，能用它做些什么呢，是否真的是 Flash 杀手？想必你也注意到了这些日渐增长且常被问起的类似问题，被讨论着，甚至被回答过。在我看来，你必须自己回答这些基本的问题。

这篇文章的本意是想帮你通过一些基本指南的学习，以轻松学习代码模板。一旦你熟悉了这些基本，并想更进一学习，你还将会找到更多提供了建议、技巧和技术的有用资源。

HTML 5 特性

官方详细的文档是寻找 HTML5 特性的最好地方，当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性：

语义化标记
Form 表单增强功能
视频 / 音频
画布（Canvas）
可编辑内容
拖放
稳健的数据存储

检测浏览器支持

在你开始尝试 HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走：

你还可以运行 Javascript（用Javascript 检测浏览器特性）来检测 HTML5 特性的支持。你还应该用用Modernizr：一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。

你可能也会想留意不断变化的"浏览器市场份额分享" — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。

值得注意的变更点

除了新的特征，你还应该记下这些重要的变更点：

简洁的 DOCTYPE HTML5 只需一个简洁的文档类型：<!DOCTYPE html>。它有意不使用版本，因此文档将会适用所有版本的HTML。
简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang="en"> 将对 HTML5 有效。
简单易记的编码类型 你现在可以在 meta 标签中使用 "charset"：<meta charset="utf-8″ />
不需要闭合标签 在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。
废弃的标签 下面这些标签并不被 HTML5 支持： <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp>

简单代码示例:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Document</title>
</head>
<body>

</body>
</html>

你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。

语义化标记

HTML5 新增的一些新标签除了不仅仅是更具语义的 <div> 标签的替代品，并不提供额外的功能。这些都是新增的标签：<article>、<section>、<aside>、<hgroup>、<header>, <footer>、<nav>、<time>、<mark>、<figure> 和 <figcaption>。

这些标签被除了IE 外的所有现代浏览器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+）支持。Javascript 提供了document.createElement(tagName) 的方法，让你可以用来创建新的 HTML5 标签。代替自己创建这些元素，你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。

你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset：

简单代码示例: 兼容 IE 的 HTML5 页面布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Semantic Markup Demo: Cross Browser</title>
    <link rel="stylesheet" href="html5reset.css" type="text/css" />
    <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
    <!--[if lt IE 9]>
        <script src="html5.js"></script>
    <![endif]-->
</head>
<body>
    <header>
        <hgroup>
            <h1>Page Header</h1>
            <h2>Page Sub Heading</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <article>
        <header>
            <h1>Article Heading</h1>
            <time datetime="2010-05-05" pubdate>May 5th, 2010</time>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <section>
            <header>
                <h1>Section Heading</h1>
            </header>
            <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
            <footer>
                <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p>
            </footer>
        </section>
        <section>
            <header>
                <h1>Section Heading</h1>
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <figure>
                <img src="item-1.png" alt="Club">
                <img src="item-2.png" alt="Heart">
                <img src="item-3.png" alt="Spade">
                <img src="item-4.png" alt="Diamond">
                <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption>
            </figure>
            <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p>
            <footer>
                <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p>
            </footer>
        </section>
        <footer>
            Article Footer
        </footer>
    </article>
    <aside>
        <header>
            <h1>Siderbar Heading</h1>
        </header>
        <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
    </aside>
    <footer>
        Page Footer
    </footer>
</body>
</html>

注意：没有一个 div 标签，id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。

注意：这个示例在 IE6 下并未正常显示。这只是因为我使用 CSS child combinators 来避免使用额外的 class。你可以在 IE6 下用自己的 CSS ，像其他浏览器一样处理 HTML5 标记。

其他资源

表单增强

HTML5 为表单提供了几个新的属性、input 类型和标签。到目前为止，只有 Opera 对HTML5 有比较好的支持。你因此应该下载 Opera 来查看大部分新特性如何工作。

新的INPUT类型
color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, 和 url
新属性
required, autofocus, pattern, list, autocomplete 和 placeholder
新元素
<keygen>, <datalist>, <output>, <meter> 和 <progress>

值得高兴的是尽管支持有限，使用这些特性也是个不错的选择。因为新的 INPUT 类型会漂亮地降级为 TEXT 类 INPUT（译注：INPUT 的默认 type 为 text）。且记住现今你仍可以折衷使用 Javascript 控制表单（这个技巧是指首先检测浏览器自身支持，然后才是使用折衷方法）。

简单代码示例：列出一些今天你可以拿来测试的新特性

<form>
    <fieldset>
        <legend>New Attributes</legend>
        <p>
            <label>Required:</label>
            <input type="text" name="html5requied" required="true">
            <small>Works in Opera & Chrome</small>
        </p>
        <p>
            <label>AutoFocus:</label>
            <input type="text" name="html5autofocus" autofocus="true">
            <small>Works in Opera, Chrome & Safari</small>
        </p>
        <p>
            <label>PlaceHolder:</label>
            <input type="text" name="html5placeholder" placeholder="This Will Show in WebKit">
            <small>Works in Chrome & Safari</small>
        </p>
        <p>
            <label>Input Pattern:</label>
            <input type="text" pattern="[0-9][A-Z]{3}" name="html5pattern" required title="Enter a digit followed by three uppercase letters"/>
            <small>Works in Opera & Chrome</small>
        </p>
        <p>
            <label>Multiple Files:</label>
            <input type="file" name="html5multiplefileupload" multiple>
            <small>Works in Chrome, Safari & Firefox</small>
        </p>
        <p>
            <label>List:</label>
            <input type="text" name="html5textwithdatalist" list="colors">
            <datalist id="colors">
                <option value="Red">
                <option value="Green">
                <option value="Blue">
            </datalist>
            <small>Works in Opera</small>
        </p>
    </fieldset>

    <fieldset>
        <legend>New Input Types</legend>
        <p>
            <label>Email:</label>
            <input type="email" name="html5email">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>URL:</label>
            <input type="url" name="html5url">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>Number:</label>
            <input type="number" name="html5number" min="1" max="10" step="1" value="1">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>Range:</label>
            <input type="range" name="html5range" min="-100" max="100" value="0" step="10">
            <small>Works in Opera, Chrome & Safari</small>
        </p>
        <p>
            <label>Time:</label>
            <input type="time" step="900" name="html5time">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>Date:</label>
            <input type="date" name="html5date">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>Month:</label>
            <input type="month" name="html5month">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>Week:</label>
            <input type="week" name="html5week">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>DateTime:</label>
            <input type="datetime" name="html5datetime">
            <small>Works in Opera</small>
        </p>
    </fieldset>

    <div><button>Submit</button></div>
</form>

在我们的 DEMO 中的出现的特性，都顺利地运行在 Opera 上，但你仍需要使用 Chrome 或 Safari 来看其他小部分功能的实际运行状态（View Demo）。

了解更多:

工具 & 资源列表:

不需要插件的视频和音频

HTML5 对视频和音频特性规范文档的制定是被讨论最多的。除浏览器自带支持的明显好处外，评论点集中在浏览器提供商对音频/视频格式的不同选择。如果你准备使用HTML5的 <audio> 和 <video>，使你熟悉下面这些视频/音频的解码器和浏览器支持是非常重要的：

音频: ogg (ogg, oga), mp3, wav, AAC
视频: ogg (ogv), H.264 (mp4)

另外你还需要留意一下 Google 的 VP8 视频解码，这个将被作为一个开源格式来结束（格式选择的）纷争。HTML5 提供的一个解决方案是，让你可以指定多个不同格式的源文件，以便于用户浏览器选择它认识的文件。对于 < IE9 和旧浏览器，你将需要一个折衷的解决方案。

当你第一次尝试 HTML5 的音频/视频，你可能会想知道这些可能对你有帮助的东东：

你的服务器必须支持你打算提供的音频/视频的 MIME 格式。你将需要检查一下其在本地服务器上是否被支持。
如果你使用 Safari 来检测 HTML5 的音频/视频支持，需要安装 QuickTime Player，没有QuickTime Player 的 Safari 什么都不能播放。

简单代码示例：音频标记 (View Demo)

<audio controls>
        <source src="demo-audio.ogg" />
        <source src="demo-audio.mp3" />
</audio>

简单代码示例：视频标记 (View Demo)

<video width="320" height="240" controls preload="none" poster="videoframe.jpg">
    <source src="demo-video.mp4" type="video/mp4" />
    <source src="demo-video.ogv" type="video/ogg" />
</video>

译注：记得加上type，不然，即使格式对了，也可能播放不了

尽管相对于要依赖第三方插件已经迈了一大步，但上面提供的示例，只是一个开始。由于各个浏览都提供了不同外观的控制栏，你可能会希望改变他们以适应你的设计。看看下面例子如何利用 DOM API 来创造一个属于你自己的自定义控制栏。

简单代码示例：拥有自定义控制栏的视频 (View Demo)

<video width="320" height="240" preload="none" poster="videoframe.jpg">
    <source src="demo-video.mp4" type="video/mp4" />
    <source src="demo-video.ogv" type="video/ogg" />
</video>

<script>
    var video = document.getElementsByTagName('video')[0];
    function toggleMute() {
        video.muted = !video.muted;
    }
</script>
<p>
    <a href="JavaScript:video.play();">Play</a> |
    <a href="JavaScript:video.pause();">Pause</a> |
    <a href="JavaScript:toggleMute();">Sound On/Off</a>
</p>

你还可以利用 DOM API 来为音频/视频做更多。而且如果你乐意添加一些其他的东西，将会把这个带向一个完全不同的级别。例如，你可以把视频放到了 HTML5 canvas 元素中。这将会允许你读取一个视频的像素数据、控制、和帧，并做一些你想做的好玩的东东。（自己看看：Blowing up HTML5 Video, Ambilight for HTML5 Video）

了解更多：

跨浏览器解决方案：

Javascript 交互：

处理 HTML5 视频的 Mootools

编码、转换工具：

基于 JavaScript 的 2D 绘画

HTML5 中最让人兴奋的特性是 <canvas> — 那个用来作画的东东。在你的页面中插入 canvas 就像插入其他标记一样平常，但你将需要一些编程的经验来绘制形状、图表、动画、游戏、图片作品等。

在除 IE 外的所有现代浏览器（Firefox 3, Safari 3.1, Chrome 2, and Opera 9.6）都支持 Canvas。你可以使用 ExplorerCanvas 这个 Javascript 解决方案来为 IE 添加这个新特性。

简单示例代码: 基于指令的 HTML5 Canvas 2D 绘画 (View Demo)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Canvas Demo</title>
    <link rel="stylesheet" href="html5reset.css" type="text/css" />
    <link rel="stylesheet" href="html5simple.css" type="text/css" />
    <!--[if lt IE 9]>
        <script src="html5.js"></script>
        <script src="excanvas.js"></script>
    <![endif]-->
        <script type="text/javascript">
        function draw(){
            var canvas = document.getElementById('mycanvas');
            if (canvas.getContext){
                var ctx = canvas.getContext('2d');

                // Draw Rectangle
                ctx.fillStyle = "rgb(255,0,0)";
                ctx.fillRect (10, 10, 100, 100);

                // Draw Circle
                ctx.fillStyle = "rgb(0,255,0)";
                ctx.beginPath();
                ctx.arc(125,100,50,0,Math.PI*2,true);
                ctx.fill();
                ctx.closePath();

                // Draw Custom Shape With Lines
                ctx.fillStyle = "rgb(0,0,255)";
                ctx.beginPath();
                ctx.moveTo(125,100);
                ctx.lineTo(175,50);
                ctx.lineTo(225,150);
                ctx.fill();
                ctx.closePath();

                // Draw Image From External File
                var myImage = new Image();
                myImage.onload = function(){
                    ctx.drawImage(myImage, 220, 10);
                }
                myImage.src = "sample.jpg";

            }
        }
        </script>
        <style type="text/css">
            canvas {
                border: 5px solid #ccc;
                background: #000;
            }
        </style>
</head>
<body onload="draw();">
    <header>
        <h1>HTML5 Canvas Demo</h1>
    </header>

    <figure>
        <canvas id="mycanvas" width="300" height="200">Fallback content, in case the browser does not support Canvas.</canvas>
        <figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>
    </figure>
</body>
</html>

了解更多:

工具 & 资源列表：

示例 & 应用：

让内容可编辑

如果你想让页面的某个地方，允许用户编辑页面，所有的你需要做的事就是添加 contenteditable 属性到父容器中。你可能曾在 WYSIWYG 编辑器中看过。这个属性是 HTML5 的一部分，且它几乎被所有主流浏览器支持（Internet Explorer 5.5+, Firefox 3+, Safari 3.1+, Chrome 2+, and Opera 9.6+）：

值得注意的是设置 contenteditable="true" 只是允许用户编辑、删除、插入内容，并不会自动提供其他类似于 WYSIWYG 编辑器的保存或应用样式的功能。你将需要自己用 Javascript 来添加这些功能。

简单示例代码: 有加粗、倾斜和下划线功能的基本编辑器 (View Demo)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 ContentEditable Demo</title>
    <link rel="stylesheet" href="html5reset.css" type="text/css" />
    <link rel="stylesheet" href="html5simple.css" type="text/css" />
    <!--[if lt IE 9]>
        <script src="html5.js"></script>
    <![endif]-->

    <script language="javascript">
    function editStyle(cmd) {
        document.execCommand(cmd, null, null);
    }
    </script>
</head>
<body onload="draw();">
    <header>
        <h1>HTML5 ContentEditable Demo</h1>
    </header>

    <div id="democontainer">
        <div id="editingcontrols">
            <a href="#" onclick="editStyle('bold');">[Bold]</a>
            <a href="#" onclick="editStyle('italic');">[Italic]</a>
            <a href="#" onclick="editStyle('underline');">[Underline]</a>
        </div>
        <div id="editor" contenteditable="true">
            <h2>HTML5 Standardized Content Editing</h2>
            <p>Thanks to Microsoft; HTML elements are editable since Internet Explorer 5.5....</p>
            <p>To edit just start typing. To change style, select text and click on links in the tools bar.</p>
        </div>
    </div>

</body>
</html>

了解更多：

工具 & 资源列表：

拖放

HTML5 的拖放将会把与用户交互带向别一个等级，并将会对你如何设计用户交互产生重大影响。现今，Firefox 3.5+ 已经对此特性提供了最大化的支持，其他浏览还只是保守地支持了一小部分（Opera 完全不支持）。不幸的是根据现阶段浏览器提供商的执行状况，你将需要依赖大量的 Javascript 和 CSS 来让做跨浏览器支持。

注意：

图片和超链接默认是可拖放的。对于所有的元素，HTML5 引进了一个新的属性"draggable"，这将用来设置元素是否接受拖放；
下列事件对应 HTML5 的拖放：dragstart, drag, dragenter, dragover, dragleave, drop 和 dragend。当你要fire掉事件的时候，将需要写 function (事件处理器) 来处理你需要的，也可能需要给元素绑定事件或做事件指派来简化你的代码；
拖放事件还让你可以通过被拖放元素来传递数据，使用事件属性"dataTransfer" 的 getData 和 setData 方法。
你可以在不同的浏览器或程序中进行拖放。

简单代码示例: 将图片拖放到另一个窗口 (View Demo)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Drag & Drop Demo</title>
    <link rel="stylesheet" href="html5reset.css" type="text/css" />
    <link rel="stylesheet" href="html5simple.css" type="text/css" />
    <!--[if lt IE 9]>
        <script src="html5.js"></script>
    <![endif]-->

    <script>
    function DragHandler(target, e) {
        e.dataTransfer.setData('Text', target.id);
    }

    function DropHandler(target, e) {
       var id = e.dataTransfer.getData('Text');
       target.appendChild(document.getElementById(id));
       e.preventDefault();
    }
    </script>
</head>
<body>
    <header>
        <h1>HTML5 Drag & Drop Demo</h1>
    </header>
<div id="dndcontainer">
    <div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false" class="dndbox">
        <img src="item-1.png" id="club" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
        <img src="item-2.png" id="heart" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
        <img src="item-3.png" id="spade" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
        <img src="item-4.png" id="diamond" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
    </div>

    <div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false" class="dndbox"></div>

    <div id="demonotes">Drag and drop images from one container to another. Works in all major browsers except Opera.</div>

</div>

了解更多:

JavaScript 解决方案：

稳健的数据存储

Web 存储规范提供了与 HTTP session cookies 相似的稳健的 Web 存储属性。他们是"sessionStorage" 和"localStorage"。

sessionStorage 用以存储浏览最顶层环境生存周期内的数据。例如浏览器 Tab 的或窗口持续打开周期内的数据。
localStorage 用以存储周期较长、多页面，以及多浏览器 session 的内数据。甚至持续到你重起浏览器或者电脑。

本地和 session 存储特性被如下浏览器所支持：IE8+, Firefox 3.5+, Safari 4.0+, Chrome 2.0+ and Opera 10.5+。

简单代码示例: 使用 localStorage 来创建页面计数器 (View Demo)

<p>You Have Viewed This Page <b>
<script>
    if (!localStorage.pageCounter)
        localStorage.setItem('pageCounter',0);
    localStorage.setItem('pageCounter',parseInt(localStorage.pageCounter)+1);
    document.write(localStorage.pageCounter);
</script>
</b> Time(s).</p>

<p><input value="Clear localStorage" type="button" onClick="localStorage.clear();location.reload(true);" />
<input value="Reload Page" type="button" onClick="location.reload(true);" /></p>

你也可以把上面的代码中所有的 localStorage 的实例替换成 sessionStorage 来测试 sessionStorage。你的计数器将会在你关闭 Tab 或窗口前正常工作。如果你重起浏览器，计数器将会重新计数 (View Demo) 。

了解更多:

学习 HTML5 Local Storage

JavaScript 解决方案:

示例 / 展廊

HTML5 Demos and Examples
一系列由 Remy Sharp 制作的 HTML5 实验
HTML5 Presentation
由 Marcin Wichary 开发，Ernest Delgado 修改。这个报告展示了桌面和移动浏览器上的 HTML5 特性
Information and Samples for HTML5 and related APIs
一系列由 Robert Nyman 制作的 HTML5 演示和例子
HTML5 Gallery
收集使用 HTML5 标记网站的Gallery

帮助手册

框架

Less
一个为多种屏幕宽度提供灵活多栏布局，由驱动于 HTML5 的 CSS 框架
52Framework
一个以让你在今天就能在项目上应用 HTML5 和 CSS3 的页面开发框架
SproutCore
一个由 Ruby gem 写的 JavaScript HTML5 应用程序框架。
Frame
Frame 是一个支持 Layout, Typography, Forms, Code, Table, Reset, 和 Print 标签样式化，并提供 HTML5 默认样式和元素支持的 CSS 框架

综述性文章 & 教程

用 HTML5 制作手机web程序
By Michael Galpin (IBM developerWorks – May 6th, 2010)
Touch The Future: 用 HTML5 和 CSS3 制作更优雅的网站
By Piervincenzo Madeo (PV.M Garage – April 23rd, 2010)
现在如何在你的客户需求上使用 HTML5
By Richard Clark (HTML5 Doctor – March 30th, 2010)
使用 HTML5 制作web 应用程序
By Michael Galpin (IBM developerWorks – March 30th, 2010)
如何制作一个 HTML5 iPhone App
By Alex Kessinger (Six Revisions – March 26th, 2010)
为什么 HTML5 值得你花时间
By Mac Slocum (O’Reilly – March 15th, 2010)
HTML5 让我震惊了
By Shane Jeffers (Three Styles – March 11th, 2010)
使用 HTML5 和 CSS3 创建时尚网站
By Joe Lennon (IBM developerWorks – March 2nd, 2010)
用 HTML5 和 CSS3 制作一个向后兼容的单页作品集页面
By Tom Kenny (Inspect Element – January 25th, 2010)
HTML5 将会如何改变你使用网站的习惯
By Kevin Purdy (Lifehacker – December 1st, 2009)
Coding A HTML 5 Layout From Scratch
By Enrique Ramirez (Smashing Magazine – August 4th, 2009)
HTML5 和 CSS3 的威力所在
By Jeff Starr (Perishable Press – July 19th, 2009)
是的，今天就可以使用 HTML5 了!
By Bruce Lawson (SitePoint – July 1st, 2009)
HTML5 中的新元素
By Elliotte Rusty Harold (IBM developerWorks – August 7th, 2007)

示例 & 下载

你可以下载打包了所有 Demo 的 ZIP 文件。注意：视频/音频并没有包含在下载中。

查看Demo | 下载演示文件

==========

文章后面的那句话就不翻啦，套话。对于个人来说，目前会逐渐接触更多的 HTML5 和 CSS3 相关的新技术，希望能在后续的学习和研究中有所收获，并能将其应用到产品中，以提升产品在功能、速度和视觉上的体验。

去除按钮、链接中的虚线框

sofish — Sun, 04 Jul 2010 17:58:50 +0800

话说，对于去除虚线框，即使是一个前端开发工作者，也可能不知道所有的潜规则。因为很多情况下，它是一个视觉上的辅助，并且盲人们需要它（怎么个需要法，别问我），我们并不需要去掉。但在图片替换文字，或者虚线显示不规则的时候，去掉它对于一个产品来说会是更完美的。

如何去除虚线框

对于如何去除虚线框，有很多人推荐这样写：

a:focus, input[type=button] ,input[type=submit] {
        outline:none;
}

从这段代码来看，让我们小分析一下，有两点可能是需要我们注意的：

去除不全面
IE6/7 并不支持 outline 属性, firefox 下 input 的虚线并没有去除
去除太多
除 IE6/7 外的所有浏览器的按钮（firefox没去掉）和链接都被去掉虚线框

这是看起来矛盾的两个问题。其实不然，因为是两个现同性质的问题。从技术上，这个方法并不全面。从体验上，我想你也知道，我们只是去掉部分不需要的，去掉全部并不友好。所以，上面的写法个人并不推荐。

关于潜规则、关于BUG

Demo: 去虚线框 | remove outline

我能在用 TAB 键的时候不去掉虚线框吗？为什么我的 input 在 firefox 下没有成功去除虚线框？这些问题被提出的时候，困扰着不少人。因为这里面有潜规则。总结一下，看这个表：

去除的方式	生效的浏览器
`outline:none`	IE8 \| Firefox \| Webkit \|Opera
`hidefocus`	IE
`:focus{outline:none;}`	IE8 \| Firefox \| Webkit \| Opera
`:active{outline:none;}`	同上，但在tab的时候，IE将保留虚线框
`::-moz-focus-inner{outline:none;}`	Firefox 存着bug，`input` 须要去这个伪状态下的边框

好吧，不得不承认的是，这些小事，都还真是一门学问，我们要好好学习，好好积累。多用点心，把东西做得更好。

前端开发值得一看的文章（2）

sofish — Thu, 10 Jun 2010 23:56:40 +0800

看到RSS订阅有5000人了，表示挺欢乐的。然后，想写点东西。想写写关于CSS滤镜的问题，也想写写关于以业务为导向的CSS框架设计，一个没有深入研究过，一个写起来太长，暂时没那么多时间。所以，分享吧，分享吧。大部分都是在twitter上分享过的，觉得对得起标题的：

Browser Detector With CSS

文章里说了，这样的小技巧是基于成熟的CSS Hack来的，并不推荐。不过，这样的思路，是我们都应该有的，通向结果的路有千万条，打开你创意的盒子，大胆做吧。
Gmail 对锚点处理的技巧

Google 和 Yahoo 不用多表扬，大家都知道，很多产品的技术，都成为了最佳实践。比如 Gmail 在锚点的处理上。
Wrapping Long URLs and Text Content with CSS

话说，这里考虑的情况真多，其实，没这个必要。不过，全面的、深入的研究又有什么不好呢，如果你有时间的话！这是小细节，却可以是100%完美用户体验的99%。
Quick Tip: Using JSLint

JSLint 也不常用，正想找时间熟悉一下。刚好 Nettuts 出了这文章，她的文章总是那么经典，收藏之。
Opera下的max-width BUG

Opera 总是最麻烦的，要么没 BUG，要么，一个 BUG 就让你想撞豆腐寻死。BTW，Opera 怎么还不想支持 border-radius 呢，即使是出个像要加 -moz -wekit 这样恶心前缀的东西也没关系。
How to Use the New Google Font API

@font-face 的时代很快会到来的，能自定义字体，多漂亮，难道不是么。Google 来了，用吧用吧，设计师们，前端们，还有想用的人们。
Data URI&MHTML: 用还是不用？

对于 Data URI，自己也只是一直在看而已，没深入了解。Yahoo 的某大师站出来解说了，而这篇文章总结了，给了使不使用 Data URI 的答案：
- 能使用sprite的地方尽量使用sprite
- 不方便使用sprite的时候才使用data uri
CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

很多东西都比你想象来得快。比如 HTML5 之前是说22年后可能才会出来，但现在多少人已经在尝试，并且得到了可喜的结果，比如 Google wave；CSS 3 也是，连我都在尝试。
如何更好地控制input输入框的高度

百度用户体验的这篇文章真不错，input 真是个难搞的东西，比如 type="file" 在 firefox 中并没有 cursor:pointer 的效果。
各浏览器的并行连接数（同域名）

让你知道，HTTP 请求是多奢侈的事，然后再去明白缓存是多重要的事。

然后，结束吧，像比武友谊赛一样，点到为止。而且，如果太多了，还能是保证"精华"的度么。

长不大的孩子们，六一快乐

sofish — Tue, 01 Jun 2010 00:52:59 +0800

你只是个孩子。不断寻找自己喜欢的东西，不断失去，也一直在获得，有悲有喜。在我眼中，你只是个孩子，像其他孩子一样。你可以成熟，你可以不断超越，你可能已经身为其他人长辈，你可能不再过六一，这依然没有改变，在我眼中，你只是个孩子。有着善良的心，和可能不再是年少一样清澈的笑。

我想，自己也已经长大了。不过，我想，我和你一样，在某些人眼中，只是个孩子。也会对着某些人，把自己当孩子。今天，还过六一。想起小时候学校会发酸奶和香蕉，想起给了自已很多糖的师姐，想起一去儿童公园玩的大孩子，还有其他很多很多一起过六一的孩子们。我们都，只是，长不大的孩子。希望自己快乐。也希望同伴们快乐。希望像个孩子般用心生活，用心去期待。

想说六一快乐！

============================

想要写好多文字的。这一写，更多的是在回想。听说，人一回想，就老了。没事，这并不是坏事。这能让我变得更容易有耐心，更淡定。你也一样的。多好。对任何眼中的孩子来说，多好。^,^… 然后，晚安，晚安，Wishing u a bright Children’s Day, a brighter smile…

由 Tahoma 引起的 IE8 Bug (送个IE8 hack)

sofish — Thu, 20 May 2010 21:22:12 +0800

字体真是个麻烦的东西，然后又是个重要的东西。为以更方的解决字体问题，就像上次推荐的《再谈 Web 默认字体》，为了Pixel Perfect，我们不断纠结。像支付宝在CSS Reset中是这样写的：


body{font:12px Tahoma,Helvetica,Arial,'宋体',sans-serif}

而淘宝这样写：


body, button, input, select, textarea {font:12px/1.5 tahoma,arial,'宋体',sans-serif;}

个人偏向于淘宝的写法，显然，button/input/select/textarea的字体都是要重设才会显示正常的。这里并不是为了讨论这个，而是这里面都有 tohama 这种字体，它是今天的主角。因为字体显示好，也因为导致 BUG 而被搬上台面。让我们来先看一个Demo:

Here: IE8 Tahoma Font-family bug

如果你是从 IE8 打开，将会看到第一个按钮有错位。如标题所说，你懂的，这就是 Tahoma 给我们带来的问题。而解决方案很简单，就是避用 tahoma 字体，其他的随便。比如：


body, button, input, select, textarea {font:12px/1.5 arial,'宋体',sans-serif;}

在支持没有那么完美的状况下，这样的解决方式可以说是完美的。即使你像我一样也有一套 Hack 兼容方案，还是不推荐使用暴力方式，我们的目标是、也应该是更有效、更优雅。

然后，其实 hack IE 8的时候，可以考虑 selector{property:value\0;} 这样的方法来，因为这是 IE8+ 独有的方法。Hmmm… 多好，虽然有点暴力。最后，推荐一下鸽子工友。解决这个 Bug，还得归功于他。

——————————–

经过一条完美分割线从火星来到地球，囧，刚刚还测试了arial放在前面是可以的，而且早上测试过，不过，事实证明测试要更小心，要多次，不然可能刷出来的是缓存。事实的解决方法似乎是这样的：

有中文和英文混排的时候，怎么写都无所谓；
只有中文的时候，放在前面最好的系统所拥有的字体，或者一种系统没有的字体来让他显示默认字体；
全英文就更是所所谓了

多谢帮助寻找真相的 Justice 和默默同学，一个问到底，一个提供一个非中文的 IE8 显示效果图片。

幸福收藏夹

跨浏览器实现投影(box-shadow)那点事

标签 是不是块级元素

关于 HTML5 那点事

打败 IE 的葵花宝典：CSS Bug Table

Javascript 的 this 关键字

解读 HTML5：建议、技巧和技术

检测浏览器支持

值得注意的变更点

语义化标记

表单增强

不需要插件的视频和音频

基于 JavaScript 的 2D 绘画

让内容可编辑

拖放

稳健的数据存储

更多____

网页版离线程序

跨文档通讯

用 className 访问 DOM 元素

更多的特性

相关技术

额外的资源

必要的书签

示例 / 展廊

帮助手册

框架

综述性文章 & 教程

示例 & 下载

去除按钮、链接中的虚线框

如何去除虚线框

关于潜规则、关于BUG

前端开发值得一看的文章（2）

长不大的孩子们，六一快乐

由 Tahoma 引起的 IE8 Bug (送个IE8 hack)

标签
是不是块级元素