IT民工的坐井观天 » 绾青丝 – WebDesign

将YUI Compressor加到右键菜单

Ken — Sun, 01 Jan 2012 08:07:55 +0000

RT http://www.cnblogs.com/jkisjk/archive/2011/09/30/JS_YUICompressor_menutools.html

YUI Compressor是前端开发中经常用到的软件，如果每次都去命令行下操作未免有些繁琐，转了一篇如何将YUI Compressor加到右键菜单的文章

先下载必备软件
YUI Compressor : http://developer.yahoo.com/yui/compressor/

filemenutools : http://www.onlinedown.net/softdown/55029_2.htm

Step1 :

将http://yuilibrary.com/downloads/#yuicompressor 中的yuicompressor-2.4.6.zip 解压缩到d盘某处，如D:\JKTools

Step2:

在D:\JKTools 新建一个yuicom.bat 文件。内容如下：

java -jar D:\JKTools\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar %1 -v -o %1_com.%2

pause

Step 3:

安装 filemenutools

在filemenu tools 命令中添加一个 YUIcompressor 命令，属性如下

设置完成。

Step4:

右键点击要压缩的css 或js 文件，选择YUIcompressor，将在目录下生成*_com.*.*文件，如果文件有语法错误会提示。

——

另，命cmd窗口里的压缩报告很值得细读。。。

十个不常用但应该掌握的HTML Tag

Ken — Wed, 25 Mar 2009 02:45:15 +0000

Author: Glen Stansberry

Glen Stansberry is a web developer and blogger. You can read more tips on web development at his blog Web Jackalope or follow him on Twitter.

1.

我想大家对于

这个标签是非常熟悉的，比如上面的原作者信息这个内容就是一个
。但是对于它的小兄弟标签可能大家就不是很熟悉了，标签用在对于书籍，文章的引用，默认显示为斜体，当然你可以通过css来控制实际的样式。

例：“若尘你也是堂堂七尺男儿，该有那十荡十诀之勇” 引用自《尘缘》

2.

这个其实挺有用处的，对select下拉框里的选项分组。不过现在很多时候select这个元素通常被用其他元素wrap来展现，毕竟原生的这个效果不够华丽。

例：

3.

这个标签使用在缩写或短语需要进一步解释的情况下。

1
我的小游戏网站 <acronym title="游戏247 欢乐不停歇"> 247</acronym> 欢迎你的来访。

例：我的小游戏网站 247 欢迎你的来访。

4.

标签用于特定信息，如地址、签名、作者、此文档的原创者。

1 2 3
<address> 上海浦东峨山路陆家嘴软件园 </address>

例：

上海浦东峨山路陆家嘴软件园

5. 和

对于写blog的同学来说，这两个标签应该是比较熟悉了，特别是一些教程类的文章，在不断的修订中，如果想保留修订信息的话，这两个标签是非常实用的。

1
John <del>likes</del> <ins>LOVES</ins> his new iPod.

例：John ~~likes~~ LOVES his new iPod.

6.

如果你是一个细心并且负责的设计师，那你应该为每一个表单元素添加对应的label，这样既可以最大程度的保证文档性，并能适当的场景下帮助那些使用辅助工具来阅读网页的人士。

1 2
<label for="username">Username</label> <input id="username" type="text" />

7.

这个标签是展现表单相当好的一种形式。

1 2 3 4 5 6 7
<form><fieldset> <legend>Are You Smarter Than a 5th Grader?</legend> Yes <input name="yes" type="radio" value="yes" /> No <input name="no" type="radio" value="no" /> </fieldset> </form>

8.

这个倒真是一个非常少见的标签，它的语义和类似，~~但是它没有鼠标悬停时的解释信息~~，通常只对屏幕阅读器等辅助工具有帮助。

9. rel属性

1
<a rel="clickable" href="page.html">This link is editable</a>

因为每个标签上的rel属性都是合法属性，所以对于离不开javascript的现代网页开发来说，这是最安全的放置特殊变量或者其他信息的地方，比如所有lightbox类库的那些信息。

10.

插入一个软换行符，只有在有换行需要的时候才会换行，听上去不错，但似乎几乎没有人会使用这个标签。

=========================
注意：以上这些标签不能完全兼容所有浏览器，标签有风险，使用需谨慎。

您可能也喜欢：

云端之城 – Bespin 在线HTML编辑器
Gmail新功能 – 快速打标签
DreamHost – $5.95/mo 马丁路德金纪念日最新优惠码
推荐一本新书《Struts2技术内幕》

无觅

备忘 – IE6的十大Bug Fix

Ken — Tue, 10 Mar 2009 05:23:27 +0000

IE6的十个bug的Fix方案，看到一篇文章整理了一下，顺便转过来备忘一下。
原文链接 http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-ie6-problems/

1. 强制浏览器是用Web标准解析

HTML的写法

1 2	"http://www.w3.org/TR/html4/strict.dtd">

或者XHTML的写法

1 2	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. Set Position: relative

给元素指定Position: relative能够解决很多奇怪的问题，比如对齐和显示不正确等。对于Position的属性要小心设置，特别是设为absolute。

3. 给Float的元素加上inline属性避免双倍margin

这大概是最著名的一个bug了，IE6下对于浮动元素，会莫名其妙的双倍空白边，解决的方法也很莫名，设上display:inline属性就好了，对于float元素这个属性本身没有任何意义。

4. 给特定元素加上hasLayout属性

很多IE6（甚至是IE7）的问题可以通过设置hasLayout这个ie only的内部属性来解决，比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候，你不能显示的为其设定高度，可以使用设置高度为1%，而其父元素如果没有确定的高度时，该设置不会被应用到实际的高度上，但是hasLayout会被激活。

5. Fix字符重复bug

这是IE6上面一个非常奇怪的BUG，他的触发条件也是相当诡异，在浮动元素间如果有

这样的普通的HTML注释的话，会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中，具体的介绍大家可以看这里 positioniseverything 。

解决的方法也很奇怪
* 将所有的浮动元素设为 display:inline;
* 给最后的浮动元素设置 margin-right:-3px;
* 使用条件注释避免IE6下的问题 Put your commentary in here…
* 在最后的容器内放入一个空的div (这种添加这种无语义的workaround并不是最理想的选择)

6. 需要悬浮效果的地方，尽量使用标签

IE6中只能对应用css hover效果，所以尽可能使用标签来获取最大的兼容性。

7. 使用!important或者高级选择器来兼容IE6

使用!important和高级选择器来兼容IE6，可以避免使用那些通不过校验的非常规hack，比如所谓的_width这样的东西。我们来看个简单的例子。

#element {
	min-height: 20em;
	height: auto !important; /* understood by all browsers */
	height: 20em; /* IE6 incorrectly uses this value /*
}

IE6是不能正确解读!important这个修饰符的，所以他会错误的使用height:20em这个属性来实现最小高度。（IE6下容器会自动扩展）

#element {
	min-height: 20em;
	height: 20em;
}
 
/* ignored by IE6 */
#element[id] {
	 height: auto;
}

或者使用高级选择器，同样也能实现该目的，这样代码既能保持合法性，也能很好的去兼容IE6这个诡异的产品。

8. 避免在IE6下使用百分比尺寸

body {
	margin: 2% 0 !important;
	margin: 20px 0; /* IE6 only */
}

在IE6下是用百分比的尺寸是件非常让人头疼的事情，尽可能避免这样的使用，而是采用结合!important和精确尺寸来明确元素的大小。

9. 频繁测试，尽早测试

和其他编程一样，现在编程提倡持续测试，尽早测试，甚至可以测试驱动，在CSS开发过程中也要尽可能的频繁测试，可以参看我之前介绍的一些测试工具。 ==> 七个能够帮助你进行网页浏览器兼容性测试的工具

10. 重构你的代码

越磨砺，越光芒。。。。。

七个能够帮助你进行网页浏览器兼容性测试的工具

Ken — Thu, 26 Feb 2009 15:06:37 +0000

从最初的Netscape，到IE的崛起，独霸江湖，再到火狐出世，群雄并起，逐鹿中原，这些让人或激动，或失望的浏览器就像是网页设计领域的一朵朵乌云。最近做了一个网页，在兼容性上就遇到了新问题，不同平台下的字体兼容问题，特别是一些比较特殊的设计，比如使用了较为狭长的字体，可能会带来不少麻烦啊。

最完美的做法当然是能够在不同的环境下都测试一下，除了无敌的Vmware大法之外，今天再介绍一些很不错的工具给大家：

1 Xenocode Browser Sandbox

其实差不多就是提供了许多stand-alone的浏览器程序，提供几乎完全真实的测试环境，而且是相互独立的程序，不过下载的那个执行程序大了一点，还不如我一溜自己全装全了，有时候看看自己机器上那一堆浏览器也挺头大的。

2 CrossBrowserTesting.com

