记得曾经CSS3刚出来那段时间，并没有很在意，只是大概了解了下新增的功能，觉得以后需要应用到的时候找文档来看下应该是很快的事情。并不是说俺狂妄到什么地步，只是，生性懒惰罢了，又好浅尝辄止，所以大多不能挖掘自己的兴趣出来研究。没兴趣，自然就没啥动力了。

最近，上面下来任务，说是要针对现在流行的智能手机，让网页在智能手机上能更好的展现。html5+css3一下子就被提到日程上，没有IE的羁绊，不用考虑那么多浏览器的兼容，心里那个欢啊。。。。马上开始动手啊。写啊写啊，圆角那个单词怎么拼？咦。。。渐变的样式这么写来着？这个border-image怎么木有用啊？尼玛还让不让人活了，怎么hover木有样式了呢。。。无数个问题就这样噼里啪啦的出现了，搞的头大。google看英文看的郁闷啊，尼玛怎么大学不好好过级啊，都干嘛去了啊？百度尼玛找来找去都是同一篇文章啊，尼玛你就不能换个新鲜点的吗？书到用时方恨少啊，项目到开工时方恨准备不足啊。不过好歹也慢慢挺过来了，至少知道圆角是radius，知道渐变改怎么写，border-image为什么无效了。。。

人嘛，总是在错误中成长的。想起了刚学重构那段时间，边看书边实践，现在的技术也是在那段时间日积月累慢慢成长起来的，也曾通篇用过div标签，也曾胡乱使用标签，更曾在内联标签里套着块级元素，各种调不出效果，各种挫败，各种迷茫，都渐渐在实践中慢慢的一个一个消失了，现在虽然不敢说是牛人水平，也能够独当一面了吧，曾经的那些错误汇集成了锐利无比的矛，为我劈荆斩棘。

也算小有所悟吧，如若因害怕而放弃实践，真知便永远无法触及。

阅读全文 >>

人，为什么活着？
为了思念，
为了活下去，
为了活更长，
还是…
为了离开。
……

阅读全文 >>

6月份过去了。。又过去了一个月，自己的梦想自己的理想在6月份里再一次被我无情的抛弃了。执行力总是很差，加上上个月公司的项目普遍处于混乱的状态，直接导致开始出现消极怠工的状态。晚上回家就想睡，白天上班更想睡。我已经没有那么多时间可以失去了，却总是日复一日的虚度，定的目标大多数没有实现，少部分实现的也是迟到了很久的。

早已想好要更换环境了，但是这段时间下来都抽不开身啊，根本没心思去考虑这些。刚小加班弄了一个项目，半点成就感都没有，当你做出来的东西丝毫不能给你带来快乐的时候意味着什么呢。。。不想了，睡觉吧。希望明天充满阳光。

阅读全文 >>

今天在小志GG的博客上看到一篇文章《扯扯ie6的死亡》，观点还是满赞同的。所以在这里也说说自己的一些看法。

确实这两年页面重构在国内盛行了起来，每一个从业者对web标准的好处估计都能够信手拈来。个人从业两年来，有一个小感想就是，国内很多刚起步的从业者就像个暴发户一样，学了些基础就会叫嚣“你怎么可以用table呢，那是不符合标准的”、“看做这个网站的傻逼，竟然还在用table布局”、“IE6你快点死吧，为什么你还活着？”，类似这样的言论。不知道是整个社会的浮躁影响了我们还是行业的问题，在这场发展浪潮中，大家高举着“圣经 ”，大踏步的往前迈时，却根本没有人顾及最最根本的两个字—“用户”。

大家都知道在web标准兴起之前，网页布局用的都是table，ps打开切一切，用shim图片控制控制，一个网站很快就出来了，耗费的时间比标准布局要少很多，当然缺点也很多，难以维护，页面冗余严重。但是页面表现出来对于用户来说有区别吗？用户只关心这个网站能不能正常浏览，功能可不可以用。如何方便维护、如何优化代码，那是我们的事，和用户无关，我们要做的就是即使用户在使用win95，也要让他能够正常访问网站。用户是网站的命根子，凭什么要在自己的浏览器上看到“亲，你的浏览器过于老土了，换一个吧。不换不给你看哦！”，这是赤裸裸的绑架啊。诚然，web标准需要推广，但并不是在牺牲用户利益的基础上推广，如果那样，web标准还有什么意义，牺牲那么多用户利益就因为一部分人不能顺利的解决问题？

