Bolo的博客 » Develop

WordPress 3.2 将着重提高效率和程序轻量化

bolo — Sat, 19 Mar 2011 19:41:31 +0000

据可靠消息说 WordPress 核心开发人员已经着手 WordPress 3.2 的开发，以保证 3.2 版不会像 3.1 版一样，在正式版发布前让广大用户等得脖子都长了。虽然 WordPress 3.1 的某些更新的确让我们感觉耳目一新，但这等待的时间也有点太 TM 长了吧？

WordPress 3.2 将注重于程序效率和代码轻量化的改进。目前所知的重要更新主要有下面这几点：

将放弃对过时技术的支持。包括服务器 PHP 版本必须为 5.2 以上，MySQL 版本必须为 5 以上，并且在后台界面逐渐放弃对 IE6 的兼容（好事！）。
改进 List table API，增加灵活性，方便二次开发。
List Table XHR loading，暂时不知道具体是什么货，估计是优化用户体验。
改进博客写作体验，依照个人估计， WordPress 官方不会一下子放弃 TinyMCE 界面，但是据说以后会慢慢向 http://www.quietwrite.com/ 看齐。
改进升级程序。据说以后在升级 WordPress 的时候，如果你对程序文件进行了改动的话，这些文件将不会被覆盖，仅更新没有修改过的文件。不过说句实话，改程序文件是非常不安全的，如果你找我进行 WordPress 二次开发的话，我可以保证不修改 WordPress 源文件。
程序速度优化，WordPress 可能会引入某种缓存机制来提高 WordPress 的运行速度。插一句，我至今不明白为什么 WordPress 一直在 config 里留着 Cache 的选项，但缓存程序却至今未在源码中出现。

利用 Yahoo Pipes 和 jQuery 做一个 RSS 挂件

bolo — Tue, 01 Jun 2010 16:54:00 +0000

如果我们希望把一个网站的更新实时发布到令一个网站上，最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话，使用 JavaScript 是最可行的方法。但是通过 JavaScript 解析一个 XML 文档十分麻烦。幸好 Yahoo Pipes 为我们提供了非常好的 RSS to JSON 功能，我们可以先把 RSS 转换成 JSON 再用 JavaScript 进行解析，这样比直接解析 XML 简单得多！

把 RSS 转换成 JSON

首先登录 http://pipes.yahoo.com ，新建一个 Pipe ( Creat a Pipe ) 。然后在左边的工具里选择 Sources > Fetch Feed ，在输入框里输入一个 RSS 地址。再用线把 Fetch Feed 和 Pipe Output 两个框框连起来（如右图），保存这个 Pipe，然后点击顶部的 Run Pipe… 。点击 Publish 发布这个 Pipe ，然后记下 Get as JSON 的 URL。简单几步就已经把一个 RSS 转换成 JSON 了，而且这个 JSON 会根据 RSS 的更新自动更新。

通过 jQuery 解析 JSON

jQuery 本身为我们提供了一个 getJSON() 函数，为我们解析 JSON 提供简单快捷的方法。

由于我希望做一个 AJAX 载入项目的效果，我先做一个 HTML 框架，然后通过 jQuery 的 append 方法把解析出来的内容添加到指定的容器里。HTML框架如下：

Loading RSS items...

然后编写 jQuery 调用：


<script type="text/javascript">
$('#rssdata').ready(function() {
	// JSON 地址 = 刚才记下的 URL + &_callback=?
	var pipe_url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=90caf3b6ba8f36459a3137248b47620e&_render=json&_callback=?';
 
	$.getJSON(pipe_url,function(data) {
		// 遍历 JSON 项目，并且确定输出哪些信息
		$(data.value.items).each(function(index,item) {
			var item_html = '+item.link+'">'+item.title+'
';
			// 把输出的内容插入页面里
			$('#rssdata ul.rss-items').append(item_html);
			});
		// 添加条目载入效果
		$('#rssdata div.loading').fadeOut();
		$('#rssdata ul.rss-items').slideDown();
	});
});
script>