这个类似Citrix，免费的帐号有5分钟的体验时间，通过JavaApplet登陆到远程环境中去，有不同的平台供你选择，不过要讲究的是眼明手快，要不你就得不停开马甲了，感觉5分钟有点苛刻了，提供个30分钟的话比较慈善一点，不过既然大家都是出来混的，为了盈利无可厚非。

3 IETester

这个应该是很多朋友机器上的老朋友了，非常好用的IE测试器，能够提供非常完整的测试环境，效果也相当好，而且也没什么功能限制，免费的。真是砍妖杀怪的必备良器。

4 BrowsrCamp

在国内Mac的保有量可能还不足以引起客户的重视，但是对于国外的客户来说，Mac平台是相当重要的一块受众。这个网站的截图生成的相当快速，几乎就是新立得的效果，不过免费用户只能享用一点点功能，不过感觉还是挺有用的。

5 Litmus

应该说是相当好用也相当强大的在线工具，可惜收费用户和免费用户差别太大了，有兴趣的同学去看看吧。

6 NetRenderer

挺不错的在线IE调试工具，虽然有着很好用的IETester，但是在手边没有软件，下载又不方便（毕竟它的个头也几十兆，不算小），用在线的工具也能应应急。推荐一下，虽然功能少，但是没限制。

7 BrowserShots

乍一看，视觉效果很猛的工具，列出了几乎全部的浏览器，不过貌似要排队生成，我一个不小心按照默认的选择去生成了，这些可好，今天是看不到结果了，明天补上用后感觉，不过感觉是个值得使用的工具。

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

结果去看了一下，结果出来了，真的很棒

对于交付前的冒烟测试还是挺有效的。

希望对大家有帮助，原文链接 http://freelancefolder.com/7-fresh-and-simple-ways-to-test-cross-browser-compatibility/

设计十八般兵器之 “经典字体”速查

Ken — Sun, 07 Dec 2008 08:27:01 +0000

做设计的时候，选择合适的字体是非常重要的一个环节，当然有很多字体查看软件，但是说实话用了那么多，都大同小异，没有什么特别好的。也许是个人习惯的原因吧。偶然看到一篇文章，倒是个不错的办法。自己人肉动手做一些速查的字体cheatsheet，的确是比较直观，比单纯用软件去找来的好。有点按图索骥的味道。看来自己还是太懒，哈哈。

点击查看大图

原文：http://www.dogorgod.com/blog/font-in-design-of-the-skills-seek.html 还提供了字体打包下载

Blueprint(Css Framework) version0.8

Ken — Sun, 16 Nov 2008 15:18:45 +0000

最近每天沉醉在那堆垃圾代码中改着无穷无尽的Defect，也算是为了对岸几百万移动用户的福祉做出应有的贡献了。

非常有名的CSS Framework – Blueprint在更换了项目leader之后，最近发布了一个新的版本，Blueprint(Css Framework) version0.8。新的leader将这一版本称为新的里程碑版本。并且看的出来，作者对于1.0的正式release有着很高的期待。

简单介绍一下Blueprint这个CSS Framework，翻译自Blueprint的Quick Start Tutorial，如果需要原文在官方网站上都有。我只是节选了一些：

源文件:

blueprint/src/reset.css: 基本已经总结出最佳实践的reset.css，为页面元素重置默认值。
blueprint/src/grid.css: 之前我也介绍960gs这个Framework，grid原型设计现在是很流行的原型设计方法了，Blueprint也提供了很多方便的class来帮助你快速建立grid布局。
blueprint/src/typography.css: 关于排版的css，包含了一些非常精妙的文字排版样式。
blueprint/src/forms.css: 包含了一些表单样式。
blueprint/src/print.css: 很多时候我们没有考虑到用户的打印样式，很多无用的图片，广告都是用户所不希望打印，所以需要重新设置打印样式。
blueprint/src/ie.css: 包含了ie6和ie7的许多css hack。

再来简单看看到底该如何使用grid.css，之前写[960是个神奇的数字 - 960 Grid System介绍]，就有人问到底该如何使用960gs这样的框架，还有人说其实我也讲不出该如何使用。我看下来，可能是很多人对原型辅助css的期望过高了，他并不会帮我们做什么事情，只是帮助我们更好的去做一些事情，来看下例子：

效果图：

通过这些预置的class，能够很快的排版，我想通过这个例子大家应该能理解类似于blueprint 960gs这样的framework该如何使用。

如果感兴趣的话，去下载使用吧 http://blueprintcss.org/

960是个神奇的数字 – 960 Grid System介绍

Ken — Mon, 20 Oct 2008 13:35:33 +0000

今天介绍一个网页辅助设计框架，960 Grid System。什么是960 Grid System，简单的来说，是用来辅助设计师快速的创建网页原型的辅助系统，960这里是网页的横向尺寸，960px，为什么是960这个数字，而不是1000或者900？

来温习下数学推演：

960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26种（26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身），我们标记为：

N(960) = N(2^6 * 3 * 5) = 26

同理可以得到：
  N(480) = N(2^5 * 3 * 5) = 6 * 2 * 2 - 2 = 22 

  N(750) = N(2 * 3 * 5^3) = 2 * 2 * 4 - 2 = 14

  N(800) = N(2^5 * 5^2) = 6 * 3 - 2 = 16

  N(1000) = N(2^3 * 5^3) = 4 * 4 - 2 = 14

  N(1024) = N(2^10) = 11 - 2 = 9

  N(1920) = N(2^7 * 3 * 5) = 8 * 2 * 2 - 2 = 30

引用：http://lifesinger.org/blog/?p=375

960是1024之下，最灵活的尺寸，而且恰好是1024分辨率下最合适的尺寸，这些条件决定了960成了目前设计中最完美的尺寸。

基本知识介绍完毕，因为有不少人和我一样，乍看960 Grid System，都以为会是个CSS framework，但是它不是。他是一个非常精巧简单的草稿本。就像我们小时候练字用的米字簿一样。

（题外话，当初我挺烦练字的，现在总觉得练个半吊子，后悔了）

现在是不是好理解，什么是Grid System，作者提供给我们的是什么东西了吧。真的是非常巧思的一个东西，怪的有人说数学之美有的时候是那么神奇。就像黄金分隔那样，合适的比例，合适的间隔带来的是稳定而且非常不错的效果输出。

如果你也有兴趣的话，点这里下载。

我也会后续写一些实际的usage和demo。大家少待。

测试驱动之于网页设计开发

Ken — Wed, 01 Oct 2008 08:35:29 +0000

这是一篇译文，其中涉及了不少比较专业的概念，我将用一系列文章来介绍这些概念，这些文章对于网页设计进行了更加深入的探讨，也许在我们看来有些学究气了，但是通过这种探讨，我们从中应该看到一些好的方法论和更多的用户体验关怀。

Progressive Enhancement（逐步增强）开发模式正逐步成为基于标准设计的最佳实践。从简洁，语义化的HTML标记开始，通过Javascript和CSS层层渐进式增强，我们试图为任何受众创建可用的体验，对于那些功能不那么强大的设备和浏览器能获得一个相对简单但是功能完整的用户体验，而其他那些功能齐备的则将获得剩下的附加特性和体验。

这是就是PE（Progressive Enhancement 以下缩写为PE）的基本理论。但是在实践过程中，这些增强仍然被推送给了绝大多数设备，其中包括大量不支持这些特性的对象，比如较低版本的浏览器或者是功能受限的移动客户端。这些设备一开始的确获得简单但功能完整的页面，但随后被“增强”到了乱糟糟的页面。这显然是和PE理论背道而驰的。

那我们应该怎么做增强以确保所有的设备和浏览器获得正确的效果呢？测试，这时候我们需要的是通过逐级测试来确保这点。

兼容性测试

不久之前，我们发现可以使用很简单的Javascript代码来测试目标设备对于CSS的支持情况。让我们从一个很简单的盒模型测试开始，我们插入一个对象到当前Document中，然后设置一些样式属性，然后通过Javascript来校验是否被正确支持了。

function boxmodel(){
  var newDiv = document.createElement('div');
  document.body.appendChild(newDiv);
  newDiv.style.width = '20px';
  newDiv.style.padding = '10px';
  var divWidth = newDiv.offsetWidth;
  document.body.removeChild(newDiv);
  return divWidth == 40;
}

通过上面的TestCase，我们能很快的检查目标设备是否正确支持盒模型，然后我们也能采取对应的增强方式。

有了上面的这个主意，我们能类似的写出如下测试用例：

float
clear
position
overflow
line-height

当然仅通过CSS测试并不能覆盖到所有情况，幸运的是，我们还能通过Javascript测试来做其他兼容性测试。（译注，这可能是大家比较熟悉的浏览器检测了）。

document.createElement()
document.getElementById()
xmlHttpRequest()
window.onresize()
window.print()

通过上述测试，我们可以知道是否可以正确显示客户的应用。

我和我在Filament Group的同事开发了testUserDevice.js，来完整上述所有的测试。

利用这些测试结果

整合testUserDevice.js到一个页面上是相当简单的，讲JS文件包含进来，然后调用testUserDevice.init()方法就可以了。