现在回头看看IE6，为什么市场份额一直居高不下？国内市场除了盗版系统难道就没有其他原因吗？假设，IE6频繁崩溃、IE6频繁更新、IE6动不动oops、IE6一开可怜的内存直接见底。。。。。。如果有这些毛病，在浏览器竞争如此激烈的环境下，试问谁还会去用IE6？一两年占领榜首可能是运气，如果连续十年占领榜首，你不得不承认它真的有两下子。IE6是要死，有很多BUG，不支持更酷更炫的效果，但那些都是技术的事，和用户无关，不应该让用户陪着IE6一起死。当然有些极端的想法认为大公司牵头拒绝IE6，用户就会不得不转向更高级的浏览器，我觉得这种想法有点像最近很热门的词—“强拆”。

在可预见的几年内，在PC发展如此迅猛（一年前，我的本本买了4000多块，现在少500块还能买到更好的 T.T）条件下，IE6终将会死的。现在，花更多的时间照顾好用户吧，没必要每天恨恨的对着IE6了。

（写这篇文章花了一个多小时的时间，哎，明明脑袋里有很多观点，就是写不出来，写出来的也感觉不够顺畅。中间还一直在脑袋里自己推翻自己的观点，真是有点分裂啊我。）

阅读全文 >>

这几天在学习《Dive Into Accessibility-在 30 天內打造更具親和力的網站》。关于web accessibility之前一直只是听说，并没有学习过稍微全面一点的知识，更没有设备什么的去琢磨。这次看完这篇文章，收获也满大的，顺便记录一下知识点。

• 为网页指定语言，指定网页语言可让屏幕阅读器更准确的发音，而省略识别语言的步骤。如：

  <blockquote lang="zh-ch">好好学习，天天向上。</blockquote>

• 创建有意义的网页标题。如：站点首页标题“I’m Soap.”，分类页面标题“I’m soap:Skill” 这样。
• 额外的导航协助。在文章页可以创建额外的导航协助，这样一些屏幕阅读器能够读出上/下一篇文章标题和链接。如：

  <link rel="home" title="imsoap" href="http://www.imsoap.com"/>
  <link rel="prev" title="上一篇文章" href="#"/>
  <link rel="next" title="没有下一篇文章了" href="#"/>
  

• 利用样式控制先呈现主要内容。经常有的设计稿，主要内容在右侧，侧边内容在左侧，这时候我们就可以先构建主要内容，然后利用右浮动让它显示在右侧。
• 利用样式隐藏跳过导航的链接？（文章提到说利用display:none来增加一个跳过导航的隐藏链接，但我印象中有看到说display:none的内容并不会被屏幕阅读器读出来。这个要考证一下。）
• 安全的使用色彩。这点主要是针对色盲用户的，对于链接颜色，要是用对比强烈或其他辅助样式来加以区别（加粗、下划线等）
• 使用真实的链接。有的链接从JS代码来跳转，最好给出真实的链接地址，然后用onclick来实现跳转。
• 给链接加上title
• 使用accesskey 为主要链接定义快捷键。
• 为表格添加标题（caption）、摘要（summary）和表头（th）。这个主要考验html标签的熟悉程度了。一般熟悉的都会加上这些。
• 为每张图片添加alt属性，对于装饰性的图片alt留空以告诉浏览器忽略这张图片。（ashung说过，每一个空的alt属性会让图片增加7B的大小，可以自己衡量看看。）
• 若图片作为列表项的图标，需要适当的伪造。这实际上是加强对alt属性的认识，屏幕阅读器对于图片是读出alt属性的，如果用图片作为列表图标，就应该让屏幕念出来的时候能让人听得像个列表，所以可以为alt属性加*号或其他符号。当然，我们有ul，我说的这是下面这种情况。

  <div><p><img src="#" alt="*" />列表1</p>
  <p><img src="#" alt="*" />列表2</p></div>
  

• 为热点地图提供可取代的文字。这同样是alt属性的使用。
• 良好的文档结构。h1-h6好好用~

阅读全文 >>

前一段时间遇到一段怪异的需求，后来找Jesscia求助，又费了好一番功夫，才把需求搞定，总结一下。

