99css

工具

在UlrtraEdit中配置Zen Coding

Zen Coding出来很久一段时间了，鬼哥更是在分享时潇洒的秀了一把，真是羡慕死人了。最近一直忙着搞需求，只有周末才有时间折腾一下，有点小郁闷~ Aptana配置方法及详细介绍可以看前端观察翻译的Zen Coding: 一种快速编写HTML/CSS代码的方法，配置起来有些麻烦，每个项目要导入一遍，另外虽然Aptana功能很强大，JQ/YUI等智能感知也很爽，不过有些慢 Editplus配置方法见zen code for EditPlus，缺点是zen coding之前要先选中代码段，麻烦，另外在EP中的Consolas字体显示也很差劲 Dreamwear配置方法见zen coding的dreamweaver插件安装教程，额，自从告别ASP后就没用过DW了 Visual Studio 2008配置方法见[Tool]Zen-coding : Set of plugins for HTML and CSS hi-speed coding，这个很合我意，
  • ytzong
    ytzong
ytzong • 3 min read
Bug

用display:inline-block做产品列表

由于D2的关系看到这篇文章《[纯技]产品列表到底应该怎么做？》，评论发不成功，又恰逢最近频繁遇到类似的项目，总结如下： 传统的实现方式是用float来实现，换一种思路用display:inline-block，比如这篇《Cross-Browser Inline-Block》（中文翻译）。在Firefox/Safari/Chrome/IE8中会遇到《说说display:inline-block》提到的第一个空隙问题，不过现在已经有了解决方法（详见《Firefox Bug: inline/inline-block的间隙》的评论并略作改进）： ul{letter-spacing:-.25em} li{letter-spacing:normal;} 同时我也尝试了《Layout of repeating blocks》提到的word-spacing，不过仅Firefox/IE8有效，而在Chrome/Safari中无效
  • ytzong
    ytzong
ytzong • 1 min read
Bug

Sub-Pixel Bug?!

jQuery之父John Resig写过一篇《Sub-Pixel Problems in CSS》，一个50px宽的div中有4个float的div，每个宽25%，然而各个浏览器对50*25%的理解有些纠结（demo）： 随后Steven Wittens的《CSS Sub-pixel Background Misalignments》，测试了固定宽度的元素水平居中时父元素背景图片居中的差异，更让我们看到眼花（demo）： 让人郁闷的是：不止IE，各浏览器的不同版本也有些许差异… 还好，现实工作中很少会碰到这种情形（某些像我这种一个月都做此类页面的人除外），遇到了也只是一个相对简单的情形，比较典型的应用场景是：某些活动类的页面，背景一幅很宽大宏伟的1280px大图居中，中间区域980px居中，1024分辨率下980px外的部分能显示多少就显示多少，不出现横向滚动条，大于1024的分辨率则大图全部显示。 下面来看个简单的demo（为了方便发现及总结问题，外围大图宽400px（对应上面的1280px），中间200px掏空（对应上面的980px），中间图宽200px）： <!DOCTYPE
  • ytzong
    ytzong
ytzong • 6 min read
Pixel Perfect

Pixel Perfect - 工具

之前使用最多的工具是QQ/TM的截图（快捷键CTRL+ALT+A）和肉眼估算，追求pixel perfect的话还是要专业的工具才好 FastStone Capture 身为一款截图软件却带了一把邪恶的屏幕标尺，不幸落入设计师手中成为测量偶们页面的万恶之源！ Pixel Perfect 一款基于firebug的扩展，官网为http://www.pixelperfectplugin.com，效果不错，不过只支持Firefox Microsoft Expression Web 通过工具栏的视图-描摹图像菜单来进行设置或调出 之后配合设计视图进行调试。用起来也没那么爽，设计视图的显示效果和浏览器始终会有差异 打造自己的Pixel Perfect Pixel Perfect扩展和EW的描摹图像功能原理类似，将效果图叠在页面下方并设置一定的透明度之后偶们再用肉眼比对。知道了原理我们自己就可以开始DIY了，代码如下： <!DOCTYPE html> <html> <head&
  • ytzong
    ytzong
ytzong • 2 min read
CSS

自适应圆角

前言 有时候我们不得不面对圆角，也很傻很天真的认为利用 CSS3 的新特性对浏览器分级支持是最好解决方案，但现实≠理想… 需求 3px 圆角 宽度自适应（随着文字字数扩展宽度并自动换行） 换肤 不使用图片（对可维护性/性能均有影响） 困惑 经典的解决方案看起来像这样： <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title&
  • ytzong
    ytzong
ytzong • 5 min read
Pixel Perfect

Pixel Perfect - 中文字体2

如果你以为世界就此清净那就错鸟，在WIN7下有另外结果（VISTA应该接近，木有条件测试），如图： 结论： WIN7/Arail12px14px文字ie8高12px占20px 上3px下5px 下划线在14px处高14px占20px 上2px下4px 下划线在16px处ff3.5字12px高20px 上5px下3px 下划线在18px处高14px占20px 上3px下3px 下划线在18px处看到此，偶内牛满面，偶这就去公司加班…
  • ytzong
    ytzong
ytzong • 1 min read
Pixel Perfect

Pixel Perfect - 中文字体1

花了几个小时小小研究了一下中文字体： 使用的是XP下的 Arial 字体（不同字体下的结果不同，即便同为中文） 列分别为12px文字、12px链接、12px加粗文字、12px加粗链接、14px文字、14px链接、14px加粗文字、14px加粗链接 行分别为IE6、IE7、IE8、FF3.5 点击图片看大图 结论： 加粗对字体高度无影响，其他见下表： XP/Arail12px14px文字ie6/7高11px占14px 上0下3px 下划线在13px处高13px占16px 上0下3px 下划线在15px处ie8高11px占15px 上0下4px 下划线在12px处高13px占16px 上0下3px 下划线在14px处ff3.5字11px高15px 上2px下2px 下划线在14px处高13px占16px 上1px下2px 下划线在16px处
  • ytzong
    ytzong
