双飞翼布局 v1.0
源码文件：grids.css
压缩版本：grids-min.css
合并版本：reset-grids-min.css
测试页面：grids-taobao.html
命名规则和样式生成工具：css-generator.html
阅读全文 »
Entries Tagged ‘CSS’:
KISSY CSS Reset 1.0
源码文件：reset.css
压缩版本：reset-min.css
测试页面：test.html
更新说明：
- 调整了字体和行高，请参见 三谈 Web 默认字体。
- 将 h1 到 h3 的默认字号调整为 font-size: 100%;
- 去掉了 tt, abbr, hr, q 的重置样式。原因是：tt, q 不推荐使用。hr 的差异，具体页面去负责。abbr 的默认样式在各浏览器下虽然有差异，但并不会带来问题，重置意义不大。
- 加入了对 sup, sub 的重置样式。
- 增加了 reset-post.css, 方便重置以大段文字展示为主的内容区块。测试页面：test-post.html
最后，贴一份代码：
阅读全文 »
三谈 Web 默认字体
最近疯狂测试 reset.css, 第一个首要测试点就是默认字体。前不久秦歌的帖子和我的再谈，收到了很多朋友的反馈。重新整理了下，请先仔细查看测试页面：
1. Tahoma 字体的问题，小麦总结过。在 IE6 下，Arial 字体在下划线的显示上的确略有优势，甚至有神奇的魔数 1.231 来让中英文对齐。但除了 IE6, 其它浏览器下，Arial 表现并不好。考虑门户网站的设计趋势，链接加下划线的形式，已逐步去掉，比如 YAHOO 首页。国内腾讯首页也早就去掉了满屏的下划线，目前只有新浪、搜狐等站点依旧满屏下划线。考虑 IE6 的占有率正逐步降低以及面向未来编程，坚持用 Arial 优势不大。
阅读全文 »
再谈 Web 默认字体
秦歌这篇文章总结得很不错，俺挑刺来啦：
1. 优先级的描述不严谨，有 !important 时，网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。
2. Tahoma 字体从 Win95 就有了，并且从 Win2000 开始，Tahoma 成为 Win 英文系统的默认字体。2007 年，在 Mac OS X v10.5 (Leopard) 中也开始内置 Tahoma 字体。至今，普及性还是相当不错的。
3. Google, YAHOO 等网站，首选 Arial, 个人觉得是出于兼容性考虑。Google 需要考虑到对各种设备的支持，这就和 Google 首页继续采用 table 布局一样，table 布局可以保证在尽可能多的用户终端中正确显示。Arial 字体同理。
4. 但这并不代表 Google 等页面的做法就是最好的。从渐进增强角度讲，font-family: Tahoma, Helvetica, Arial, sans-serif; 可以达到优雅降级的目的。在更好的用户代理中，显示更好的字体，同时用 Arial 殿后，也能保证在尽可能多终端设备中正确显示。渐进增强无处不在，需要我们的共同努力和推广。（注：考虑 Mac 用户，Leopard 中内置了 Tahoma 字体，因此 font-family: Helvetica, Tahoma, Arial, sans-serif; 会更渐进增强一些）
阅读全文 »
