catch the digital flow｜北极冰仔部落格

CSS 扫盲教程继续，这是第六期，主讲内容为 CSS 伪类。在与前五期扫盲教程相隔的这么多天中，我也陆续写过不多几篇 CSS 技巧或与 CSS 有关的东西，但最终没有归入这一系列，毕竟技巧归技巧，基础知识归基础知识嘛。——这一段其实全是废话，是我有意安排来凑版面的，下面正式开始：
CSS 伪类：用来给某些选择器或类添加特殊的效果。伪类的语法为：

阅读全文 - 1296 字

在网页上选中一段文字，默认的呈现总是深蓝色背景 + 白色文字。个性，个性哪儿去了？如果你也想换成下面这样，或换得比它们更漂亮，请继续往下看。
我的：

阅读全文 - 564 字

在很多情况下，我们使用 window.onload 事件判断页面加载完成，注意：不是 DOM。这里就会有一个问题，我们编写的 JS 代码将会在页面上所有元素加载完成之后才开始执行。打个比方，你在网页上使用了一个用来调整外观的 JS，而此刻恰好网络状况不太好，那么用户很可能在漫长地等待页面中所有图片下载完成或超时之后，才能看到脚本调整后的新外观，而在这之前，你的页面外观可能会比较尴尬。
熟悉 jQuery 的朋友知道 $(document).ready 的好处就在这里，它只等待 DOM 加载完成，而不是页面。不过我们不可能做任何应用都引入略显庞大的 jQuery 框架，所以就有国外的大牛写了这个压缩后只有 617 字节的东西：addDOMLoadEvent。本来想亲自写一大段话解释解释这个东东，却 Google 出了别人早写好的，简体中文，有兴趣的直接跳转过去看吧。
阅读全文 - 456 字

去年（是啊，今天可是 2008 年了，各位写日期时别搞错了啊 - -）写过一篇关于 CSS Sprites 的文章，由于已经有大量的文章写它的原理，我只是敷衍两句罢了。
CSS Sprites 这东西不知道能不能算上是个技术，我觉得充其量也就是个 CSS 技巧。但是当你网站上小图标数量特别多（例子）的时候，这个小技巧却有大用处。CSS Sprites 通过使用一张图片代替所有的小图标以节约 HTTP 连接开销以提高加载速度，再为不同的元素指定不同的 background-position 属性值将小图标分别显示在正确的位置上。更好玩的应用当属刚刚改版的谷歌首页了，下面那活灵活现的动画可不是 GIF 图片，不信你看看背景图，真的只有一张，还不会动：
阅读全文 - 555 字

今天有朋友给我留言说我昨天新改的这个主题侧边栏有错位，不用说，他们使用的浏览器内核一定是 IE6。自从微软开放 IE7 完全免费升级以来，我就让 IE6 彻底下岗了（虽然我使用 Firefox 的时间占到了 99% 以上），没想到这却给测试网页带来了麻烦，毕竟 IE7 比 IE6 对 W3C 标准的支持要好得多，所以在 Firefox 和 IE7 下浏览没有问题的页面，在 IE6 下就会出现一些这样那样的问题——通常是由于 IE6 对宽度、高度、边界等定义不标准引起的——我们又不能简单粗暴地放弃数量众多的 IE6 用户。
过多的抱怨不是解决问题的途径，我们必须想办法叫页面在符合标准的情况下适应 IE6。废话说多了，赶紧切入正题，安装 IE7 后如何再使用 IE6？Google 了一下我找到两种方法：一、安装微软提供的安装有 IE6 的 XP 虚拟机镜像，在这个页面下载 VPC 镜像文件，需要注意的是现在下载的镜像将在 2008 年 4 月 1 日过期，到时你必须得下载一份新的镜像才能继续使用。二、下载一个名叫 IE6Eolas 的绿色版 IE6，随便解压到哪里都可以直接使用，虽然在“关于”中看到的仍是 IE7 的版本信息，但这个东东的确是 IE6，我用 acid2 测试过，典型的一塌糊涂，错不了，呵呵。
阅读全文 - 688 字

我最早是在 Realazy 看到 CSS Sprites 的介绍（如果你不知道什么是 CSS Sprites，那么一定要读读这篇文章），紧接着 Zhang-Zi 在自己的阅微堂上应用了这一技术；此时此地，我也把它实现了，（基本上）这里的全部背景图片（虽然也只有几张）都用一张图片包办了，blog 加载的速度显然比之前快了一些。
------ 单薄的分割线 ------
刚才去阅微堂找链接的时候，发现了这篇文章：《加速 blog：序》，对此系列文章充满期待。