为了更好的阐述这些概念，我们来看一个具体的例子，这是一个有一定复杂度的表单页面，让我们从最基本的HTML开始。

DEMO1

=== CSS增强

当目标设备通过了我们的测试代码，会对页面进行一系列的增强，默认情况下，会进行下列DOM更新：

样式Class enhanced 被加到[BODY]元素上。
(title="enhanced") 可选的样式表文件被启用。
(title="not_enhanced") 与之相反的，所有这些非增强样式表文件被禁用。

这样的变化给你提供好几个契机去做层进式的增强，比如BODY标记上的样式增强。来看下例子：

body div.example { 
   margin: 1em 0;
}

如果用户的浏览器通过了测试，我们可以使用float布局来实现水平排列。

body.enhanced div.example { 
  float: left; 
  width: 30%; 
  margin: 0;
}

来看一下示意图，

这只是一个很小的变化，当你要做一些比较复杂的增强的时候，使用选择器来实现就显得不怎么合适了，所以这个时候，你应该使用可选的样式表文件来替换原来的效果。

这虽然只是简单的样式表文件替换法，但重要的地方在于我们的增强只在能够正确解释的地方被应用了。让我们再来看一下前面的Demo页面，看看现在的增强后的效果。

Demo 2

尽管我们做的只是很简单的CSS增强，但是测试目标设备是否能够正确支持依然是十分有必要性的。（译注：术抑或是道，以何治天下）

Javascript增强

很多页面增强使用了Javascript。testUserDevice.js 允许你具体指定一些script来做增强。非常简单，你只需要将你的增强方法作为参数传给我们的方法就可以了。

testUserDevice.init( function(){
/* »fancy stuff goes here */
} );

就像你看到的这样，我们将一个匿名方法传给了init方法。如果测试通过，这个方法就会被调用执行。记住一点，这些动作有可能在DOM树构建完毕前触发，所以DOM相关的方法仍然应该放在DOM树构建完毕之后，比如jQuery的ready事件或者是body.onload事件之后。

来看一下我们的最终Demo页面，有了如下增强

生日输入框有了日历供选择日期。

有了滑块选项。

宠物那栏也是根据用户输入，动态展示一下输入框。

有了自动完成功能。

使用了Ajax提交方式。

Demo 3

一次测试，终身受用

在完成测试之后，testUserDevice.js 会留下一个cookie记录这次的测试结果，这样也能带来性能上的好处。我们通过PHP代码也能非常方便的去处理这些增强动作：

';
?>

同样的，testUserDevice.js 支持你加入更多的自定义测试。下面就为大家介绍下，如何编写自定义的测试用例，并且加入到testUserDevice.js 中去。
（译注：此处并未全文译出，我想程序员间的交流代码足够了，代码是无国界的，说多了也没什么用处。）
1

testUserDevice.init([ 
       { testName: 'ajaxCapable',
        pass: ['ajax'],
        scripting: function(){ useAjax(); }   

       }
]);

testUserDevice.add( 'confirm', function(){ 
   if(window.confirm){return true;} 
   else {return false;}   

});

testUserDevice.add( 'confirm', function(){ 
     return (window.confirm) ? true : false;});

原文地址：http://alistapart.com/articles/testdriven
Reprinted with the permission of A List Apart and the author[s]

//====================================================
译者：
这里说的测试驱动，并不是我们平日里程序开发中的测试驱动。当然两者的理念其实某种角度上来说是一样的，只做确信正确的改动。我平日里工作中，说实话没有过这样的思考。如何适应各种不同的目标客户端，我想到的第一个是尽可能的去兼容，但是PE这种理念从另一个角度提出解决方案。给不同的人不同的，但必须是完整且正确的体验。这点值得我们进行更深一步的讨论。

Microsoft IE8 CSS3扩展支持

Ken — Thu, 25 Sep 2008 07:22:00 +0000

众所周知，所有的浏览器都有一些关于CSS功能的额外扩展，例如（-ms-interpolation-mode），这些通常来自于那些未在CSS标准中明确完整的定义的特性和功能或者是在标准中已经完整定义但浏览器只是部分支持。CSS2.1标准中规定，以上这些不完全合乎标准的特性都必须使用一个供应商前缀(Vendor Prefix '-ms-' for Microsoft, '-moz-' for Mozilla, '-o-' for Opera)。

下面介绍一下IE8下的这些额外扩展，当然我们的目的不是把那些IE Only的特性带入下一代的页面中，而是能够在浏览器支持的前提下，运用一些属于CSS3的特性，丰富一下创作思路。

Property	Type	W3C Status
-ms-accelerator	Extension
-ms-background-position-x	CSS3	Working Draft
-ms-background-position-y	CSS3	Working Draft
-ms-behavior	Extension
-ms-block-progression	CSS3	Editor’s Draft
-ms-filter	Extension
-ms-ime-mode	Extension
-ms-layout-grid	CSS3	Editor’s Draft
-ms-layout-grid-char	CSS3	Editor’s Draft
-ms-layout-grid-line	CSS3	Editor’s Draft
-ms-layout-grid-mode	CSS3	Editor’s Draft
-ms-layout-grid-type	CSS3	Editor’s Draft
-ms-line-break	CSS3	Working Draft
-ms-line-grid-mode	CSS3	Editor’s Draft
-ms-interpolation-mode	Extension
-ms-overflow-x	CSS3	Working Draft
-ms-overflow-y	CSS3	Working Draft
-ms-scrollbar-3dlight-color	Extension
-ms-scrollbar-arrow-color	Extension
-ms-scrollbar-base-color	Extension
-ms-scrollbar-darkshadow-color	Extension
-ms-scrollbar-face-color	Extension
-ms-scrollbar-highlight-color	Extension
-ms-scrollbar-shadow-color	Extension
-ms-scrollbar-track-color	Extension
-ms-text-align-last	CSS3	Working Draft
-ms-text-autospace	CSS3	Working Draft
-ms-text-justify	CSS3	Working Draft
-ms-text-kashida-space	CSS3	Working Draft
-ms-text-overflow	CSS3	Working Draft
-ms-text-underline-position	Extension
-ms-word-break	CSS3	Working Draft
-ms-word-wrap	CSS3	Working Draft
-ms-writing-mode	CSS3	Editor’s Draft
-ms-zoom	Extension

在IE7中，没有使用这样的前缀，所以如果用户在IE8中选择兼容模式的话，这些带有前缀的属性将不被识别。不过在IE8模式中，为了向下兼容，将接受带前缀和不带前缀两种格式。

有一个要注意的地方：

#transparentDiv { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: .5;}

原来的filter格式在标准中是不合法的，所以为了能够在ie7和ie8中都能达到该效果，请参考上述写法。（向下兼容真是沉重的包袱啊）

原文地址： http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

20个帮助你更好的掌握CSS的网站

Ken — Sun, 14 Sep 2008 16:48:13 +0000

原文地址：http://sixrevisions.com/css/20_websites_learn_master_css

相信不少人，哪怕是职业的网页设计师有的时候也不免会觉得CSS有那么点玄妙，有很多小trick并不是那么容易一下子掌握的。

三人行必有我师焉，那就从一些前辈那里学点东西吧，20个CSS和网页设计相关领域的站点，希望能给大家带来一些帮助。

1. A List Apart CSS Topics

老牌CSS站点，从1999年开始一直致力于整理收集面向标准网页开发的优秀文章。

2. CSS Help Pile

收集整理了大量的CSS相关资源，而且归档非常清晰，查询非常方便。

3. CSS Basics

通过一系列教程讲述了CSS的基本概念和基本原理。非常不错的一篇入门教程，我当年也获益良多。

4. Holy CSS Zeldman!

CSS相关资源站点，不是《网站重构》的那个Zeldman，不要搞错咯。

5. Eric Meyer: CSS

一位有名的CSS作者的blog，值得一看。

6. 456 Berea Street – CSS category

很流行的CSS站点展示，这类的网站有非常多，多看多收获。激发一下创作灵感。

7. /* Position Is Everything */

网页很多时候困惑和苦恼都来自于Position问题，那让我们专门来看看这类问题吧。

8. HTML Dog CSS Tutorials

是不是想起了上个世界有个老派的html编辑器，这里有着适应不同程度读者的教程。

9. Learn CSS Positioning in Ten Steps

继续深入学习Position，将学习进行到底。

10. Andy Budd CSS/Web Standards Links

Andy大大的网站，如果不知道这位大大，可以看一下《CSS Mastery》这本书，相当不错的一本好书。

11. W3CSchools CSS Tutorial

权威学校来了，科班教育。不过有点乏味，我是不怎么喜欢看。

12. css Zen Garden

我最爱的禅意花园来了，有非常多很梦幻的设计在这里。细细读一下吧，这本书国内去年也出了中文版了。

13. CSS at MaxDesign

14. CSSeasy.com

提倡从经验中学习CSS，用更加现代的方式去学习理解CSS。

15. CSS-Discuss

