EX4FUN

主流浏览器中的hacks

CY — Sun, 10 Jan 2010 12:04:07 +0800

浏览器中的hacks基本上可以这样写：

.hacks {
	color:Black;	/* 用于FF、OP */
	color:Red\9;	/* IE6/7/8 均支持 */
	[color:Purple; color:Green;	/* IE6/7、CH、SF 都支持，都只认最后一个样式，例子中这个就是Green了。 */
	*color:Maroon;	/* IE7 */
	_color:Olive;	/* IE6 */
}

其中color:Red\9这种形式IE家的浏览器6-8都支持，但是IE8却不支持“*”和“_”，所以如果要实现IE8的独立样式的话可以配合“*”和“_”一起使用。
WEB前端开发的码头兄列举了IE支持的“\数字”，我试了一下，关于“\0”不只IE8支持，连Opera10.5也支持，所以大家用的时候也要注意一下Opera了。

点击这里看例子

重新发现HTML表格

CY — Fri, 11 Dec 2009 17:20:56 +0800

原文地址：http://woork.blogspot.com/2009/09/rediscovering-html-tables.html

翻译：EX4FUN

在最近我很一些我的读者聊完怎样使用HTML表格这个话题之后我决定写这篇文章。概括来说，他们因为一些误导性的信息而对表格产生了先入为主的厌恶。事实上，很多人说“我看到过表格是绝对不应该被使用的”，而这种说法绝对是错的！这种说法只适用于用表格来实现页面布局这点上，而用表格来实现横竖排列的数据则是非常完美和简单的，如果要在网页上实现表格化的数据就一定要用HTML表格！为什么不呢？所以，在这种情况下很多人忽略了表格中的HTML标签的存在及如何使用它们。

在HTML中和表格相关的标签有10个，下面列出了在HTML 4.01和HTML 5中定义的各个标签：

<caption> 定义一个表格的表头 (4, 5)
<col> 用于定义表格的列 (4, 5)
<colgroup> 定义表格列的分组 (4, 5)
<table> 定义表格 (4, 5)
<tbody> 定义表格的主体 (4, 5)
<td> 定义表格里的格 (4, 5)
<tfoot> 定义表注/脚注 (4, 5)
<th> 定义表格的表头 (4, 5)
<thead> 定义表格的表头 (4, 5)
<tr> 定义表格的行 (4, 5)

一个基本的表结构如下：

它包含一个标题、表头、主体和表注。正确的HTML标签顺序如下：

1.<table>
2.<caption>
3.<thead>
4.<tbody>
5.<tfoot>

根据w3schools里面的定义和说明，<tfoot>标签必须要放在<tbody>前面使用，这样客户端就可以在全部读完那些（无数）行里的数据之前就可以读到表注里的信息了（了解更多 / 英）。

你也可以使用<col>和<colgroup>来定义表格的列和列群组：

1.<table>
2.<caption>
3.<colgroup>
4.<col>
5.<thead>
6.<tfoot>
7.<tbody>

下面是一个正确的表格结构代码示例：

^?View Code HTML

<table border="1">
<caption>Table caption here</caption>
 
<colgroup span="1" style="background:#DEDEDE;"/>
<colgroup span="2" style="background:#EFEFEF;"/>
 
<!-- Table Header-->
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
 
 
<!-- Table Footer-->
<tfoot>
<tr>
<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tr>
</tfoot>
 
<!-- Table Body-->
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
 
</table>

在浏览器中的样子如下：

在网页标准化中表格的align和bgcolor属性是不提倡使用的，所以在HTML 5中已经不支持这些属性了。很显然你可以使用样式表来对表格进行美化。

了解更多HTML表格可以阅读这里：w3 introduction to tables

Google Chrome扩展官方网站上线

CY — Thu, 10 Dec 2009 12:13:08 +0800

Google Chrome浏览器扩展插件的官方网站已经出现了：https://chrome.google.com/extensions 这个网站处于某种原因无法直接访问，可以使用代理或者修改HOST文件，在里面加入74.125.39.99 chrome.google.com 和 74.125.39.99 clients2.google.com 。我在使用过程中发现用Chrome打开这个网站的时候会出现不安全网站的报警提示，不知道是不是因为改了HOST的原因。里面的扩展现在并不多，很多都不适合中国用户，比如Youtube视频提示啊（俺们中国人都不知道Youtube是啥）和Time.com的最新新闻。所以我现在只装了Gmail的邮件提示和Zoho的方便贴。

高手们继续开发Chrome扩展吧，多来点儿Firebug那样的东东，俺就彻底抛弃火狐而投入可肉姆怀抱啦！

Chrome要干掉IE

CY — Wed, 23 Sep 2009 12:15:44 +0800

Google Chrome官方博客消息，Google推出了一款名为 Google Chrome Frame 的开源插件，安装之后可以自动使IE6/IE7/IE8变成以Chrome为内核的浏览器。并且可以支持HTML5等先进的网络技术，而在使用上，换了芯儿的IE仍然保持着原来的外观。

对于开发人员来说，让你的网站支持这个插件的方法就是把下面这行代码放到网页的里面：

^?View Code HTML

1	<meta equiv="X-UA-Compatible" content="chrome=1">

此款插件下载地址：http://code.google.com/chrome/chromeframe/

Woork制作的HTML5速查卡片

CY — Tue, 22 Sep 2009 17:28:35 +0800

意大利部落客Woork制作了张HTML 5的速查卡片，里面列出了在HTML 4.01以及新的HTML 5中定义的标签，并用不同的颜色标示其版本，说明可见下图（点击可看大图）：

可在Flickr里查看预览图，或者下载高质量的版本：PDF格式、JPG格式（这两个地址都需要翻墙访问）。

怎样用PhotoShop制作清爽简洁按钮

CY — Mon, 14 Sep 2009 18:09:00 +0800

原文地址：http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/

翻译整理：http://ex4fun.com

译者注：不知道为什么，我做的效果和原文中的不太一样。

最终效果图如下：

创建图片

1. 每个图片的宽为 250px 高为 50px，这里需要两个按钮的位置，所以新建图片的高度为 100px；

2. 在 50px 的高度创建一条参考线；

创建圆角矩形

3. 画一个3px半径的圆角矩形；

4. 在画布的上半部画一个宽 250px 高 50px 的圆角矩形，这里矩形的颜色是什么没有关系；

5. 建立这个圆角矩形的选区；

6. 在选中选区的情况下新建一个图层（ctrl+shift+alt+N），取名“按钮1”，并且填充颜色（编辑 > 填充颜色或 shift+F5）；

7. 删除图形那层，因为已经没有必要了；

为按钮1层添加图层样式

8. 双击图层“按钮1”，打开“图层样式”，添加“渐变叠加”，颜色由深绿#618926 到浅绿 #98ba40，将颜色的中点放到35%；

9. 添加内阴影。将混合模式选为“正常”，不透明度为“100%”，距离和大小均为 2px，颜色为#c6d894；

10. 添加描边。大小为 1px，位置为“内部”，颜色为第8步里的深绿色：#618926；

目前为止图片效果如下：

添加高光层

11. 在“按钮1”上面新建一个图层命名为“高光1”，并将前景色设为#b8cf69，在“按钮1”图层载入选区后再选中“高光1”图层；

12. 在新层添加径向渐变。将前景色设为#b8cf69，渐变方式由前景色到透明；

13. 在选中圆角矩形选区的情况下，在“高光1”层顶部画径向渐变到选区下方30px处，并将渐变层的透明度设为80%；

创建按钮2

14. 复制“按钮1”和“高光1”到最上层，分别重命名为“按钮2”和“高光2”；

15. 除了按钮颜色以为其他地方均不用更改。这里将内阴影的颜色更改为#839dbf，渐变叠加的深蓝色为#0f2557 和浅蓝色#245293，描边颜色为#0f2557；“高光2”图层增加“颜色叠加”效果，颜色为#5c737c；

添加文字

16. 我这里选的字体是微软雅黑，16px，平滑，白色；

17. 添加阴影效果。混合模式“正常”，角度“-60”，距离大小为1px，颜色#618926；

当前效果为：

18. 复制文字图层，移到蓝色按钮上与绿色相对应的地方，即完成。

创建页面代码

19. HTML；

^?View Code HTML

1	<p class="button"><a href="#nogo">点击这里</a></p>

20. 样式表：

^?View Code CSS

.button {
	display:block;
	width:250px;
	height:50px;
	text-indent:-9999px;
}
.button a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url(campaign-monitor-button.png) no-repeat top left;
	outline:none;
}
.button a:hover {
	background-position:0 -50px;
}