ytzong • 1 min read
OOCSS

[翻译]OOCSS FAQ

原文：http://wiki.github.com/stubbornella/oocss/faq（翻译时为Version 28） 翻译：ytzong 在OOCSS中怎么定义“对象”？ 对象类似JAVA中的类，保持着OO的特征。 一个CSS对象由4部分组成： 可能是一个或多个DOM节点的HTML 由wrapper节点的class名开始的CSS样式声明 类似于背景图片和显示用的sprites组件以及 JavaScript行为，监听或者与对象关联的方法 这可能令人费解，因为每个CSS class不是其自身必要的对象，但可以是一个wrapper class的一个部件。比如： <div class="mod"> <div class="inner"> <div
  • ytzong
    ytzong
ytzong • 16 min read
Bug

IE 6&7 z-index bug

很老的 bug了，详细描述看下面几篇文章吧： position:relative/absolute无法冲破的等级 对《无法冲破的等级》一文的补充 补遗《无法冲破的等级》 文中给出的方法简单明了，不过有时页面比较复杂，只有通过用JS遍历 position:relative 元素并改变其 z-index 值来解决了。有了 JS 框架则更加简单。《Fixing IE z-index》分别给出了 jQuery 和 MooTools 版本，下面是 jQuery 版本的代码： $(function() { var zIndexNumber = 1000; // Put your target element(s) in the
  • ytzong
    ytzong
ytzong • 1 min read
Let's make the web faster

[翻译]加速 JavaScript：处理 DOM

原文：Speeding up JavaScript: Working with the DOM 作者：KeeKim Heng, Google 页面工程师 翻译：ytzong 当制作 RIA(Rich Internet Application) 时，我们使用 JavaScript 来改变或增加元素。这是靠 DOM (Document Object Model 文档对象模型) 来完成的，这是如何影响 app 的速度呢？ 处理 DOM 会使浏览器 reflow (浏览器决定如何显示东东的进程)。直接操作 DOM，改变元素的 CSS 样式，
  • ytzong
    ytzong
ytzong • 5 min read
Let's make the web faster

[翻译]用Page Speed Activity捕获并分析浏览器渲染

原文：Capturing and analyzing browser paint events using Page Speed Activity 作者：Bryan McQuade, 软件工程师 翻译：ytzong 安装 Page Speed 是一个 Firebug/Firefox 扩展，安装地址：http://code.google.com/speed/page-speed/download.html 背景：逐步呈现 快速的网页逐步呈现。即随浏览器的加载而逐步显示其内容。一个逐步呈现的页面给浏览者页面在加载的视觉回馈，并尽快给给用户请求信息。Google和Yahoo 都建议逐步呈现页面，比如把 CSS 写在页面
  • ytzong
    ytzong
ytzong • 6 min read
HTML

用 HTML 5 来提升性能

Google 网站管理员 Jens Meiert 发表了一篇《Using HTML 5 for performance improvements》，大部分内容在《Reducing the file size of HTML documents》(中文版)中都有提及，新增的部分为async(和 defer)，以下为该段的翻译： async 和 defer 使用在 script 元素上。 要解释为什么这些属性会提升性能，最好是看一下未使用时发生了什么 — 各自的脚本在用户代理(浏览器，下同)继续解析页面前将被提取并直接执行，有时这个行为是我们想要的，有时不是。 新的 async 属性允许各自的脚本在可用时异步执行。HTML 4
  • ytzong
    ytzong
ytzong • 1 min read
OOCSS

[翻译]驯服CSS选择器--健壮我们的样式表

PPT:Taming CSS Selectors 作者：Nicole Sullivan 翻译：ytzong CSS 文件的大小和所引起的 HTTP 的请求数 是 CSS 性能的最关键因素 回流(reflow)和渲染时间 (非常！)没那么重要 副本(duplication)比陈旧的规则(stale rules)更糟糕 因为我们有工具处理后者 定义缺省值 不要在每处都重复编码 不好的： #weatherModule h3{color:red;} #tabs h3{color:blue;} 推荐： h1, .h1{...} h2, .h2{
  • ytzong
    ytzong
ytzong • 2 min read
用户体验

[翻译]重(zhòng)载下的动态 UI 设计技巧

TechTarget 主办的 Ajax Experience 2009 大会9月14日至16日在波士顿举行，业内大牛纷纷向 Web2.0 世界发起挑战，探讨一些诸如用户体验、高性能与可维护性、架构等伟大主题，放出的 PPT 在此。 下面是 Patrick Lightbody分享的后半段总结翻译(前半段为演示)： PPT：Design Tips for Dynamic UIs Under Heavy Load 作者：Patrick Lightbody 翻译：ytzong 为失败而设计 不要忘记 AJAX 仍为网络应用 - 网络会由于各种原因失败 网络不可预知 为 AJAX 请求意外添加
  • ytzong
    ytzong
ytzong • 2 min read
Bug

使用 background:url(#) 解决 IE bug

通过设置selector{background:url(#)}可以解决一些IE6&7 bug： 1.鼠标滚轮失效bug，demo。 当时用的是添加背景色的方法： #works{background:#fff} 也可通过下面方法解决： #works{background:url(#)} 2.a 标签为了 png-24 图片透明而使用透明滤镜后导致 a 链接不可点击，demo a{background:none} 解决方法(demo)： a{background:url(#);/*或指向透明的gif*/} 详见 No Transparency Click Bug 3.a 局部点击bug，demo。
  • ytzong
    ytzong
ytzong • 1 min read