无事呻吟
Filed in Life, 2008-05-17, 9:38 am为了保持至少每周更新一篇的频率，现在开始流水帐。
2008.5.12，这个日子相信很多年以后依然能够被大多数人所熟记。这些天来，每次上网的第一件事情都是打开一个个新闻网站一个个论坛搜寻地震救援的最新进展。已经不想再提起地震中的人和事，许多都只要想起那么一丁点就会热泪盈眶。很想为他们做点什么，可是总感觉无能为力；很想抛下许多东西跑到四川去当志愿者，可是又是那么的不切实际。唯一能做的，也只是默默为那些苦难中的人们祈福，为奋斗在救援第一线的人们祈福。灾难不可怕，在今年许多不平凡的事件中，我看到了与我生在在同一片土地上的人们的无比强大的凝聚力。这股力量才是最珍贵的。我相信中国一定会变得越来越美好。天佑中华！
临近考试周了，事情也越来越多。腾讯的面试就要来了，心里却越来越没底。突然发现自己要学的东西还有太多太多，却又突然无从下手。好好坚持这几天。祝我好运，也祝松鼠石头刘磊都好运。我们加油！
前几天去武音听了音乐会，法国电子。迷幻的不知所云，只能听出个大概。所幸没有睡着，而我们那一行11人中没有睡着的也是寥寥无几。音乐会不可怕，可怕的是人的疲倦 
昨天急着上外网代理突然挂掉，到今天都还没好。这东西一般都会这么巧，你需要的时候，它往往就离你越远。
最后再说一句。博客MS被百度K掉了，google却支持的无比之爽。搞不懂原因，还是老老实实的写罢了。上上篇文章被转载了许多地方，看到之后心里无比高兴。不管怎么样，那是对我努力的一种肯定。接下来再接再厉！
流水帐结束，谢谢观看，下次再会。
DMX css tools
Filed in Web, 2008-05-11, 4:08 pm经过长时间的学习和实践，Demix（也就是本人 ）逐渐摸索出了一套自己的CSS开发格式。这些天来一直致力于写一个大家都可以通用的css前期文件，包括了清除浏览器差异，全局字体设置，全局通用类设置，布局的大框架架构等内容。今天终于完成一个初稿，发出来给大伙玩玩～～ 下载请点这里
文件的一些需要注意的地方在这里说明一下。
一、清除浏览器差异
对于清除margin这里依旧使用了一串很长的字符串:
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align:baseline;
text-decoration:none;
}
有许多人问过为什么不直接这样写
* { margin:0;padding0; }
这里用了一个通配选择器将所有的元素的margin 和 padding 都设为了0。这样是不好的。很多时候，我们不需要将某些元素的默认值全部清空，如<textarea/>和<input/> 。而且对于一些浏览器，这样的声明会被忽视。例如<textarea/>中如果我们将margin,padding全部设为0，FF3会忽视之而IE7会清除。由于我们无法知道这些问题什么情况下会发生，所以最好的选择就是不去踩这样一些地雷，而且这样的改变，也违背了reset的初衷。
对于table，很多已有的清理文件都保留的table的border-collapse，我这里将它设为了collapse将之去掉。原因很简单，至今我没有使用过独立的边框。
清除部分参考了yahoo css tools 和 blueprint css framework 。
二、字体方面
现在开始使用em。一个常用的方式是将body里面的font-size 设置为 62.5% ， 这样1em就对应了10px，对于后期的处理会非常的方便。但是一个问题就是，这样设置之后中文在IE里面的显示会莫名其妙的稍稍撑大。解决的办法是将 font-size 设置为63%。但这又带来了一个问题，当使用大em的时候，会造成一定程度的不精确。如对于20em我们本来期望得到的是200px，但实际会得到202px。如果要注意这样的问题那么设为63%所带来的方便又会消失。所以我的css文件中还是将font-size设为了75%，这样1em对应的就是12px，其他时候就按按计算器吧 :)。
另外，我将h1~h6的全部默认样式清空了，因为对于我来说几乎每次都没有使用它们的默认样式。W3C公布了一些html元素的建议默认样式，需要的人可以按建议样式设置。点击这里查看。
三、布局
暂时定义了四种布局样式，当然只是对于子元素分栏的层。定义宽度为标准字体下的960px。具体可见文件内容。我个人比较不喜欢定死各个框架的宽度，这样子css设计的灵活性就难以体现出来，而且developer 需要迁就于文件中这些定义的宽度，对自由创作也很不利。详情可见我的另外一篇文章 Use CSS Framework? 。
好了介绍完毕，代码测试了IE6/IE7/IE8 beta1/FF3/Opeta 9 /Safari 3。没有处理IE5.5下水平居中的问题。这样的一些bug，我比较倾向于再使用一个iehack.css 的文件来处理。文件还会不断更新和扩充，敬请期待。 
CSS样式指南：提高CSS代码的可读性
Filed in Web, 2008-05-03, 11:24 pm参考： Smashing magzine
翻译+整理： Demix
当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。
1.分解你的样式
对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。
而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。
/*------------------------------------------------------------------ [Master Stylesheet] Project: Smashing Magazine Version: 1.1 Last change: 05/02/08 [fixed Float bug, vf] Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl) Primary use: Magazine -------------------------------------------------------------------*/ @import "reset.css"; @import "layout.css"; @import "colors.css"; @import "typography.css"; @import "flash.css"; /* @import "debugging.css"; */
同时对于大型项目，你也可以加上CSS文件的升级标志或者一些诊断措施，这里不再详述。
2.建立CSS文件索引
为了能够迅速的了解整个CSS文件的结构，在文件开头建立文件索引是一个不错的选择。一种可行的方法是建立树形的索引：结构上的id 和 class 都可以成为该树的一个分支。如下：
/*------------------------------------------------------------------
[Layout]
* body
+ Header / #header
+ Content / #content
- Left column / #leftcolumn
- Right column / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Search / #search
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Advertisements .ads
Content header h2
——————————————————————-*/
或者也可以这样：
/*------------------------------------------------------------------
[Table of contents]
1. Body
2. Header / #header
2.1. Navigation / #navbar
3. Content / #content
3.1. Left column / #leftcolumn
3.2. Right column / #rightcolumn
3.3. Sidebar / #sidebar
3.3.1. RSS / #rss
3.3.2. Search / #search
3.3.3. Boxes / .box
3.3.4. Sideblog / #sideblog
3.3.5. Advertisements / .ads
4. Footer / #footer
-------------------------------------------------------------------*/
另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至RSS部分你只需要简单的搜索 8.RSS。
/*------------------------------------------------------------------ [Table of contents] 1. Body 2. Header / #header 3. Navigation / #navbar 4. Content / #content 5. Left column / #leftcolumn 6. Right column / #rightcolumn 7. Sidebar / #sidebar 8. RSS / #rss 9. Search / #search 10. Boxes / .box 11. Sideblog / #sideblog 12. Advertisements / .ads 13. Footer / #footer -------------------------------------------------------------------*/ <!-- some CSS-code -->
/*------------------------------------------------------------------
[8. RSS / #rss]
*/
#rss { ... }
#rss img { ... }
定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候方便查阅。
3.定义你的颜色和版式
CSS 中我们无法使用常量，但是在编写颜色和版式方面的代码是我们会经常遇到可以使用很多次的类，在这里可以将之视为CSS 的常量。
一种可以减小CSS无常量定义确定的方法是在CSS文件顶部的注释中下一些定义，也就是定义常量。一种最简单的应用就是创建一个颜色表。这样你就可以快速的了解整个页面的色彩，从而避免一些反复修改过程中的错误。如果你需要对颜色进行修改，你也可以很快找到它。
/*------------------------------------------------------------------ # [Color codes] # Dark grey (text): #333333 # Dark Blue (headings, links) #000066 # Mid Blue (header) #333399 # Light blue (top navigation) #CCCCFF # Mid grey: #666666 # */
或者，你也可以选择描述你布局当中使用的颜色。对于一个给定的颜色，你可以将用到该颜色的块罗列出来。当然，你也可以选择按页面元素来罗列颜色。
/*------------------------------------------------------------------ [Color codes] Background: #ffffff (white) Content: #1e1e1e (light black) Header h1: #9caa3b (green) Header h2: #ee4117 (red) Footer: #b5cede (dark black) a (standard): #0040b6 (dark blue) a (visited): #5999de (light blue) a (active): #cc0000 (pink) -------------------------------------------------------------------*/
对于版式有同样的例子。
/*------------------------------------------------------------------ [Typography] Body copy: 1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif; Headers: 2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif; Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif; Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif; Notes: decreasing heading by 0.4em with every subsequent heading level -------------------------------------------------------------------*/
4.格式化CSS属性
当我们编写代码的时候，使用一些特殊的编码风格会对提高CSS代码的可读性有很大帮助。许多人都有各自不同的编码风格。一部分人习惯于将颜色和字体的代码放在前面，另外一部分则更喜欢将类似浮动和定位的更“重要”的属性放在前面。类似的，也可以将页面元素按照它在布局中的结构进行排序：
body,
h1, h2, h3,
p, ul, li,
form {
border: 0;
margin: 0;
padding: 0;
}
一些开发者用一种更为有意思的方法：他们将属性按首字母的顺序排列。值得注意的是，这样一种方法可能对某些浏览器会产生问题。
不管自己的格式如何，你要确保你已经清晰的定义了这些格式方法。这样，你的同事在阅读你的代码的时候将会感谢你的努力。
5.缩进会是你的朋友！
为了让你的代码给人感觉更为直观，你可以使用一行来定义大纲元素的样式。当指定的选择器里的属性超过三个的时候，这种方式将带来混乱。但是，适度的使用这种方式，你可以很清楚的区分相同类的不同点。
#main-column { display: inline; float: left; width: 30em; }
#main-column h1 { font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 20px; }
#main-column p { color: #333; }
同时，样式修改的维护也是个比较麻烦的问题。很多人修改样式之后就忘记了，结果后来又发现修改的样式导致了页面出错，不得不苦苦寻找。因此，为修改的样式构建一个特殊的格式就很必要了。一种很简单的方式是，给修改过的样式缩进，同时，也可以使用一些注释（比如”@new”）来做一个标识。
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; /* @new */
}
总的来说，只有建立一个合适的样式指南才会对样式表的可读性有所帮助。记住，移去每一个对你理解文件没有帮助的样式指南，避免对过多的元素使用过多的样式指南。然后，为了一个可读性可维护性良好的CSS文件而努力吧。
Entries