讨论社区，如果E文不错的话，可以去学习交流一番。

16. Web Design from Scratch: CSS

作者的文章相当优秀，网站本身也做的超级酷。而且还有不少电子书可以下载，不过如果要打印就得付钱了咯。

17.CSS-Tricks

订阅他的邮件吧，每天都有新收获，而且这个网站有很多podcast，如果你有兴趣看的话。

18.CSS on Delicious

这个就不多说了。

19. SitePoint CSS Reference

这个网站的邮件也值得订阅。

20. CSSDog

有很多有用的教程，包括对于颜色的运用等。

一个CSS小技巧解决了游戏预览问题

Ken — Thu, 11 Sep 2008 13:07:33 +0000

最近和爱玩游戏的师弟搞了个小游戏博客 [ 游戏247 ]，因为工作也比较忙，还是简单的用了wordpress作为建站方案。虽然也写了一段时间Blog了，但是说实话，因为工作比较繁忙，对于wordpress一直也没好好的去研究过。发布游戏的时候遇到了一个问题，因为flash小游戏说大不大，但也不小，如果首页上全是一堆Flash让访问者去等待下载也是挺不好的一件事情。而且不少小游戏是有背景音乐的，要是百家争鸣的，不免有些聒噪。

我想Wordpress应该肯定有比较好的插件来解决这个问题，抑或有什么小技巧来解决该问题，如果有谁知道的话，倒也不吝告我一声。我来说说我怎么解决该问题的。

首先我希望首页每篇blog都不显示flash，只显示一个游戏截图，就像图上这般:

然后点击进入文章全文的时候，隐去这个截图，而是直接显示flash小游戏，这样正所谓伊人双面。

我想了个最简单的方法，增加了一个css样式

#single_post_div .preview_pic {display:none;}

#index_post_div .game_flash {display:none;}

利用css选择器，正好在不同的场景下显示不同的内容。这样的技巧通常会用在HTML网页打印CSS样式中，例如：

我希望在打印网页时，只打印正文，而将头部啊，侧边导航栏等等都隐去，我通常会这样

/*hide various parts from the site

#header, #footer, #navigation, #rightSideBar, #leftSideBar
{display:none;}

虽然是个很粗陋的技巧，但是也挺有效的。

IE8 beta2重装上阵无法忽视的雷蒙德巨头

Ken — Fri, 29 Aug 2008 14:21:31 +0000

2008年8月28号，微软发布了IE8 beta2，相比三月份主要面向开发人员的Beta 1增加了大量新功能，涉及易用性、安全性、兼容性、管理性等各个方面，以及一些独特的工具。

先来介绍一下对于最终用户的新功能吧，也许是我们对ie一直以来的低要求导致了这次发布的新功能真的有点让我震了一下，真的很棒。

网站切片(Web Slices)：开发人员可以将网页的一部分标记为网站切片，让用户随时很方便地监视相关信息，点击收藏夹栏即可看到丰富的网站切片内容，开发人员也可籍此和用户建立紧密联系。

非常酷的新功能，我不知道firefox下是否已经有类似的插件了，我的生活浏览器一直是遨游，firefox只是用来工作，也许孤陋寡闻了，但是这个功能真的让我觉得会让网站开发有了新的触角。对于很多内容性的，比方说ebay或者淘宝这样的网络销售，甚至于起点这样的在线阅读网站，这种内容的预览和随时更新，远比RSS阅读器来的自然。

————————————————-

增强的搜索框：搜索框会在用户在键入关键词的时候实时提供搜索建议，包括图片，另外搜索框现在还会提供来自用户收藏夹和浏览历史的搜索结果。

有点类似划词搜索那样，我相信随着未来网络硬件基础的不断提升，这种无孔不入的网络内容聚合将掀起又一轮网络变革。

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

其实本意是去看看ie8对于网页设计师来说有什么新的变化的，没想到几个新功能真的是让我忍不住把赞美之词给了它们。言归正传，让我看看ie8在工作上会不会给我们一些震撼。

早在今年3月份，ie8 beta1就给开发者带了不小的期待，比如这个极像Firebug的内置调试器（上帝是派你来拯救我们的吗？）。

这样的界面恐怕不用多说什么，大家肯定看了之后有种终于盼到了的感觉。这个产品的到来将终结Firefox在设计师和开发人员中无可替代的局面。

具体有哪些改动让我们来看一下，因为内容较多，这里仅列出提纲（翻译自微软网站 http://www.microsoft.com/windows/internet-explorer/beta/readiness/developers.aspx）

注：目前下列链接仍为微软网站，等我再过一下翻译更换链接

Developer Checklist:

兼容性:

使用IE8来浏览您的网站。
如果您的网页和原来在IE7中的表现不同，您可以启用兼容模式。更多内容，参考此处 [兼容性Compatibility] 。
如果开启兼容模式后，您的网站和在IE7下的表现和行为都完全一致的话，那您可以将IE7 meta tag加到您的网页上去。Emulate IE7 meta tag.
另外，您可以使用各种方法来校验用户的浏览器工作模式 Versioning and Internet Explorer Modes.
如果您的网页仍然存在问题，那请使用这些测试工具帮助您找到问题 testing tools.

Ajax开发:

阅读更好的Ajax开发 Better AJAX Development.
阅读原生JSON支持，这也是我坚信将取代xml的传输协议 Native JSON Support.

顺手转一位大大3月份的汇总小结

IE8 (下文中的 IE8 暂时仅代表IE8 beta1) 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute selectors），具体规则与正则中的匹配很相似：

E[att^='val'] //子串以’val’ 开始
E[att$='val'] //子串以’val’ 结束
E[att*='val'] //子串中包含’val’
IE8 支持绝大多数基本的 CSS2.1 选择器：

:before and :after 被支持，只支持文本，不支持图片，但还存在bug 。
:focus 被支持。
display: inline-block 被支持（只能用于内联元素）。
display: table 被支持。
list-style 完全被支持，包括值 upper-greek （此值其他浏览器均未支持）。
outline 被支持。
border-collapse, border-spacing 和 caption-side 被支持。
white-space 完全被支持。
box-sizing 被支持，不过使用的是私有属性 -ms-box-sizing 。
不支持的包括但不限于：:first-line 、:first-letter、opacity 和 RGBA。

对于原来用来区分 IE 的 HACK 在 IE8 中基本失效（比如*property:value、*property:value等）。

Update 08-3.8：

原有 IE 的 list-item whitespace bug 在 IE8 中依旧存在。
原有 IE 的 z-index bug 在 IE8 中依旧存在。
IE8 中产生新的 bug：当 line-heigth 小于正常值时，超出的部分将被裁切掉。
IE8 中依然不支持 border 的 transparent 值。
IE8 中 @import 只支持三层嵌套。
Update 08-3.12：

IE8 中负数的text-indent 值会被裁切。
IE8 中依然存在 Fuzzy Specificity Bug。

模仿Flickr和Digg的分页样式

Ken — Sat, 21 Jun 2008 16:27:08 +0000

原作者地址：http://woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html

最近有个新项目，正好也对过去的一些积累做些重构和升级。代码方面的以后静下心来抽空写一下，这两天正好有个需求，是要对原来的一个分页tag做改造，尤其是样式上的。以前tag中的样式已经非常老旧了。

感觉像上个世纪的产品了，得换个时髦一点的样式。原作者选了两个学习榜样，分别是两位web2.0大牛，Flickr 和 Digg 相信对这两个网站大家都不陌生。

是不是很Cool，简单看一下代码吧，顺便说一下，原作者的第一个版本在IE下有问题，然后他的朋友修改了一下，我只好在巨人的肩膀上稍微把Flickr风格的hover效果加了一下。

Demo请点击

文件下载请点击 paginationss_m.zip



?Previous

1

2

3

4

5

6

7

Next ?

代码还是很简洁的，不同风格间切换也非常方便，也没什么好多解释了，决定升级到digg风格了。

Lightbox类库大搜罗

Ken — Mon, 09 Jun 2008 15:49:51 +0000

What’s Lightbox? 最简单的答案，开始菜单 –> 关闭，这个屏幕暗下去的效果就叫lightbox。这个词无论是designer或是blogger都应该挺熟悉的，自从微软（至少我是这么觉得的，请勿以讹传讹）带来这种效果之后，很快风靡起来，很多网站都不约而同的选择这种形式来展现图片等。之前因为项目当中也一直没有这样的需求，所以只是知道有这么个潮流，但是并没有具体的去了解过。这次因为项目需要比较多的图片展现，所以开始了Lightbox类库大搜罗。Let’s Go!

Lightbox 这个算鼻祖了，不过现在看来有点老旧了。
Lightbox2 lightbox的第二代版本，开始引入prototype和小兄弟scriptaculous，体积开始变大，效果开始变强，自己考量吧，对于我这样项目中始终会有这些类库的人来说问题还不是最大。
LightView 和lightbox效果差不多，但是更为强大，并且不仅是图片，几乎所有的网页元素都可以。用作者的话说是Overlay ~~image~~ anything with style。同样的基于prototype和scriptaculous，体积需要考虑一下。但是效果毋庸置疑。
ThickBox 俗话说的好，文人相轻，其实程序员也是特别喜欢在名字上做一些小巧思。最显著的莫过于我们可爱的Eclipse。既然Prototype阵营的叫Lightbox，那JQuery阵营的无法不叫ThickBox。对于使用Jquery的项目来说是非常不错。扯句题外话，JQuery和Prototype真的都是非常不错的产品。
Lytebox lightbox的加强版，增加了非图片内容的支持。
Lightbox Gone Wild 基于prototype的，可以看一下，作者做了比较不错的代码分析，讲了一下开发思路，值得一看，如果你不只是想找个能用的类库的话。
Greybox 特点：22kb 以及不太一样的展现样式，还是挺酷的。
Litebox 为了解决几大jslib怪兽体积，选择了moo.fx，对于个人站点可以考虑。

如果你有更好的选择，也可以告诉我。

[搜网志]Prototip2 重装上阵

Ken — Mon, 09 Jun 2008 15:06:33 +0000

之前给大家介绍过Prototip这个非常cool的tooltip Js类库，效果已经让我很满意，但是似乎其作者不像我这么容易满足，近日Prototip2又重装上阵了。带来了更加出色的样式和效果，几乎为我们带来了所有想到的tooltip效果，让我们一起来看看这样出色的作品吧。

老规矩，先上图：

是不是和原来相比，样式上要好看了很多啊。也许在怪兽级别的Ext中我们能找到几乎所有我们想要的widget，但是不得不说有的时候怪兽的分量实在让人不敢恭维。

//TODO 忙过这阵子，把guide简单翻译一下。

CSS Framework，让你事半功倍

Ken — Fri, 18 Apr 2008 15:31:46 +0000

近两年来，程序员有一句话很流行，“不要重复制造轮子”，所以出现了许许多多让我们非常受用的各种框架。Framework在开发的各个领域给我们减少了很多工作量。而对于网页设计师来说，一直以来，缺少这样的Framework来帮助设计师们减轻工作量。

今天给大家推荐一些不错的CSS Framework：

首先是本文的主角：

这是一个非常轻量级而且很少侵入性的框架（这话怎么看都不是网页设计师能熟悉的，:-) ），换句话来说，这是一个很底层的CSS Framework，并没有替你实现任何布局，也没有提供很多好看的模板。它只是帮你把一些最基本的事情做掉了，剩下的交给自己来了。非常适合那些具有一定开发经验的网页设计师使用。我做了一些中文化修改，大家如果发现问题，可以联系我。

reset.css

html, body, div, span,applet,
object, iframe,h1, h2, h3, h4, h5, h6,
p, blockquote, pre,a, abbr, acronym,
address, big, cite, code,del, dfn, em,
font, img, ins, kbd, q, s, samp,small, strike,
strong, sub, sup, tt, var,dd, dl, dt,
li, ol, ul,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,
tr, th, td {
margin: 0;padding: 0;border: 0;
font-weight: inherit;font-style: inherit;
font-size: 100%;line-height: 1;
font-family: inherit;
text-align: left;vertical-align: baseline;

}

a img, :link img, :visited img {border: 0;}

table {border-collapse: collapse;border-spacing: 0;}

ol, ul {list-style: none;}

q:before, q:after,blockquote:before, blockquote:after {content: “”;}

首先是将绝大部分元素的样式清零，免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。

global.css

body{background-color:#FFFFFF;}
body, p, td, th, li
{
font-family: “宋体”,verdana,helvetica,sans-serif;
font-size:0.875em;
line-height:1.5em;
color:#000000;
}

注意两点，这里定义了背景色和前景色，这是标准要求的，是网页可用性的一个基本方面，大家可以执行修改。

第二点，就是font-size的问题，为了让网页更好的支持网页缩放功能，应该使用em来替换px，这样会让ie6等上古浏览器也能良好的支持网页缩放。浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。换算过来的话也就是说1px=0.0625em，也就是12px=0.75em, 10px=0.625em，通过1px=0.0625em大家可以在CSS编写时通过px转换成em。

/* Standard Definitions
—————————————-*/
.left {float:left;}
.right {float:right;}
.clearIt {clear:both;}
/* =10px */
.small {font-size:.625em;}
/* =14px */
.large {font-size:0.875em;}
/* =16px */
.larger {font-size:1em;}
.soft {color:#D3D3D3;}
.hide {display:none;}
p.last {margin-bottom:0px;}

提供了一些比较实用的预定义类。

print.css

感谢Hartija Css Print Framework提供，这里面有个非常好的idea，我们来看一下，大大提高了打印效果：

/*hide various parts from the site

#header, #footer, #navigation, #rightSideBar, #leftSideBar
{display:none;}

*/

对于网页打印来说，我们更需要的是正文内容，这样可以将那些美丽的元素暂时藏掉。

打包下载：element_css_framework_modify.rar

//———————————————————————

下面介绍些其他出色的框架：

[搜网志]Prototip 基于Prototype的tooltip

Ken — Thu, 17 Apr 2008 14:00:42 +0000

今天带来的是一个非常强大的tooltip js类库， Prototip 该类库基于Prototype和他的头号拥趸Scriptaculous，相信大家对于这个黄金搭档还是很熟悉的。

有道是 5pp54，不废话，直接明盘上图

一共十九种效果任君采撷。

[搜网志]IE的CSS标准兼容性官方MSDN说明

Ken — Tue, 15 Apr 2008 15:08:27 +0000

IE的CSS标准兼容性官方MSDN说明

http://msdn2.microsoft.com/en-us/library/cc351024(VS.85).aspx

[搜网志]使用GlassBox来创建Vista玻璃效果

Ken — Fri, 11 Apr 2008 02:50:58 +0000

搜网志编号：001 Vista玻璃效果

搜网志天字第一号带来的是Vista那炫目的Aero效果。自从换了新电脑转到Vista系统后，终于认清了不是Vista不好，而是用的机器不对。呵呵，大家如果不是机器很旧也来尝试一下Vista吧。回到我们的主角，GlassBox，一个基于Prototype和Scriptaculous(可选)的js类库。给我们带来非常逼真的玻璃效果，而且API也很丰富，不只是简单的网页特效。推荐一下。效果图如下：

CSS代码优化压缩工具

Ken — Fri, 11 Apr 2008 02:25:08 +0000

本文概要：CSS 代码压缩优化工具，加快页面加载速度，节省网络带宽

前天给推荐了“CSS代码生成器”，今天继续第二波攻势，最近跳槽换新工作了，这两天处于无业状态，多更新几篇。下周起就不做张江民工了，改做八佰伴民工了。:-)