当然要页面美观的话，写一些 CSS 是必要的，这个可以随自己的喜好而定。最终的效果可以看这个 DEMO。

网页圆角的取舍

bolo — Tue, 20 Apr 2010 13:52:51 +0000

在网页里使用圆角效果是使网页更加美观的一个简单而有效的方法，可是由于 IE 和一些老式浏览器的存在，如何使页面在各个浏览器里的效果一致一直困扰这网页设计人员。最近我在制作主题时面对一个艰难的抉择，因为我要在主题里使用大量的圆角，我应该如何去协调圆角在不同浏览器里的效果？下面我将列举一些产生圆角的方法，并阐述一下它们的优点和缺点，各位观众在以后遇到这种问题的时候可以根据自己的时间或者技术需要进行取舍。

CSS 圆角

关于 CSS 圆角在《再谈 CSS 圆角》一文里已经有详细的阐述。但纯 CSS 的圆角一些老式浏览器根本不支持。使用框架叠加的话不但会使页面结构变得非常复杂，而且大量的多余框架也会给一些后期开发带来困难。而使用圆角的图片作为背景则很难在一些灵活多变的页面里进行应用。因此 CSS 圆角目前只能在一些框架（主要是宽度）比较固定的页面里，通过图片的方式来实现。

JavaScript 圆角

有高手为了使像 IE 这样落后的浏览器也能显示非图片和框架叠加产生的圆角开发了一些产生圆角的 JavaScript 库，例如 CurvyCorners 是目前我测试过的最强大的一个 JavaScript 圆角效果库，不依赖任何框架。并且通过特定的 CSS Class 就能使 IE 也能产生圆角效果。

通过 JavaScript 框架实现的圆角插件更多，这里不一一介绍。但通过 JavaScript 虽然能解决大部分浏览器的圆角支持问题，但却可能会引起本来正确的一些框架错位，虽然这种错位也能通过 CSS Hack 来修正，但一旦浏览器禁用了 JavaScript 又会产生新的错位。因此 JavaScript 圆角应用并不广泛。

如何取舍

在框架固定的页面里，可以用 CSS + 图片的方法实现圆角效果，使 IE 也能显示圆角。但在一些多变的页面里，就只让现代的浏览器能看到圆角吧，老式浏览器被淘汰只是时间问题！

BTW

我的新主题正在测试中，如发现问题麻烦大家向我反馈一下。另外推荐使用非 IE 核心的最新版浏览器进行浏览。

跨浏览器 CSS 阴影

bolo — Sun, 28 Mar 2010 11:51:38 +0000

阴影是最常用的 CSS 效果之一，CSS3 标准已经增加了阴影属性，下面讨论一下阴影在各种浏览器里的实现方法。

CSS3 阴影

CSS3 里使用 box-shadow 属性定义块的阴影，基本语法如下：

1	box-shadow: 3px 3px 4px #000;

上面的样式里，前面两个 “3px” 表示阴影在 xy 两个坐标轴上的偏移量，x轴的正方向向右，y轴正方向向下。这个坐标和我们平时用的有点出入。在 Firefox 和 Webkit 等浏览器里，为了达到最高效率，建议通过私有的 hack 实现 CSS 阴影，可以这样写：

1 2	-moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000;

CSS 阴影在 IE 浏览器里的实现

在 IE 里，我们只能通过滤镜才能实现纯 CSS 的阴影。要实现和上面的样式一样的效果，可以这样写：

/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

在 IE 的 shadow 滤镜里， Strength 表示阴影的浓度， Direction 表示阴影的角度，为了方便理解，我们可以理解为光线从极坐标 135° 的方向照下来，产生阴影。

整合代码

整合同一个效果的 hack 时，我们遵循按兼容性从强到差的顺序进行整合，也就是标准代码写在最前。

box-shadow: 3px 3px 4px #000;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

PHP 获取远程图片

bolo — Wed, 24 Mar 2010 05:54:34 +0000

