采用 Webkit 核心的浏览器主要有苹果的 Safari 和 Google 的 Chrome，Webkit 核心有着良好的性能，并且在某些细节对用户非常友好，页面输入框（input 标签）聚焦高亮和文本框（textarea 标签）缩放功能就是其中的两个对用户非常友好的设计。可是这两个设计在对用户友好的同时，却会对页面设计产生影响。

CSS 屏蔽 Webkit 输入框高亮

下面是默认情况下，Webkit 浏览器里输入框获取焦点时的情况。

我们可以发现 Webkit 对输入框的高亮已经使页面呈现出的样式和设计样式不同了。如果你的网站已经对输入框获取焦点时定义了特殊的样式，不妨把 Webkit 这个多此一举的功能屏蔽掉。加上下面的 CSS 就可以轻松地把高亮去掉。

WordPress 3.0 增加了一个强大的自定义菜单功能，但美中不足是要实现题图这样包含描述的菜单时，单靠目前 WordPress 的功能还无法实现。本文将教你改变 WordPress 默认的菜单输出，打造更加个性的菜单。

也许你已经知道，当后台出现 Appearance > Menus 这个菜单项的时候，就标明你使用的主题支持 WordPress 3.0 自定义菜单。只需要用 wp_nav_menu() 函数进行调用即可。但问题是 WordPress 输出的菜单 HTML 结构如下：

jQuery 的选择器借鉴了大量 CSS1 ~ CSS3 标准的特点，并且整理成一个强大的对象选择工具集。但要注意的是如果你的对象名里包含 “#;&,.+*~’:”!^$[]()=>|/” 这些元字符时，你必须用 “\\” 进行转义。例如你要选择文档里包含 “name=”names[]“” 的 input 元素时，在编写过滤规则时你必须先对 “[]” 进行转义，所以我们应该这样定义选择器：“$(“input[name=names\\[\\]]”)”。

Android 作为一个优秀的手机操作系统，有着大量的软件开发者为其开发各种软件。由于目前 Android 手机用户多数为 Geek ，他们追求极致的性能，因此优秀的系统管理软件成为了必需品。今天介绍的是一款强大的 Android 系统管理软件：Toggle Settings。

一个顶好几个

Toggle Settings 通过同时修改多项系统设置，并保存为一个配置，使用户能迅速把手机调整到一个最适合你所处场合的状态，例如 Android 系统缺少的情景模式，通过 Toggle Settings 的环境配置可以一键切换到会议模式、户外模式等等。除了系统本来预设的集中情景外，用户还可以自己添加情景。

另外 Toggle Settings 还带有一个进程管理器，并且支持自动结束任务功能，进程杀手等等可以靠边站了！

Toggle Settings 有一个类似 Google Calendar 的实用功能，可以实现日程提醒，不习惯 Google Calendar 的人可以试试。

很多人习惯在 Android 安装一些桌面开关，用来随时打开或关闭蓝牙、Wifi等等，但这种桌面开关却是本来已经不大的桌面更加拥挤了。Toggle Settings 完全可以实现这些一键开关的功能，而且他能隐藏到通知栏里，要使用的时候只需要拉下通知栏并且点击 Toggle Settings 进程就能启动了。可以说是功能强大，使用方便，但一点都不会弄脏我们的桌面。

为了管理和统计的方便，很多人会使用 FeedBurner 来烧录博客的 Feed ，今天介绍一款插件，可以在 WordPress 的后台查看自己的 FeedBurner 统计数据。

打开“Awareness API”

首先要做的是在 FeedBurner 里打开 Feed 的 Awareness API，否则任何人都无法通过其他途径获取你的 Feed 统计数据。在 FeedBurener 的 My Feeds 页面选择博客的 Feed ，在 Publicize 选项卡里打开 Awareness API 选项，点击 Activate 即可打开 Awareness API 功能，非常简单。

如果我们希望把一个网站的更新实时发布到令一个网站上，最好的方法是通过 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 的更新自动更新。

