CSS

on CSS with Comments

浅谈Minimum page & Normalise.css

阅读本文，请先阅读 CSS项目Minimum Page简单介绍。本文不是在介绍Minimum Page项目，而是完全是我对 Minimum Page 以及 Normalise.css 的一些个人看法。 关于CSS Reset的话题素来以已久，我的观点Reset对于个人是不必要的，但对于团队来说是重要的一环，因为需要避开个体成员的编写差异。Reset没有对错，只有适合与不适合之说。关于Reset有什么不明白的，可以阅读Maxdesign的 CSS Reset - a simpler option。 你可以在 CSS:…

on CSS with Comments

开发过程中的调试样式

甚少有人论起这种主题，因为使用的人真的不多。这些开发过程中的用于调试的CSS虽然可能很管用而且很高效，但毕竟不是必须的——实际上，即使是我自己都未曾在自己的开发过程中使用过。但我并不是不信这些调试CSS的作用，它们能很快的通过视觉层面指出问题，但显然它更加适合标准流程化的开发进度而不是像现在的大多数开发那样的随意。 正因为用的少，所以知道的也不多。看下面的样式就明白是怎么回事了： /** * Catching unsized images during development * Any images without width and height attributes will be drawn with a red…

on CSS, Tools with Comments

CSS3代码生成器

CSS代码工具界从来没有像现在这么繁荣——随着CSS3的渐渐流行，复杂样式的编写迫切需要有代码的生成工具简化编写的难度和节约时间。于是各种各样的工具在一年间到处开花，现在多到需要自己挑选的地步。本文虽然写的是我自己常用的生成器，但在文中链接里还能找到更多。这些工具不仅帮助我们节省无意义时间的小号，而且对于CSS3新手来说，通过生成器有针对性的学习新属性也不失为一种捷径。 Randy Jensen 的 CSS3 Generator 可能是知道的人最多的CSS3代码生成器。不仅界面简单，还列出了浏览器支持范围。我常常用到它，它为我编写复杂样式节约了相当多的时间。 只是在最后一项CSS3渐变，作者并不是自己完成而是直接引用了另一个强大的渐变代码生成器—— deziner folio 和 SGlider12 带来的 Ultimate CSS Gradient…

on WordPress, CSS with Comments

iline主题的手持设备支持

写第一个wordpress主题，我用了约两天的时间，设计绘制PSD稿1天，前端代码1天，但那个主题我完全已经忘记是怎么回事了，显然已经成了豆腐渣工程。一个仅仅外观比较清爽的主题，没有任何额外的思考。于是，琢磨着各种各样的想法，就有了现在这个博客所使用的主题，名字叫iline，就是"爱线条"的意思。而这个主题从开始写到现在，悄然已经过去了半年了... 3个月时间构建结构，3个月时间构建功能，有空就改进一点点，慢慢打磨出来的自己的主题，不过离完成却仍然还有很长的路要走。 最近的变化是增加用jQuery的重写了隐藏侧边栏的动画、自适应宽度和固定960px宽度的转换，以及左上角menu功能的完善。里面增加了一个PPT Extra Mode用来将内容区的文本基准放大到正常尺寸的3倍，…

on CSS, IE with Comments

word-wrap导致的li额外间隙

有些问题可能很少有机会遇到，前段时间我就在工作中遇到一个由word-wrap引起的兼容问题。因为当 word-wrap:break-word 这种 rule被加到了全局CSS里后，出现问题就显得非常隐蔽，所以排查了不少时间才找到原因。不过这也不算大问题，因为造成这种情况是多种因素的巧合。如下图： 造成这种莫名其妙间隙的原因就是对li应用了word-wrap的结果。但是单单应用word-wrap还不足以使IE6和IE7出现反常，另一个必要条件就是没有对li指定宽度。如果每个单元都是由图像的高宽撑大的而没有设置宽度，这样再加上word-wrap就出现了上面那张图中的情况。 既然反复测试中知道了原因那么解决方法也就显而易见了。解决方法有3个： 对li应用word-wrap:normal; 限定li元素的高宽; 对图片的万精油display:block; 随后闲话说说word-wrap，一个微软的私有属性，但现在也已经被CSS3标准吸纳。虽然这是一个非常实用的属性，但是在某些特定情况下，对旧浏览器仍然还是会造成一些影响的。…

on Alibaba, Flash, HTML5, CSS with Comments

Web发展路向何方？

记得是2005年，但也许更早，前端工程师这个职位开始在中国出现。如果再往前推，CSS的发展不过是十几年，HTML也才是个20岁风华正茂的小伙子。现在HTML5和CSS3，带来了诸多新的变革，web发展是日新月异还是略显老态？ 浏览器路向何方？ 曾经名赫一时的各种壳浏览器还剩下多少呢？像 IE green browser 这样的壳还有人在用么？主流里剩下了遨游，世界之窗，以及一干插足者。360和世界之窗的合作生出来个360浏览器，凭借360客户端数量和安全的旗号割据一方。搜狗打出了双核的旗号也同样凭借着输入法的装机量分到了自己的一杯羹。腾讯，仍旧是凭借其QQ加以推广。也许后来者还会有百度和阿里巴巴，今天的新闻又看到一个新的插足者——金山。 这种混乱的局面以前也曾经出现过，但过往的各种壳的特点是草根气息，现在的壳却都是大腕在暗自部署他们的客户端。…

on CSS, IE6, Theme, WordPress with Comments

新的wordpress主题

自从尝试做了swordis主题之后，对wordpress的主题也有所认识。于是决定做一个自己的主题。并且这次和上次不同，是很认真地要做完的。名字还没有想好，但是目标很明确： 没有图片的纯CSS主题。意味着线条和空间是首要设计元素。 必须过XHTML1.1以及CSS3验证。CSS3阴影和变换等，由于有前缀，所以即使使用也会暂时注释掉。 通过主题单元测试( Theme Unit Test )。这是一组严酷的内容兼容性检测。 流体布局。右边栏，因为我调查下来，比起侧边栏在左面，似乎更多人习惯在右面。 弹性em值。 兼容所有主流浏览器，包括IE6在内。 这些天从睁开眼睛开始我就在思考怎么把这个新的主题写好。主要考虑的是线条和颜色，实际上和篆刻类似，…

on CSS, IE9 with Comments

CSS3 Media Queries 详解

说起CSS3的新特性，就不得不提到 Media Queries 。最近 Max Design 更新的一个泛读列表里，赫然就有关于 Media Queries 的文章。同时位列其中的也有前天我刚刚翻译的 IE9, Opacity 和 Alpha 。 虽然标题相同，但本文并不是列表上 CSS3 Media Queries 的译文，因为原版有Demo有例子有图片，全文不长而且不难看懂，所以我也就不翻译了。基于自己已经了解到一定程度，所以就打算自己写。 CSS2中有已经定义了 Media…