因为大多数虚拟主机都有流量限制（特别是博客主机），因此很多人都选择把图片储存到 Flickr 和 Picasa 等免费相册里，再通过外链插入到文章里。但由于这些网站经常被 block ，因此我建议大家还是尽量把图片放到自己的服务器上。

由于我个人很懒，万一博客搬家的话，过多的文章附件将会给文件的迁移带来麻烦。因此我以 cosbeta 的 Pika 插件为蓝本写了一个远程图片代理程序，并对较多博客使用的 Picasa 、 Flickr 和 PhotoBucket 这三个图床服务进行了防止链接被重置的处理。请点这里下载脚本。

使用方法

其实这个脚本和 pika 原理一样，但由于我做了较多的修改，使用方法会有所差别。在使用之前，请确定你拥有符合要求的服务器服务器。

一个流量较大的国外php主机
服务器支持curl函数

如果能满足以上要求，那么你就可以使用这个脚本了。

首先把脚本上传到国外主机一个子域名的根目录下，并把脚本里的 $allow_referer 添加允许调用图片的域名，必须包含此脚本所在的域名和你博客所在的域名，否则图片就无法在你博客显示。

如果你要调用的图片是 Picasa 、 Flickr 和 PhotoBucket 以外的图床，则使用以下的代码（yourdomain是脚本所在的域名）：

如果你调用的是 Picasa 的图片，则使用以下的代码（ image_url 是 “ggpht.com/” 后面的部分，lh* 是图片外链地址的第一节，也就是服务器编号）：

调用 Flickr 和 PhotoBucket 的图片也差不多，把 host 参数改为 farm* （Flickr）和 i**** （PhotoBucket）就可以。之所以把这几个图床的调用方法弄得这么麻烦，是因为这几个图床被block的风险比较大，只要调用这几个网站的图片时链接里不出现这几个网站域名，图片链接就不会被重置，从而当这几个网站被block的时候访客也能看到图片。

图片通过此脚本调用一次后会缓存到服务器里，第二次的调用则直接调用缓存。

PS

我正在把这个脚本做成一个完整的 WordPress 插件，如果你发现这个脚本有不足的地方，请告诉我。

CSS3 transform 旋转在IE里的实现

bolo — Sun, 21 Mar 2010 13:19:18 +0000

transform rotate 是CSS3里使对象旋转的一个属性，虽然目前所谓的兼容CSS3的浏览器对它的支持还不算好，但Firefox、Webkit和Opera这些浏览器都已经提供了官方的hack去支持这个属性。唯独在IE里，这个属性无法通过一般的CSS去实现。

在W3C官方的标准里，通过transform属性使对象旋转的写法如下：

1	transform: rotate(40deg); /* 其中40是旋转的角度 */

可是由于目前几乎所有的浏览器对这个属性的渲染效率都很低，所以我们可以用下面的hack去提高渲染效率：

1
2
3

-o-transform: rotate(40deg); /* Opera */
-webkit-transform: rotate(40deg); /* Webkit */
-moz-transform: rotate(40deg); /* Firefox */

由于目前所有版本的IE都不兼容CSS3，所以我们只能通过IE的CSS滤镜来实现，写法如下：

1	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";

这个一个相当复杂的滤镜，详细的参数大家可以看看这个网页。

关于这篇文章的演示，大家可以看这个 DEMO： css-Transforms。

PS:

大家可以下载本文提供的DEMO，然后把代码里 transform 属性放在三个浏览器的 hack 后面，刷新一下页面看看会有什么现象。我在 Firefox 里看到的是中间那个旋转的 DIV 会跳动一下。

Tip:

transform 是一个相当复杂的属性，目前可以实现旋转和动画效果，我认为这个属性在 CSS3 标准完全确定下来以后会变得更加强大。

CSS3 target 和 focus 伪类

bolo — Thu, 18 Mar 2010 14:36:35 +0000

CSS3里的 target 和 focus 伪类都是针对特定元素的选择器，可以用来突出元素的位置。

target 伪类

target 伪类用于改变锚链接URL所指向的ID的样式。例如你要让页面页面里任何通过锚链接访问的元素字体都变成红色，可以这样写 *:target { color : red }。