这次的需求怪异的地方在于，结构分上下两层，上层是文章信息，显示图片和文章标题、内容，下层是作者的相关信息，看图，有图片的时候文字并未要求要环绕着图片，没有图片的时候，又要求整个内容的宽度能够自适应。这个的难点在于，按平常的思路，要是不固定宽度，有文章图片的效果就不能很好的表现，要是固定了宽度，便不能够自适应了。但是事实证明，还是有办法的。

一步一步分析吧，首先先写好结构，根据需求的特点，得把新闻图做一块，然后文章信息和作者信息放一块。结构如下：

<div class="wrap">
<p class="news_img"><a href="#"><img src="#" alt="新闻图片" /></a></p>
<div class="news_wrap">
<p class="content">新闻内容新闻内容新闻内容新闻内容新
新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p>
<div class="author">
作者信息作者信息作者信息作者信息作者信息作者信息
作者信息作者信息作者信息作者信息作者信息作者信息
作者信息作者信息作者信息作者信息作者信息作者信息
作者信息作者信息作者信息作者信息作者信息作者信息
作者信息作者信息作者信息作者信息作者信息作者信息
</div>
</div>
</div>

然后加上一些基本样式，让结构看上去比较清晰一点。

*{margin:0; padding:0}
.wrap{ width:500px}
.news_img{float:left;}
.author{background:#ccc}

Ok,这样的效果出来以后，看到的是文字环绕图片的效果。然后接下来要做的就是不让文字环绕图片，你可能会想到让右边右浮动不就好了嘛。很遗憾，对news_wrap设置右浮动以后你会发现，只有IE6/7能够成功，标准浏览器似乎不吃这套。大多数的浏览器浮动若不设置宽度的话，其宽度由子元素的宽度决定，在这里，由于文字字数过多，最后变成了最外围的宽度值。所以在FF/chrome浏览器下你看到的是图片一行，文字一行的情况。不过，我们知道了如何针对IE6处理这种情况了。。。好吧，接下来我也不知道要如何解释其中的原理，在偶然间尝试了一段代码，竟然神奇的可以了。这段代码就是：width:auto;overflow:hidden; 将这个加在author上，然后把我们前面针对IE6得到的解决办法写成HACK，你就发现这世界真美好啊~~~

阅读全文 >>

很多需求要求鼠标移到元素上，元素会做出反应。比如，鼠标移到链接文字上，本来隐藏的图片会显示出来。针对这个需求，为了照顾IE6，而且本身也是链接文字，所以第一个肯定是想到使用a:hover来触发图片显示。简单的示例代码很快就写出来：

<p><a href='#'><img src='http://www.duk.cn/images/duk_logo.png' alt='读客LOGO' title='读客LOGO' />鼠标移过来呗~</a></p>

a img{display:none}
a:hover img{display:block;border:1px solid #ccc}

好吧，IE6下很明显的就发现了问题，鼠标移到链接那一点反应都没有，图片不肯出来了。然后尝试性的更换了img，用span、strong、em等等行内元素，都是同样的问题。这说明IE6下a:hover的触发有问题。后来搜索了一下，taobaoUED的一篇文章提供了解决办法 IE中a:hover的BUG ，说是给a:hover加一些特定属性就可以了，如padding:0或者border:none。但是后来经过测试，发现并不是需要一些特定的属性，只要有给a:hover属性和值就能够在ie6下触发效果，平常做项目的时候基本上没遇到这个问题，是因为reset里已经对a:hover{text-decoration:none}做了定义。单独拿出来因为没有任何初始值，所以就出了问题，这倒是很有趣的一个现象。

测试的过程中遇到了另一个有趣的问题，也是这个例子，如果对p元素设置相对定位，整个代码如下：

/*xhtml*/
<p><a href='#'><img src='http://www.duk.cn/images/duk_logo.png' alt='读客LOGO' title='读客LOGO' />鼠标移过来呗~</a></p>
/*CSS Style*/
p{position:relative}
a:hover{text-decoration:none}
a img{display:none}
a:hover img{display:block;border:1px solid #ccc}

IE6下，hover过一次以后img就不隐藏了，还霸占着位置。想到第一个的自然是haslayout，于是加了a:hover{zoom:1}就解决了。这样看的话，貌似是渲染的问题。不过这种BUG深究下去似乎也没多大意义，IE6已经渐渐远去，这些千奇百怪的BUG也将不复存在了，修复BUG也会渐渐从重构的工作列表中删除，以后只需要关注语义化和web accessibility了。还是那句话：不会其他技能的重构木有前途啊！！！再不学会JS就要喝西北风去了。。。

阅读全文 >>

《三体X》是一部同人小说。不少畅销名作都有自己的同人小说，但把同人小说写到真正与原作神通貌合、丝丝入扣的却很罕见。据说，宝树从读《三体III·死神永生》到创造完成这部同人长篇小说，前后只花了十几天的时间。这堪称创作史上一大奇迹。

科幻世界编者-姚海军

《三体》作为中国科幻界重磅作品，受到科幻迷的强烈追捧，大刘这把大旗扛得真够猎猎作响的。虽然拜读了三体系列，但是除了对好玩的黑暗森林法则和维数攻击印象深刻外，其他情节已经基本上忘了，刚拿到手的5月份《科幻世界》看了《三体X》前几段，那几个人名就让我在脑海中搜索了半天。alocne同学接着就发来了整个修订版的完整txt，接下来可以一饱眼福了，毕竟姚海军还是给了很高的评价，应该不会差。对了，据说还要出单行本了，喜欢的可以留意一下去购买。

         这里放下载地址(三体X（修订增补版）.txt)

阅读全文 >>

这段时间有点忙，本来想把上次去土楼玩的照片整理下发上来也没弄，一些想写总结的东西也一直没写。上次为了抓住自己的一点点灵感，胡乱赶了一篇“CSS模块化初入门”成为了本博客点击率最高的文章，当然，那些看过的人一定很失望，一点营养都没有，呵呵。

上周下定决心要好好努力，所以这几天都在重新看《精通CSS：高级WEB标准解决方案》，然后做一些笔记。也打算认真仔细的看一遍CSS手册。下一阶段的计划是接触智能手机WEB标准开发，然后把买来的HTML5有关书籍看完。其实在我脑中没什么充实的概念，因为我总喜欢偷懒，这次下定决心做的事情，也中断过几次，但不能放弃。

前几天让同事陪着去星巴克买了哥伦比亚的VIA,打算自己喝一点，寄给老哥一点，然后又参加了一次星巴克的咖啡教室，对于咖啡已经从最开始怎么喝都像中药的境界升了一阶，开始品尝出咖啡的香醇了，慢慢的也开始喜欢上咖啡了。

孙燕姿《是时候》的CD也终于到了，看着精美的封面有点犯难了，没有播放器，看来只能收藏了。

现在还是自己一个人的生活，偶尔寂寞，但是没什么牵绊还是感觉比较自由一点，至少暂时不用为怎么哄对方开心而烦恼。

。。。。。。

现在也只能这样咯，工作上好好努力，然后慢慢开始学会享受生活，每天为自己创造快乐，不消极不堕落，保持上进心~等混出模样来再考虑更多的事情吧。

阅读全文 >>

第一次接触CSS模块化这个概念是在Ghost的CSS森林里的一篇文章样式的作用域──页面重构中的模块化设计（一）以及后续的系列文章，那时候道行尚浅，看的似懂非懂的，又没什么人交流，一直没法摸到门路，也一直未能应用上，结果就不了了之。但是一直有个模块化的念头挥之不去。

这几天上班，情绪状态不佳，工作效率不高，心情烦躁。但在偶然的一次修改需求的过程中摸到了模块化的一点感觉，于是重新找出了CSS森林里关于模块化的文章重读了一遍，这下却有相见恨晚的感觉，于是做一点自己的非专业记录。更详尽的当然要去看Ghost的系列文章。

1. 作用域不能太杂。以前写样式的时候，比较暴力，经常是“祖父级类别-父级类别-子级类别”这样胡乱使用作用域，这样的写法对模块化是致命的，直接导致了模块独立出来以后得不到想要的结果。
2. 模块复用性要高，基类（什么是基类？）要写完整。这一点和第一点是有联系的，基类作用域最好在同一个作用域下。
3. 方便扩展。为了方便扩展，基类的继承和权重要考虑周全，权重不能太高，否则扩展类覆盖样式就会比较麻烦。

目前只想到了这一点点，因为到现在应用的很少，关于模块化还是想的比较多，不过已经很让人兴奋了。以后要多多应用 XD

阅读全文 >>