不名一格

让ie6\7浏览器完美识别HTML5标签

作者：idd.chiang 发布时间：March 2, 2010 分类：HTML/CSS,Javascript/AS,前端观察

近几年WEB前端发展日趋成熟，DIV布局已经作为前端人员的必修课，DIV+CSS可以让Web页面展现无所不能，但当DIV滥用时，各种混乱 div布局导致代码可读性极低。此时yahoo最先提倡标签语义化和classname语意命名，但HTML4.01中的标签数目比较小，对于日新月异的 web布局支持实在有限，语意到最后的结果就是，classname无数,为语意存在的各种单词、拼音、字母充斥在页面。

HTML5 w3c已经推出有很长一段时间了，新增的标签也是为了以上弊端以及新功能。下面让ie6\7识别HTML5新增标签这种方法其实是一个取巧。这种做法对于代码洁癖者是个福音，也符合渐进增强Progressive Enhancement、优雅降级（Graceful Degradation）的原则，“好奇害死猫”，往下看，也让我们尝尝鲜吧。

下面先看看HTML5标签搭建的简单博客 » HTML5 Demo
一段简单的脚本，让ie6、ie7能识别HTML5新增标签，脚本如下：

(function(){if(!/*@cc_on!@*/0)return;
	var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),
	i=0,
	length=e.length;
	while(i<length){
		document.createElement(e[i++])
	}
})();

WEB颜色选取工具（组件）和颜色格式转换

作者：idd.chiang 发布时间：February 28, 2010 分类：HTML/CSS,Javascript/AS,前端观察

经常会使用Photoshop去取自己想要的颜色,选色还得等待PS的长时间loading，费时费力。抽空整理了两个互联网开源的颜色拾取器，加了转化、拷贝，方便使用。

1.颜色拾取器（Canvas） Color Picker 2.0

这个工具有点像illustrator里的颜色选择器，有HSV，RGB两种颜色设置，CSS3现在已经广泛支持这两种颜色属性，如：hsl(240,100%,50%) 和 rgba(255,0,100,0.8)；对于获得颜色的值，如果我们使用PS，还得打开颜色管理器，这个工具可以有效增加前端工程师颜色选择的效率。工具栏中颜色渐变条是对Canvas Dom的getContext() 方法返回线性颜色渐变的一个 CanvasGradient 对象在Canvas画布上。

2.颜色拾取器 Color Picker 1.0

两个工具都用到了一个开源颜色转换脚本 (Color_Conversion_Library)，这样我们很容易互相换算各种WEB颜色格式,第三个转换就是一个简单尝试。

直接去感受下在线颜色拾取器：在线颜色拾取器

推荐图文列表以及CSS布局切换

作者：idd.chiang 发布时间：February 23, 2010 分类：HTML/CSS,Javascript/AS

经常碰到图文列表的排列，怎样既符合语义化标签又能扩展出多种表现形式呢。自己做过许多布局设计，总结出一点小经验和技巧。

列表的HTML构成：

<div class="box">
  <ul>
    <li>
      <div class="item">
        <a href="url"><img src="src" alt=""/></a>
        <h3><a href="url">TITLE</a></h3>
        <p>Description</p>
      </div>
    </li>
    ... items ...
  </ul>
</div>

在列表布局中，我们经常会选用float属性来实现横向排列，要实现每一行都整齐排列，我们必须固定列表项的高度，否则会发生意想不到的混乱表现。但实际应用中，图片不一定都同尺寸，按比例来表现势必会与我们固定列表高度或宽度相驳，也许还有图片底边对齐的要求。为了实现这种效果，这里用到了ie6不支持的display:inline-block；ie通过使用“display:inline;zoom:1”来hack。

下面直接上例子：
Demo 值得推荐的图文列表以及CSS布局类型切换

不得不提到一点，如果使用display:inline-block做排列的话，标签换行在Firefox下会引起letter-spacing的bug，如下图：

解决方法是通过将排列元素（例子中是li）的父层（例中ul）设置letter-spacing:-6px;然后再将排列元素letter-spacing还原为默认值0;

YUI3仿苹果风格图标滑出导航菜单

作者：idd.chiang 发布时间：February 8, 2010 分类：Javascript/AS,YUI/Jquery/mootool

IE7、FF3.5、safari、opera、chrome下测试通过，IE8无环境未测。

苹果风格的导航是比较炫酷的，用YUI3模仿这种导航风格。当鼠标移至菜单上，图标上移至顶部，然后滑动至展示区；鼠标移出时，图标移至导航下方，滑动至菜单后隐藏。

Tutorial:示例

» 首先我们来看看HTML：

<div class="navigation">
    <ul class="menu fl" id="menu">
        <li><span class="game"><br/></span><a href="#" class="first">Game</a></li> 
        <li><span class="water"><br/></span><a href="#">Water</a></li> 
        <li><span class="code"><br/></span><a href="#">Coding</a></li> 
        <li><span class="tools"><br/></span><a href="#">ToolsBox</a></li> 
        <li><span class="curve"><br/></span><a href="#">Curve</a></li> 
        <li><span class="options"><br/></span><a href="#" class="last">Options</a></li> 
    </ul>
</div>

span是icon图标，用作动画使用。当鼠标移上A标签时，触发动画。这里不能用Event.addListener 和 Event.on方式去侦听事件，因为icon动画时会移至A标签上层，导致监听对象发生变化，用relatedTarget判断span标签也会触发多次mouseover和mouseout。
所以，将鼠标事件的触发给LI是最好的办法，li内的元素仅用作动画展示，不绑定如何事件。这里用到delegate，将事件指派给#menu下的li

» 导航的CSS

.navigation{
    position:relative; /*IE hidden need*/
    overflow:hidden;/*Hiding*/
    padding-bottom:100px;/*Icon Showcase*/
    _zoom:1; /*For Ie6 hack*/
}
ul.menu{
    border:1px solid #b0b0b0; 
    border-width:0 1px 0;
    position:relative; /*zIndex need*/
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
ul.menu li{
    float:left;
    position:relative; 
}

阅读剩余部分...

YUI2.8本地存储组件SWFStore使用方法

作者：idd.chiang 发布时间：February 5, 2010 分类：Javascript/AS,YUI/Jquery/mootool

YUI2.8推出时新增了一个 SWFStore，用于解决客户端本地存储数据，使用FlashPlayer（注意：这不是可视化组件，一般不要求可见的SWF），并且有离线跨浏览器跨域共享数据、存储数据远远超过Cookie、数据加密等优点。

使用方法：

1.实例化swfstore时，应放置一个容器作为预留位，一般会设置宽、高为0，因为这个纯粹功能组件不需要界面；

<div id="swfstoreContainer" style="width:0px; height:0px;"></div>

实例化swfstore

//实例化swfstore
var swfstore = new YAHOO.util.SWFStore("swfstoreContainer", true, true);

2. swfstore.swf 文件应放在实例化组件出现的相同目录，服务器上必须留一副本；
获取swfstore.swf 右键另存为
指定SWFURL时：

YAHOO.util.SWFStore.SWFURL = "swfstore.swf";//地址

3.跨域时需要在swfstore.swf同级目录下编辑名为 storage-whitelist.xml 的文件，格式如：

<url-policy>
	<allow-access-from url="www.mail.yahoo.com" /> 
	<allow-access-from url="www.yahoo.com" /> 
	<allow-access-from url="www.microidc.com" />
</url-policy>

这里编辑了一个简单的SWFStore使用示例：
SWFStore示例

官方文档：
swfstore 官方示例