推荐两款CSS压缩优化工具：

CSS Formatter and Optimiser (based on csstidy 1.1)

http://www.cleancss.com/index.php

Cascading Style Sheets Optimization

http://www.cssoptimiser.com/

CSS代码生成器(CSS Frame Generator)

Ken — Wed, 09 Apr 2008 12:26:54 +0000

程序员都是懒人，这应该也是推动我们不断创造新东西的源动力吧。今天IT民工推荐大家一个非常不错的小工具，可以帮助我们生成页面的CSS模板。当然是不包含定义的模板。也不能太懒是不是，结合之前“创建性感CSS样式表的十个技巧”，应该可以事半功倍了。

http://lab.xms.pl/css-generator/

没有越俎代庖替我们生成很多，恰到好处，是不是很酷啊。

最常用的CSS小把戏(Most used CSS tricks)

Ken — Mon, 07 Apr 2008 08:42:33 +0000

原文出处：http://stylizedweb.com/2008/03/12/most-used-css-tricks/

本文概要：最常用的CSS Trick，诸如圆角、首字下沉等等。

之前有篇译介“8个一句话CSS小诀窍”介绍了8个非常使用的一句话CSS小技巧，这周再给大家带来一篇类似的文章，介绍了一些最常用的CSS Trick，或者叫做CSS小把戏。当然我相信每个设计师都会有一些个人的偏好，我个人对文中的一些小把戏就不太感冒。

1. 不使用图片的圆角效果

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

效果图：

（很多人喜欢运用这样的圆角技巧，但我个人不是很喜欢，虽然不用去做圆角的图片，但是多出的这些tag总觉得很多余）

2. 样式化列表

This is line one

Here is line two

And last line

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

效果图：

这个效果我也是很喜欢的，可以在序号上应用不同的字体。

3. 无表格表单

4. 双引号技巧

5. 渐变字效果

6. 垂直居中

更多内容参见原文

10. 首字下沉

This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap.

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

效果图：

创建性感CSS样式表的十个技巧(Sexy Stylesheet)

Ken — Wed, 26 Mar 2008 17:00:11 +0000

原文链接：http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets

如果你想成为一位CSS专家的话，光背出一堆选择器是不够的，还要能够提高CSS样式表的可读性，开发效率以及维护性。这里，Jina Bolton 将给我们分享一下她关于如何创建性感的CSS样式表的十个技巧。

本文主要内容为：CSS代码编码规范，教你如何写出整洁漂亮性感的css代码，如何清晰的组织你的样式表文件。闲言少叙，直接进入正题，完整文字请查看原文。doubanclaimff3e7764f748141c

1. 不要在HTML文件中使用CSS样式定义

相信对于多数有一定工作经验的设计师来说，使用外部样式表来定义CSS样式是小菜一碟的工作。但我在这里仍然需要再次告诉你这点，因为我看到相当多的站点在最开始的时候，有着非常结构清晰，组织良好的代码。但是随着时间的推移，慢慢地内部定义乃至内联样式开始蔓延到站点的各个角落。也许是因为项目周期十分紧迫，抑或只是因为我们有点偷懒。

想象一下，当这样的坏习惯被我们保持了下来，一段时间后，如果老板希望在不改动网页内容的前提下重新设计网站的样式的话，OH，你将不得不去查找这些自己丢在各个角落的垃圾代码，如果项目碰巧规模又非常之大，那我恐怕只有祝你好运，或者推荐你去找黄健翔了。

千万别给自己找这样的麻烦，创建干净的代码，并始终让他们保持干净，这样你会让生活变得充满快乐。

注意：请小心使用过多的外部样式表，如果每次更改你都创建一个新的样式表，这不会给你带来任何好处。过多的样式表会让你将来的调试和更新工作变得更加复杂，当然我理解你希望将样式分组管理的初衷，后面的内容中我会专门和你一起讨论这个问题。

友情提醒：过多的样式表应用，会带来潜在的性能问题，并且在IE6下，最多只能引入32个外部样式表。

2. “语义学Semantics”不是猜字谜游戏

我要告诉你们，“语义学Semantics”将是你们最好的朋友。在你选择最合适，语义最正确的元素来描述文档内容之外，也请选择语义清晰，合适的词语来定义你的class名称以及元素ID名称。不仅仅是做正确的事，这样做还能让你和你的团队成员的工作变得更加简单。让我们来看一条样式定义：

.l13k { color: #369; }

我相信你乍看到这条定义，你能否知道它是用来干嘛的吗？我想你肯定答不上来。这个名称应该是某个只有作者本人知道的缩写，即使作者现在知道含义，但一个月后，一年以后你还能知道它的含义吗？让我们再来看一条定义：

.left-blue { color: #369; }

这条定义，你可能立刻猜到它是用来干什么的了，页面左边区域，文字颜色为蓝色，表述的非常清楚明确。但是让我们来假设一下，不久的将来，老板希望重新设计样式，这个区域的内容位置将换到右边，文字颜色将换成红色。很显然，这个名称将变得不再合适，甚至变得不正确，现在你有两个选择，一是替换掉每个使用该class的地方，二是继续使用这个让人产生误解的名称。

这样看来，名称不是描述清晰就是好的，我建议你们最好是不要采用诸如颜色或者是高度宽度尺寸等非常具体的细节来命名样式定义，同样的也尽量避免使用具有具体形象的词汇来命名（比如使用 box），这样的做法某种程度上破坏了我们希望将内容和样式分离的初衷。怎样做才是最好的呢，让我们来看一下这个：

.product-description { color: #369; }

这个定义命名，无论你重构多少次，它都是非常合适的，美丽的东西永远是美丽的。

3. 善用代码注释

善用代码注释将会给你和你的团队成员带来极大的便利，不仅仅是通常的注解，我们还能非常创造性的去使用注释来帮助我们更好的完成工作。

* 提示和标注

代码注释最基本和最常见的用处就是用来提示和标注代码，告诉别人这是用来干嘛的。

/* Turn off borders for linked images */
img { border: 0; }

* 时间戳和署名

和我们写程序代码一样，是用注释在文件头部留下时间戳，版本号以及编辑者的署名，将更好的帮助我们追踪记录文件的历史记录。

/* Sushimonster Typography Styles
     Updated: Thu 10.18.07 @ 5:15 p.m.
     Author:     Jina Bolton
   —————————————————-*/

* 组织代码

将样式定义按照不同的组别来分组是一个非常好的主意，如果我希望将页首的样式定义放在一起，我会使用这样的注释来帮助我提高代码可读性：

/* HEADER
—————————————————-*/

* 注释标帜

如果你采用了我上面提及的使用注释来分隔不同分组的样式定义代码的方法的话，那使用注释标帜将是一个非常有用的技巧来帮助你更好的查找代码，迅速准确的定位到你想要的位置。我们可以使用一个特殊的符号（比如 [=]）来作为注释标帜

/* =HEADER
—————————————————-*/
非常酷的一个小技巧，这样你不用上下拖动，就能迅速通过查找来定位到你想要编辑的位置了，查看更多关于注释标帜。

* 参考索引

虽然不常用，但是也是非常有用的一个注释使用方式就是作为代码的参考索引，比如在文件头部留下使用到的颜色代码：

/* COLORS
   Body Background:        #2F2C22
   Main Text:                     #B3A576
   Links:                              #9C6D25
   Dark Brown Border:     #222019
   Green Headline:            #958944
*/

4. 明确什么时候使用CSS Hack 什么时候使用IE条件注释

有很多关于使用CSS Hack带来的问题，或是使用IE条件注释来解决IE兼容性问题是更佳的方法的文章，以及两者都不支持的文章。以前，我一直认为使用IE条件注释解决这个问题要比CSS Hack来的合适，但是最近通过一些例证，我发现条件注释也不是最合适的解决方案。

原因在于，使用条件注释，必然需要维护同一样式的不同IE版本的副本，这样就带来了工作量的增加，而使用CSS Hack则没有这个问题，因此要具体问题具体分析。

但是不管采用哪种方法，请注意以下两点：

a) 如果使用了条件注释，请在主代码文件中留下注释，提醒自己以及其他设计师，如果修改了此处样式，则需要同时更新其他所有IE版本的样式定义。

b) 如果使用CSS Hack，也请留下注释，标明这里使用哪些Hack，对于什么版本浏览器生效，因为在可以预见的将来，随着浏览器版本的升级，这些Hack很有可能会失效。

5. 组织好你的选择器以及属性声明

切记，切记，请将你的样式表文件组织的结构清晰，我比较倾向于以下的代码组织方式：

reset styles 重置浏览器默认值
typography styles 文字，版式定义
layout styles (header, content, footer, etc.) 布局定义
module or widget styles 模块定义
etc.

对于上面的分组之下，我根据元素DOM位置来分组：

any parent styles (containing elements, working outside-in) 容器元素
block-level element styles (paragraphs, lists, etc.) 块级元素
inline element styles (links, abbreviations, etc.) 行级元素
etc.

再之下，我根据元素类型来分组：

paragraphs
blockquotes
addresses

lists

forms

tables
最后对于每一个样式定义，我会将属性声明根据不同的类型分组：

positioning (with coordinates) styles

float/clear styles

display/visibility styles

spacing (margin, padding, border) styles

dimensions (width, height) styles

typography-related (line-height, color, etc.) styles

miscellaneous (list-style, cursors, etc.) styles

很多人喜欢将属性声明按照字母排序，这个就是看个人喜好，但是我喜欢这样的分组方式。
6. 创建CSS Framework
如果你发现你经常创建类似的样式表的话，那你可以创建属于自己的CSS Framework来积累大量的基础样式表，这样在将来可以大大简化你的工作。

screen.css – A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:

reset.css – A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility. （我的重置样式表 undohtml.css）

typography.css – A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.

grid.css – A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).

print.css – A print CSS file would include your styles you want to be used when the page is printed.

Blueprint framework 就是一个非常不错的CSS Framework，大家可以看一下。
7. 平衡可读性和代码优化
是将代码优化到极致（比如，没有注释，没有换行，压缩到体积最小），还是保留文档非常好的可读性。这个问题，每个人可以去找属于自己的平衡点。当然最理想的做法是，发布网站的时候再去压缩CSS样式表文件。
8. 熟练掌握你的文本编辑器
不管你是使用textmate，dreamweaver，vim，还是什么，请一定要熟练掌握他们。工欲善其事，必先利其器。
9. 使用版本控制
使用例如SVN或者CVS等版本控制程序来辅助我们更好的维护样式表。（对于我们程序员来说，可能这个再熟悉不过了，推荐使用SVN iloveit）
10. 创建并维护样式表文件指南
如果你想成为一名出色的设计师，坚持这点吧。
//—————————————————————
当我在0:31分时候译完整篇文章并排版好的时候，保存时出了问题，打好的东西都没了，唉，大家记得发布前要Ctrl+C。

您可能也喜欢：

20个帮助你更好的掌握CSS的网站
最常用的CSS小把戏(Most used CSS tricks)
CSS代码优化压缩工具
50个超级有用的CSS开发工具

无觅

导航菜单设计趋势与实例 (Navigation Menus)

