Glen Stansberry is a web developer and blogger. You can read more tips on web development at his blog Web Jackalope follow him on Twitter
1. <cite>
我想大家对于<blockquote>这个标签是非常熟悉的，比如上面的原作者信息这个内容就是一个<blockquote>。但是对于它的小兄弟<cite>标签可能大家就不是很熟悉了，<cite>标签用在对于书籍，文章的引用，默认显示为斜体，当然你可以通过css来控制实际的样式。
例：“若尘你也是堂堂七尺男儿，该有那十荡十诀之勇” 引用自 《尘缘》
2. <optGroup>
这个其实挺有用处的，对select下拉框里的选项分组。不过现在很多时候select这个元素通常被用其他元素wrap来展现，毕竟原生的这个效果不够华丽。
例：
紫微真人 紫阳真人 无尽海主人 洪荒卫 3. <acronym>
这个标签使用在缩写或短语需要进一步解释的情况下。
1
我的小游戏网站 <acronym title = "游戏247 欢乐不停歇" > 247</ acronym > 欢迎你的来访。
例：我的小游戏网站 247 欢迎你的来访。
4. <address>
<address>标签用于特定信息，如地址、签名、作者、此文档的原创者。
1
2
3
<address >
上海浦东峨山路陆家嘴软件园
</ address >
例：
上海浦东峨山路陆家嘴软件园
5. <ins>和<del>
对于写blog的同学来说，这两个标签应该是比较熟悉了，特别是一些教程类的文章，在不断的修订中，如果想保留修订信息的话，这两个标签是非常实用的。
1
John <del > likes</ del > <ins > LOVES</ ins > his new iPod.
例：John likes LOVES his new iPod.
6. <label>
如果你是一个细心并且负责的设计师，那你应该为每一个表单元素添加对应的label，这样既可以最大程度的保证文档性，并能适当的场景下帮助那些使用辅助工具来阅读网页的人士。
1
2
<label for = "username" > Username</ label >
<input id = "username" type = "text" / >
7. <fieldset>
<fieldset>这个标签是展现表单相当好的一种形式。
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. <abbr>
这个倒真是一个非常少见的标签，它的语义和<acronym>类似，但是它没有鼠标悬停时的解释信息，通常只对屏幕阅读器等辅助工具有帮助。
9. rel属性
1
<a rel = "clickable" href = "page.html" > This link is editable</ a >
因为每个标签上的rel属性都是合法属性，所以对于离不开javascript的现代网页开发来说，这是最安全的放置特殊变量或者其他信息的地方，比如所有lightbox类库的那些信息。
10. <wbr>
插入一个软换行符，只有在有换行需要的时候才会换行，听上去不错，但似乎几乎没有人会使用这个标签。
=========================
IE6的十个bug的Fix方案，看到一篇文章整理了一下，顺便转过来备忘一下。http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-ie6-problems/
1. 强制浏览器是用Web标准解析
HTML的写法
1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
或者XHTML的写法
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"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，他的触发条件也是相当诡异，在浮动元素间如果有<!– comment –> <!– comment –> <!– comment –> positioniseverything 。
解决的方法也很奇怪
6. 需要悬浮效果的地方，尽量使用<a>标签
IE6中只能对<a>应用css hover效果，所以尽可能使用<a>标签来获取最大的兼容性。
7. 使用!important或者高级选择器来兼容IE6
使用!important和高级选择器来兼容IE6，可以避免使用那些通不过校验的非常规hack，比如所谓的_width这样的东西。我们来看个简单的例子。
1
2
3
4
5
#element {
min-height : 20em ;
height : auto !important; /* understood by all browsers */
height : 20em ; /* IE6 incorrectly uses this value /*
}
IE6是不能正确解读!important这个修饰符的，所以他会错误的使用height:20em这个属性来实现最小高度。（IE6下容器会自动扩展）
1
2
3
4
5
6
7
8
9
#element {
min-height : 20em ;
height : 20em ;
}
/* ignored by IE6 */
#element [ id] {
height : auto ;
}
或者使用高级选择器，同样也能实现该目的，这样代码既能保持合法性，也能很好的去兼容IE6这个诡异的产品。
8. 避免在IE6下使用百分比尺寸
1
2
3
4
body {
margin : 2 %0 !important;
margin : 20px 0 ; /* IE6 only */
}
在IE6下是用百分比的尺寸是件非常让人头疼的事情，尽可能避免这样的使用，而是采用结合!important和精确尺寸来明确元素的大小。
9. 频繁测试，尽早测试
和其他编程一样，现在编程提倡持续测试，尽早测试，甚至可以测试驱动，在CSS开发过程中也要尽可能的频繁测试，可以参看我之前介绍的一些测试工具。 ==> 七个能够帮助你进行网页浏览器兼容性测试的工具
10. 重构你的代码
越磨砺，越光芒。。。。。
从最初的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
应该说是相当好用也相当强大的在线工具，可惜收费用户和免费用户差别太大 了，有兴趣的同学去看看吧。
阅读全文…
做设计的时候，选择合适的字体是非常重要的一个环节，当然有很多字体查看软件，但是说实话用了那么多，都大同小异，没有什么特别好的。也许是个人习惯的原因吧。偶然看到一篇文章，倒是个不错的办法。自己人肉动手做一些速查的字体cheatsheet，的确是比较直观，比单纯用软件去找来的好。有点按图索骥的味道。看来自己还是太懒，哈哈。
点击查看大图
原文：http://www.dogorgod.com/blog/font-in-design-of-the-skills-seek.html 还提供了字体打包下载
最近每天沉醉在那堆垃圾代码中改着无穷无尽的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的期望过高了，他并不会帮我们做什么事情，只是帮助我们更好的去做一些事情，来看下例子：
<div class="container showgrid">
<div class="span-24">
头部页眉
</div>
<div class="span-4">
左边侧栏
</div>
<div class="span-16">
<div class="span-8">
居中行1-1
</div>
<div class="span-4">
居中行1-2
</div>
<div class="span-4 last">
居中行1-3
</div>
<div class="span-16 last">
正文内容
</div>
</div>
<div class="span-4 last">
右边侧栏
</div>
<div class="span-24">
页脚
</div>
</div>
效果图：
通过这些预置的class，能够很快的排版，我想通过这个例子大家应该能理解类似于blueprint 960gs这样的framework该如何使用。
如果感兴趣的话，去下载使用吧 http://blueprintcss.org/
今天介绍一个网页辅助设计框架，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。大家少待。
最新评论