需要注意的是，在添加 target 样式之前你必须为该元素指定一个id。效果请看我的 DEMO。

focus 伪类

focus 伪类用于改变 input 和 textarea 等标签在获得焦点时的样式。当展示在用户面前的是一个项目繁多的表单时，使用 focus 伪类能使更易找到焦点。效果可以看这个DEMO。

CSS3 nth-child 伪类用法

bolo — Sat, 13 Mar 2010 06:33:52 +0000

CSS3提供了强大的伪类（pseudo-class）选择器，使开发者能选择某一对象中符合特定条件的元素进行渲染。这些伪类在刚接触的时候大家会觉得非常混乱，但当掌握了以后能大大提高你的代码效率，并且节省代码量。今天先要说的是nth-child伪类。

nth-child伪类的定义

nth-child伪类在W3C里定义是选择选择父元素里的第n个子元素，可以使用an+b的形式选择子元素，举例用法如下：

tr:nth-child(2n+1) /* 选择表格里的单数行 */
tr:nth-child(odd)  /* 同上 */
tr:nth-child(2n)   /* 选择表格里的双数行 */
tr:nth-child(even) /* 同上 */

聪明的看官大概已经知道nth-child伪类可以用来干什么了。

CSS3 nth-child 伪类应用实例 — 隔行变色列表

既然nth-child伪类能让我们轻松第选择容器里的某一个子元素，我们是不是可以用它来干点什么呢？需求最大的当然是隔行变色的表格或者列表。我们这就去做一个隔行变色的列表看看。

首先确定列表的HTML结构，我使用了做简单的ul > li结构，代码如下


	 项目一 
	 项目二 
	 项目三 
	 项目四 
	 项目五 
	 项目六 
	 项目七

列表的结构确定后，我们要做的是使ul里的七个li项根据单双项的规则进行隔行变色的处理。因此我们用nth-child(2n+1)或者nth-child(2n)进行选择都可以。我的CSS代码如下：

ul li {
	background: #9FF none repeat scroll 0 0;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	padding: 10px;
	color: #000;
}
ul li:nth-child(2n+1) {
	background: #6F9 none repeat scroll 0 0;
}

在这里我选择了对列表的单数项进行特殊渲染，下面是我做出来的效果，大家也可以看这个DEMO。

nth-child伪类的衍生

除了nth-child以外，W3C还为我们提供了几个基于nth-child定义的衍生伪类，这里简单地说说他们的用途。

E:nth-last-child(n): 选择某个子元素，从最后一个数起
E:nth-of-type(n): 选择某个某种类型的子元素
E:nth-last-of-type(n): 选择某个某种类型的子元素，从最后一个符合条件的元素数起
E:first-child: 选择第一个子元素（这个伪类在CSS2里就有）
E:last-child: 选择最后一个子元素

nth-child伪类的家族里，除了E:first-child外，其他的伪类都只能在支持CSS3的浏览器里起作用，也就是说在目前的IE里是看不到效果的。

CSS下拉菜单框架

bolo — Wed, 10 Mar 2010 05:59:57 +0000

CSS Drop-Down Menu Framework是一个基于GNU General Public License开源的纯CSS下拉菜单框架，能在IE5+、Firefox1.5+、Safari2+、Chrome1+和Opera7+这些浏览器上运行，但在IE6和IE6之前的浏览器里是通过JavaScript辅助的。你可以修改它，以应用在你的网站。CSS Drop-Down Menu Framework完全符合XHTML1.1和CSS2标准，使用这个框架，创建一个与众不同的下拉菜单只需要十几分钟。目前有Flickr、nVidia和Adobe等大型网站的下拉菜单都使用了这个框架。

CSS下拉菜单的优越性

纯CSS下拉菜单虽然通用性不如JavaScript实现的下拉菜单，但它是未来WEB应用的发展趋势，因为除IE6外其它的主流浏览器都已经支持，而IE6已经走向了灭亡的道路。CSS下拉菜单的优越性在于即使浏览器禁用了JavaScript还可以正常运行，并且当页面带有大量的JavaScript脚本时不会产生冲突。另外学会制作CSS动态效果也能令是的HTML书写更规范。