点击这里查看DEMO

前端工程师应该关注什么

CY — Wed, 09 Sep 2009 11:42:35 +0800

找到了一张图，虽然是别人的关注点，但是对自己也是有启发作用，需要认真关注一下这里面的知识。

原图在这里

实现IE6下PNG透明的方法

CY — Tue, 08 Sep 2009 17:26:48 +0800

IE6非常讨厌，其中之一就是它不支持PNG透明，下面介绍一些方法实现两种情形下的透明。

其一，背景是PNG图片。

这种情况下可以使用CSS滤镜来实现透明，代码如下：

^?View Code CSS

*html .pngbg {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="ie6-png-bg1.png");
}

这种方法实现的透明会面临一个问题，这就是如果这里面有链接（＜a＞）的话链接就会失效，其解决方法是让链接实现相对定位（即，a {position:relative;}）

其二，直接插入的图片是透明图片（＜img＞）。
这种情况下可以使用下面这段JS：

^?View Code JAVASCRIPT

//IE6下兼容PNG图片
function fixPNG(myImage)
{
	var arVersion = navigator.appVersion.split("MSIE");
	var version = parseFloat(arVersion[1]);
	if ((version &gt;= 5.5) &amp;&amp; (version &lt; 7) &amp;&amp; (document.body.filters)) {
		var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
		var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
		var imgTitle = (myImage.title) ? "title='" + myImage.title   + "' " : "title='" + myImage.alt + "' ";
		var imgStyle = "display:inline-block;" + myImage.style.cssText;
		var strNewHTML = "";
	myImage.outerHTML = strNewHTML;
	}
}