我写完 CSS 喜欢用 CSS Tidy（Clean CSS 基于 CSS Tidy 1.1）整理一下，压缩一下体积再上传至服务器（节省加载时间），一直没啥问题。不知咋地今天突然出状况了，修改过的 CSS 再压缩一下之后页面布局变得乱七八糟，左边的 #content 本来是 float:left，可呈现出来偏偏是 float:right 的样式，思来想去我只是改了改正文以外的字体，别的什么都没改，用插件强制清了 WP 的缓存也不行，那问题只能出在 CSS Tidy 身上了，估计是哪个清理选项把代码给改掉了，害我又重新写了一遍 CSS，今后使用 CSS Tidy 之前一定要做个备份。

其实这样的标题不太准确，因为压缩 JavaScript 的不是 PHP，而是 gzip。另外这种方法应用也相当广泛了，WordPress 上著名的 K2 主题一直是这样压缩 JavaScript 的。
第一步
打开需要压缩的 JavaScript 文件，把下面的代码加在 JavaScript 代码前面：
阅读全文 - 211 字

昨天跟我们伟大的 IE 浏览器斗了整整一天，在 Firefox 下好好的东西到 IE 里就变得支离破碎，让我抓狂到几次想亲手毁了它。不过刚才无意中居然给弄好了，发现跟 IE 沟通还是得有相当高的技巧，毕竟人家是微软的东西，高贵！

在之前的（续）中，我借助插件为外部链接加上了 rel="external" 这个标签，然后再通过 jQuery 为其添加 class="external"，忘了当初为什么要这样做了（我确定是有理由的），事后发现在每篇日志的留言部分，rel="external" 会与 WP 自动为链接加上的 rel="nofollow" 标签发生冲突，因为同一元素不允许同时存在两个 rel 标签。
想了几种办法：插件处理 DOM 不太现实、用正则表达式判断是否有 rel="nofollow"，如有，将其改为 rel="nofollow external" 过于复杂会影响效率、修改 WP 默认添加 rel="nofollow" 的方式等等，都不合适。
阅读全文 - 394 字

看到有朋友需要修改之后的 Alexa 转向插件，由于修改简单并且此功能并不属于原插件，所以我没有另发新版，需要修改的朋友请看下面的方法：（基于 Arctic's Internal Alexa Redirect 1.1 版）
我们只需要修改 wp_lzw_parse_external_links 函数的一行代码，直接复制下面的函数将插件的相应部分替换掉就可以了：

阅读全文 - 1020 字

XHTML 1.0 Strict 以上（含）的 W3C 标准已经不再支持 target='_blank' 这一非常好用的属性，这一改变很叫完美主义的网页设计者头疼。许久之前，我写过一篇文章介绍使用 jQuery 打开新窗口的方法，但没有亲自体验过；现在，我已经在这里实现了，将所有的外部链接加上了图标，并默认以“新窗口/标签”方式打开，原理相同，方法有一点改进。(via Barry Jaspan)
先前的方法需要手工为每一个你想让它以新窗口方式打开的链接（如：外部链接）添加名为 "new-window" 的 class，不用说也想得到，这项工程是多么浩大，简直可以跟秦始皇年间修长城的工程量媲美，并且一定会出现相当数量的漏网之鱼——总之，这个方法不可取。
阅读全文 - 768 字

自 Design Watercolor Effect Menu 后，今天 Nick 又发表了进阶的菜单制作教程：Advanced CSS Menu，按照教程制作出来的菜单果然相当精美，很有 Nick 独特的风格（Demo）。感兴趣的朋友请自行前往学习，我就不翻译了……
PS: Web Designer Wall 的 PageRank 在此次更新中直接由 0 到 7。OTZ...

虽然标题这样写，但实际上使用 JavaScript + DOM/CSS 组合可以实现很多强大的功能。昨天看到 fisio 提到这种鼠标悬停时展开的菜单，我原来也没有用过，经他一提醒觉得还是挺有用处的，尤其在有很多内容的页面上。
废话最后再说，直接给出代码先：
JavaScript
阅读全文 - 610 字

由于更换了新的主题，页面正文的宽度从 540px 缩到了 520px，导致原先一些日志中宽度大于 520px 的图片会把页面撑破，侧边栏掉到正文底下去，页面布局乱得不堪入目。因此，需要让这些超过限制宽度的图片自动缩小以适应当前页面，我摸索了一些方法，写出来抛抛砖。
Firefox 的解决办法
只需要修改 CSS 样式表的一行代码，给正文中的 img 加上 max-width 属性：
阅读全文 - 798 字