WordPress 3.0 为了增强 CMS 功能，加入了自定义菜单的功能，除了定义菜单项目外，还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。

在 WordPress 3.0 的 Appearance（外观）-> Menus（菜单）面板里我们可以看到自定义菜单的设置，首先点击“Creat Menu”，再在左栏勾选需要的菜单项目后点击“Add to Menu”可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。

在文章内插入的广告具有相当高的点击率。在 WordPress 里，我发现很多人利用 JavaScript 把广告插入到 more 截断标签处，作为内文广告。昨晚我也在内文里放了 Google Adsense，但我是用 WordPress 自带的 add_filter 函数实现的。

打开主题的 function.php ，插入下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/**
 * The filter to insert the ads
 */
function bl_insert_ad_code_filter( $content ) {
	global $id;
 
	// 只在文章页面显示
	if ( !is_single() ) {
		return $content;
	}
 
	// 首先插入广告代码
	$html = '<div class="single_ads">你的广告代码</div>';
 
		// more 标签在 WordPress 2.3 前是一个 a 标签，2.3 后是一个 span 标签
		// 保证兼容性
		return preg_replace("#\《(a|span) id＼=\"more-$id\"\》\《/\\1\》#", $html."$0", $content, 1);
		//因为 wp-syntax 插件的问题，请把上一句代码中的书名号替换成“< ”和“>”，“＼”换成“\”
 
	return $content;
}
 
add_filter('the_content', 'bl_insert_ad_code_filter', 50);

利用这个 filter 我们还可以在文章任意的地方插入广告，或者添加其他的应用，大家可以尽情发挥创意。

有时我们需要令一个宽度固定的容器里的子框架居中（例如一个 Div ，或者其他 block 级元素），如果子框架只有一个的话，我们只需要为子框架加上 CSS 属性 margin: auto 就可以了。

但如果我们要让多个子框架居中，并且等分父框架剩余的空间的话，我们对所有子框架使用 CSS box-align: center 来实现这种效果。

可是目前还有相当一部分主流浏览器不支持 box-align 属性，那么我们应该如何编写 CSS，使这种效果能兼容大部分的浏览器呢？

通常的方法

为了使多个 block 级元素排列在同一行里，我们习惯使用 float 属性使子框架浮动，然后利用 margin 属性让每一个子框架之间都留出一些空白的间距。可是这样做会触发经典的 IE6 双倍 margin BUG，这样反而要投入额外的时间去调试 IE6 的 Hack。

虽然我们还可以通过 display: inline 来避开 IE6 的 BUG，但我们仍然需要调整这些子框架间的间距，防止最后一个自框架被挤到下一行。

继上一篇《CSS3 灵活的盒子模型(Flexible Box Module) – 1》后继续深入，说说 CSS3 里盒子模型的尺寸。本文的 HTML 框架继续沿用《CSS3 灵活的盒子模型(Flexible Box Module) – 1》。

在 CSS2 里，要把一个容器分成三栏的话比较简便的方法是把三个字容器的 width 都设为 33.3%，这种方法无法把父容器的宽度完全填充，在父容器的宽度足够大的时候留下的空白会是页面变得很不美观。令一种方法是通过计算把子容器的 width 都设为一个固定值，这种方法比较繁琐，而且在一些情况下无法使子容器的宽度完全相等（例如父容器的宽度为 100px）。当我们迈入 CSS3 时代后，这种问题将迎刃而解。

box-flex 属性

box-flex 应用在需要分栏的子容器上，它的值必须是一个自然数或小数。当父容器里有多个带有 box-flex 属性的子容器时，浏览器将会把这些子容器的 box-flex 的值相加，然后根据它们各自的值占总值的比例，再在父容器剩余的空间里分配它们的尺寸（说的啰嗦，其实一看 DEMO 就懂）。也就是说，我们需要注意 box-flex 属性必须在父框架具有具体的 width 或者 height 的时候才能正常渲染。