Ken — Thu, 13 Mar 2008 05:47:45 +0000

原文出处：http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/

版权声明：本文版权归原作者所有译介仅供国内读者参考

BANG421388A95514C2DCE6B44914XIANGUO

对于一个网站来说，导航栏菜单应该是最为重要的一个元素。由于网页没有什么可供用户作为定位的东西，所以全站一致的导航栏就成了少数可以给用户带来方向，引导他们浏览整个网站的元素之一。用户很依赖它，所以设计师绝对不能在这个地方马虎了事。

还是那句老话，最好的往往是最简单的，当然简单的东西绝对不代表就是乏味的。去年，我们就曾经就导航栏写过一篇文章 modern approaches of navigation design 。现在让我们看看这方面的设计的最新趋势吧。

下面就让我们来看看，最新的导航栏设计趋势，实例和一些非常炫的设计。

1.会“说话”的导航栏（Speaking navigation）

对于导航栏来说，最重要的任务莫过于非常清楚的引领用户访问站点的每个模块。但是通常来说，很难用1-2个关键字来准确描述这个模块的具体内容和功能，特别是在水平导航栏布局下。这就是为什么通常导航栏不会简单地将关键字一个个排列起来来展示所拥有的选项（“沉默”导航栏 silent navigation），设计师多数会选择使用比较具体的描述来表达该选项的内容或者功能。

过去的几个月里，我们发现这种趋势越来越流行。

为了让信息变得更加容易接受，通常使用相同高度宽度的块状显示，大图标的使用也越来越普遍，当然评判导航栏好坏最主要的还是网页的整体布局和设计。鼠标悬停效果的设计使用，能让你的网页变得更加亲切。

这样的形式同样可以应用在垂直导航栏上

2. 苹果风格越来越流行

不知道苹果风格是web2.0设计风格大进攻的幸存者，还是一个完全独立的设计风格，又或者只是一个暂时的潮流趋势，恐怕没人能说明白。（看来老外的设计师对苹果风格也有着不同见解）

但毋庸置疑的，越来越多的网站采用了苹果风格

更多示例请参考原文

3. 图标的应用越来越多

为了更好的和用户沟通，设计师越来越多的使用非常具有感染力的图标（appealing icon），当然这个的前提是你的图标必须非常易于辨认和理解你的意思。

（这个是我觉得非常出色的设计）

4. 垂直的Tab导航栏

5. 手写体的大量应用

6. 实验性解决方案

当然还有许许多多不拘一格的新奇设计，有兴趣的朋友可以去仔细看看原文

您可能也喜欢：

2009年网页设计趋势前瞻 (下)
2009年网页设计趋势前瞻 (上)
高效率网页设计的十大军规
测试驱动之于网页设计开发

无觅

使用CSS滑动门技术编写一个灵活的Tab页

Ken — Wed, 12 Mar 2008 15:48:03 +0000

最近在研究CSS，正好结合项目做了一个灵活的Tab页，使用纯HTML＋CSS实现，正好总结一下。

首先看一下预览界面：

样例HTML可以访问：http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html

下面开始讲述一下完成上述页面的步骤。

1. 构建HTML
构建HTML是整个过程最基础的部分。我们构建HTML比较关键的一个原则就是尊重标签本身的语义。所以在这里，先分析一下期望做到的HTML的结构的情况，并加以分析，选择比较合适的HTML标签，而不是采用非标准的Table布局或者充斥着大量div和class的布局方式。事实上，现在存在着一种误区，就是凡事采用了DIV＋CSS的方式进行页面编程的就是Web标准的，其实这是错误的观点，很容易就导致了“多div症”（divitus）或者“多类症”（classitis）。
回到正题，我们分析一下页面样式，可以将整个Tab页分成2个部分，分别是一级菜单和二级菜单，他们有类似的特点，并以横向方式排列。HTML标签中的无序列表就可以反映出这种逻辑关系。所以我们分别采用2个无序列表来表示一级菜单和二级菜单。代码如下：

考勤管理

教学管理

家校互通

系统管理

当天考勤

请假审批

考勤统计

考勤汇总

其中，2个div将菜单级别划分开。其实在以后还会有其他的功效。此时，我们不妨预览一下这张页面，我们可以惊喜的发现，这张页面是可读的，这一点我们可以在整个过程做完以后再一次验证。

2. 构建基本CSS

先简单的让ul横向排列，这里面要注意元素float之后要注意清理

然后通过分别在LI 和 A 元素上应用背景来实现主菜单样式，这里有个比较重要的地方是A这个元素变成块级元素（display: block），这样可以便于我们下面做一些处理，也能使整个菜单应用到链接样式。
而其中的line-height，恰恰可以使A中的字纵向居中。text-align使得A中的字横向居中。

.navg .mainNavg UL {
margin: 0;
padding: 0;
list-style: none;
}
.navg .mainNavg UL LI {
float: left;
background-color: #E1E9F8;
background: url(../images/tab_right.gif) no-repeat right top;
margin: 10px 3px;
height: 25px;
}

.navg .mainNavg UL LI A {
display: block;
height: 25px;
padding: 0 25px;
line-height: 24px;
background-color: #E1E9F8;
background: url(../images/tab_left.gif) no-repeat left top;
text-decoration: none;
float: left;
text-align:center;
color: #fff;
font-weight: bold;
}

3. 使宽度自适应

我们在这里使用滑动门技术来做宽度自适应。下面简单介绍一下滑动门技术

简单来说，就是在LI上应用一幅大图像背景，并让这个背景居于右侧

然后在A上应用一个小图像背景，并让这个背景居于左侧，遮住大图像边缘

这样无论菜单文字内容长度怎么变，都不会破坏原来的结构了。

4. 当前菜单高亮显示

如果高亮当前页面，这个有很多种做法，最死板的是在每个页面上显式的定义类。
但是对于web项目来说，页面多数是动态的，所以这样不是最理想的方法。

我这里采用的方法是CSS选择器的灵活使用

#attendance #attendanceNavg,
#teach #teachNavg,
#communication #communicationNavg,
#system #systemNavg {
background: url(../images/tab_right_on.gif) no-repeat right top;
}
#attendance #attendanceNavg A,
#teach #teachNavg A,
#communication #communicationNavg A,
#system #systemNavg A {
background: url(../images/tab_left_on.gif) no-repeat left top;
color: #0000ff;
}

在
的代码中，我们可以使用不同的id作为选择器，由于CSS中的选择器id的优先级将大于class，所以只要根据id配合上li上面的id，就可以达到动态选择高亮选中的目的。

事实上，由于我们的页面都是动态的，所以id可以由后台生成，这样就可以通过id的不同组合非常精巧的实现了我们的需求。

5. 小技巧

最后可能还有一个问题你在想怎么实现的，就是高亮的tab如何把下面的横线遮掉的

很简单，图片上的小技巧。将高亮的图片高度设置为25px，而普通的图片设置为24px。然后通过padding，就可以将那根横线遮去了。

我们可以使用类似的方式，把二级菜单也做出来，这里就不详细叙述了。大家可以结合源码试一下。

prototype.rar

您可能也喜欢：

最常用的CSS小把戏(Most used CSS tricks)
CSS代码优化压缩工具
CSS代码生成器(CSS Frame Generator)
CSS Framework，让你事半功倍

无觅

8个一句话CSS小诀窍

Ken — Tue, 11 Mar 2008 07:34:01 +0000

最棒的解决方案往往是最简单的那个，提供8个一句话CSS小诀窍

原文出处：http://cssglobe.com/post/1392/8-premium-one-line-css-tips

版权声明：本文版权归原作者所有译文仅供国内读者参考

1. 使用line-height（行高）垂直居中

line-height:24px;

对于拥有确定高度的元素，使用line-height可以将其内部元素垂直居中。PS. 原来的做法 valign 是一个不正确的做法。

2. 防止确定宽度的浮动元素布局被其内部超宽的元素破坏

#main{
overflow:hidden;
}

对于拥有确定宽度的浮动（float）元素，如果内部有一个超宽元素（比如一个很宽的图片），那你精心设计的布局可能就无法正常显示，最简单有效的防止手段就是 overflow:hidden;
虽然会隐藏掉一部分元素，但最大限度保证了整体布局的正确。

3. 防止链接换行

a{
white-space:nowrap;
}

很多时候，链接会非常长，如果换行变成2行乃至多行，可能对用户造成误导，建议使用这个方法防止该情况。（我本人到觉得要根据具体情况分析）

4. 始终显示Firefox的垂直滚动条

html{
overflow:-moz-scrollbars-vertical;
}

Firefox默认是不显示垂直滚动条的，为了避免滚动条在有和无之间切换，建议使用该方法强制显示。（还真没意识到这个问题:-)）

5. 块级（block）元素水平居中

margin:0 auto;

这个基本是处理水平居中的最简单方法了。（CSS mastery 中提供了另外几种方法，不过这个是我最喜欢的）

6. 去除IE中textarea的垂直滚动条

textarea{
overflow:auto;
}