CSS3 RGBA 属性高级用法

bolo — Sat, 06 Mar 2010 06:54:39 +0000

貌似最近网上对CSS3的讨论真的很火，现在讲一下CSS3里目前用的比较广的RGBA属性的高级使用方法。这个属性的兼容问题比较简单，IE8已经支持这个属性，IE6和IE7也可以通过hack支持。RGBA和CSS2里的RBG属性差不多，只是RGBA属性多了一个透明度的定义，CSS3标准里对RGBA属性的解释如下：

/* 基本语法 */
em { color: Rgba(red,green,blue,opacity) }
/* 举例 */
em { color: rgba(255,0,0,1) }    /* 红色，不透明 */
em { color: rgba(100%,0%,0%,1) } /* 同上 */

在现实中，使用三个1~255的十进制数值去定义一个颜色比用百分比更加准确，下面是几个颜色的RGB数值，大家在使用的时候只需要把00~FF的16进制数值换算成十进制就行了。

如何使用RGBA属性

RGBA的强大之处在于，通过对透明度的定义和不同层的颜色混合可以呈现出更多的颜色，就像颜料的混合一样。举一个例子，我们先为页面设置一个背景图片，接着为页面里的H1里的内容设置一个颜色，例如：

h1 {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
}

效果如下：

这里可以看到H1并没有透明效果

但如果我没对H1设置一个整体的透明度（opacity属性）的话，效果会变成怎样呢？

h1 {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	opacity: 0.5;
}

在这里我们看到的效果是整个H1包括文字都呈现50%的透明度。可是文字透明是影响阅读的，我们用RGBA属性单独设置H1的背景色试试。

h1 {
	color: rgb(0, 0, 0);
	background-color: rgba(255, 255, 255, 0.5);
}

这是我们可以看到H1的背景成50%透明的白色，但里面的文字还是不透明的黑色。当然，你也可以只让H1里的文字透明。

h1 {
	color: rgba(0, 0, 0, 0.5);
	background-color: rgb(255, 255, 255);
}

只让文字透明，可以用来创建剪纸效果。

改变你的CSS编写习惯

在以上的例子中你可以看到作者一直在使用rgb()去指定颜色，而不使用传统的#xxx形式的十六进制表示方法。这是一个为CSS3的RGBA属性准备的写法，用rgb()指定颜色可以理解为rgba()不透明，但两者的差别非常小，这会对将来升级到rgba()带来很大的方便。

兼容所有浏览器

虽然目前主流浏览器的最新版本都已经支持RGBA属性，但我们还必须照顾使用旧版浏览器的用户，因此在某些地方我们用老方法会保险一些。方法也有好几种，大家按需选择。

1.低版本不使用RGBA属性

虽然这会影响在低版本浏览器里的效果，但这是最简单的方法，也是最保险的方法，具体操作如下：

h1 {
	color: rgb(127, 127, 127);
	color: rgba(0, 0, 0, 0.5);
}

先设置rgb颜色在设置rgba颜色，这样不支持rgba属性的浏览器只会显示rgb颜色，而支持rgba的浏览器因为重定义的作用会显示rgba颜色。

2.使用透明的PNG图片做背景

PNG格式的优点在于图片里的透明特性可以在网页里呈现出来，这里就用到了这个特点。

h1 {
	background: transparent url(black50.png);
	background: rgba(0, 0, 0, 0.5) none;
}

通过透明度为50%的PNG背景达到了和rgba一样的效果。

3.IE hack

对IE6和IE7可以用IE的私用属性来解决，可达到部分和rgba一样的效果。

1
2
3

h1 {
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#80000000', EndColorStr='#80000000');
}

我们需要留意的是StartColorStr和EndColorStr的值，前两位是十六进制的透明度，后面六位是十六进制的颜色。

后记

本文译自《Working With RGBA Colour》，本人做了修改，主要是觉得原文的排版表达有的不是很好，并且增加了IE的hack。