在需要调用图片的地方再加上： onload=”fixPNG(this)”，如下：

^?View Code HTML

1	<img src="ie6-ok.png" onload="fixPNG(this)" />

具体的实例和代码请点击下面的链接：
DEMO

腾讯版CSS3.0参考手册

CY — Tue, 25 Aug 2009 14:40:45 +0800

以前我们看到最多的是苏昱的《样式表中文手册》，后来css8.cn也做过一版针对CSS 2.1的《CSS完全参考手册3.0》，今天腾讯的ISD Webteam也发布了一版名为《CSS 3.0 参考手册》，里面增加了CSS 3.0的新功能，并在手册中对浏览器的功能支持情况做了说明，看起来很不错。

手册直接下载请点这里

CSS裸奔节

CY — Thu, 09 Apr 2009 12:10:23 +0800

CSS裸奔节（CSS Naked Day）就是将网站的CSS样式表去掉，只留下最原始的(x)html页面，就是大家现在看到的样子。起源是想让别人看一下去掉样式表的(x)html代码写的是否工整。也许有些无聊，也许有些恶搞。

But，这几年随着网页标准的推广CSS裸奔节有了新的意义，就是推动了Web标准，告诉大家做页面不只是为了实现设计稿，还要正确的使用(x)html语义标记和安排好结构层次。