如果你和我一样讨厌这个，去掉它。

7. 打印网页时强制换页

h2{
page-break-before:always;
}

这个可以强制打印网页是换页。（/qiang）

8. 去除链接的虚线框

a:active, a:focus{
outline:none;
}

（并不总是有效果）

您可能也喜欢：

CSS Framework，让你事半功倍
CSS代码生成器(CSS Frame Generator)
CSS代码优化压缩工具
50个超级有用的CSS开发工具

无觅

开发者感兴趣的IE8 beta1的七大改进

Ken — Sun, 09 Mar 2008 04:45:55 +0000

微软在MSDN IE blog上列举了开发者感兴趣的IE8 beta1的七大改进，其中包括CSS2.1的完整支持，HTML5的支持，内置开发工具等。beta1主要是提供给开发者体验使用的，普通用户更适合beta2。
文中还提到，稍后就会发布德文和简体中文版的IE8 beta1，但是没有公布具体日期。

1.我们的目标是在IE8正式版中提供完全,完整的CSS2.1支持.(还没完成,Beta2会有更多)
2.我们为W3C CSS工作组贡献了超过700个测试用例.
CSS的说明很好,但是有很多歧义的地方.我们认为一个广泛的验证测试套件对CSS很重要,对web开发者和设计者都有帮助.这些测试用例跟其他W3C的测试用例一样是基于BSD授权许可的.
3.我们提供了更好的脚本性能.
4.我们已经开始提供HTML5的支持.
5.我们提供了很棒的内置的开发工具(developer tools).(同样还没完成,会有更多)
6.我们提供了“Activities.”方式,可以让web服务更好的整合到用户的工作中.
基于微软的开放格式承诺,我们已经提供了OpenService的格式说明.
7.我们提供了“WebSlices.”方式,可以使web服务能够更容易让用户的注意力集中到网页中感兴趣的部分.

原文链接：http://blogs.msdn.com/ie/archive/2008/03/05/internet-explorer-8-beta-1-for-developers-now-available.aspx

您可能也喜欢：

IE8 beta2重装上阵无法忽视的雷蒙德巨头
IE8如何定义浏览器工作模式避免网页显示混乱
IE8正式版第一印象
Microsoft IE8 CSS3扩展支持

无觅

IE8如何定义浏览器工作模式避免网页显示混乱

Ken — Sun, 09 Mar 2008 04:41:33 +0000

随着IE8 beta1的发布，发现连sina有显示问题，查了一下，在一位大大的blog上找到了原因，“由于 IE8 对标准的“良好”执行，当 XHTML 文档使用 Transitinal 类型时，会自动选择 Quirks 模式，即 IE5 的模式来解析，所以也就不难理解为何大多数站点会遭遇显示问题了”

如何处理该问题呢？方法如下：

1. 将文档类型改成 Strict。也就是将

改成

2. 该完之后如果还没有解决问题，那么只好强制声明了，在结束之前加入

如果需要工作在 IE7 Strict 模式下，改成 IE=7.

这样一来，破相的问题就基本解决了。如何查看 IE8 的工作模式呢，在 IEBlog 的留言中有解答，执行 javascript:alert(document.documentMode);，返回 5，说明工作在 IE5 Quirks 模式下；返回 7，说明工作在 IE7 Strict 模式下；返回 8，说明工作在 IE8 Standards 模式下。

引用：http://www.wp-theme.cn/2008/03/07/ie8-layout-mode/
IE blog 原厂资料：http://blogs.msdn.com/ie/archive/2008/03/06/the-default-layout-mode.aspx

您可能也喜欢：

开发者感兴趣的IE8 beta1的七大改进
IE8 beta2重装上阵无法忽视的雷蒙德巨头
Microsoft IE8 CSS3扩展支持
IE8正式版第一印象

无觅

您可能也喜欢：
去除右键菜单里面的”用阿里旺旺发送此文件…”	导航菜单设计趋势与实例 (Navigation Menus)	Ubuntu 和 Windows 双系统启动顺序调整	Lightbox类库大搜罗
无觅

您可能也喜欢：
云端之城 – Bespin 在线HTML编辑器	Gmail新功能 – 快速打标签	DreamHost – $5.95/mo 马丁路德金纪念日最新优惠码	推荐一本新书《Struts2技术内幕》
无觅

您可能也喜欢：
测试驱动之于网页设计开发	IE8如何定义浏览器工作模式避免网页显示混乱	2009年网页设计趋势前瞻 (下)	高效率网页设计的十大军规
无觅

您可能也喜欢：
2009年网页设计趋势前瞻 (上)	高效率网页设计的十大军规	2009年网页设计趋势前瞻 (下)	测试驱动之于网页设计开发
无觅

您可能也喜欢：
50个超级有用的CSS开发工具	CSS Float 基本概念汇总	Microsoft IE8 CSS3扩展支持	高效率网页设计的十大军规
无觅

您可能也喜欢：
[译]十三个你应该了解的免费Web应用	CSS代码生成器(CSS Frame Generator)	CSS Framework，让你事半功倍	50个超级有用的CSS开发工具
无觅

您可能也喜欢：
推荐一款很暖人心的WordPress theme – Page Style	雨神眷顾的早春三月 – 三月壁纸推荐	导航菜单设计趋势与实例 (Navigation Menus)	最常用的CSS小把戏(Most used CSS tricks)
无觅

您可能也喜欢：
[Tips]Vista SP1安装后删除备份文件，释放磁盘空间	Vista系统安装优化备忘	[搜网志]Prototip 基于Prototype的tooltip	[搜网志]Prototip2 重装上阵
无觅

您可能也喜欢：
开发者感兴趣的IE8 beta1的七大改进	IE8 beta2重装上阵无法忽视的雷蒙德巨头	Microsoft IE8 CSS3扩展支持	IE8正式版第一印象
无觅

IT民工的坐井观天 » 绾青丝 – WebDesign

将YUI Compressor加到右键菜单

十个不常用但应该掌握的HTML Tag

Author: Glen Stansberry

1.

2.

3.

4.

5. 和

6.

7.

8.

9. rel属性

10.

备忘 – IE6的十大Bug Fix

1. 强制浏览器是用Web标准解析

2. Set Position: relative

3. 给Float的元素加上inline属性避免双倍margin

4. 给特定元素加上hasLayout属性

5. Fix字符重复bug

6. 需要悬浮效果的地方，尽量使用标签

7. 使用!important或者高级选择器来兼容IE6

8. 避免在IE6下使用百分比尺寸

9. 频繁测试，尽早测试

10. 重构你的代码

七个能够帮助你进行网页浏览器兼容性测试的工具

设计十八般兵器之 “经典字体”速查

Blueprint(Css Framework) version0.8

960是个神奇的数字 – 960 Grid System介绍

测试驱动之于网页设计开发

兼容性测试

利用这些测试结果

=== CSS增强

Javascript增强

一次测试，终身受用

Microsoft IE8 CSS3扩展支持

20个帮助你更好的掌握CSS的网站

一个CSS小技巧解决了游戏预览问题

IE8 beta2重装上阵 无法忽视的雷蒙德巨头

Developer Checklist:

模仿Flickr和Digg的分页样式

Lightbox类库大搜罗

[搜网志]Prototip2 重装上阵

CSS Framework，让你事半功倍

reset.css

global.css

print.css

[搜网志]Prototip 基于Prototype的tooltip

[搜网志]IE的CSS标准兼容性官方MSDN说明

[搜网志]使用GlassBox来创建Vista玻璃效果

CSS代码优化压缩工具

CSS Formatter and Optimiser (based on csstidy 1.1)

Cascading Style Sheets Optimization

CSS代码生成器(CSS Frame Generator)

最常用的CSS小把戏(Most used CSS tricks)

创建性感CSS样式表的十个技巧(Sexy Stylesheet)

1. 不要在HTML文件中使用CSS样式定义

2. “语义学Semantics”不是猜字谜游戏

3. 善用代码注释

4. 明确什么时候使用CSS Hack 什么时候使用IE条件注释

5. 组织好你的选择器以及属性声明

6. 创建CSS Framework

7. 平衡可读性和代码优化

8. 熟练掌握你的文本编辑器

9. 使用版本控制

10. 创建并维护样式表文件指南

导航菜单设计趋势与实例 (Navigation Menus)

1.会“说话”的导航栏 （Speaking navigation）

2. 苹果风格越来越流行

3. 图标的应用越来越多

4. 垂直的Tab导航栏

5. 手写体的大量应用

6. 实验性解决方案

使用CSS滑动门技术编写一个灵活的Tab页

8个一句话CSS小诀窍

1. 使用line-height（行高）垂直居中

2. 防止确定宽度的浮动元素布局被其内部超宽的元素破坏

3. 防止链接换行

4. 始终显示Firefox的垂直滚动条

5. 块级（block）元素水平居中

IE8 beta2重装上阵无法忽视的雷蒙德巨头

1.会“说话”的导航栏（Speaking navigation）