Bolo的博客 » WEB

WordPress 3.1 将带来什么？

bolo — Mon, 18 Oct 2010 13:14:08 +0000

世界上最流行的博客程序 WordPress 从 3.0 版开始向 CMS 转型，短短四个月之后，WordPress 将发布 3.1 版本，相对于 3.0 ，3.1 版进行了多项重大更新。下面是目前泄露出来一些更新，虽然未必会在 3.1 版里全部出现，但也将是 WordPress 发展的趋势。

内链系统

作为最受专业博主期待的功能之一，新版的 WordPress 会在文章编辑界面添加一个搜索框，用来搜索已有的文章，并快速地把链接插入到新文章中。大家都知道增加内链对 SEO 非常重要。

管理员快捷工具条

WordPress 后台打开速度慢的问题一直以来已经饱受诟病，3.1 版将改善这个问题。如果你是管理员用户的话，在访问博客前台的时候页面顶部将出现一个管理员工具条，你可以快速访问后台控制板的任何页面。根据 WordPress 老大 Matt Mullenweg 的介绍，“这将是 WordPress 迈向前端编辑的第一步”。不过我现在担心的是，这个变化会不会带来管理员访问前台缓慢的新问题呢？

异步加载（AJAX）管理界面

WordPress 改善管理体验的第二击，具体会变成怎样目前还不得而知，但我们可以拭目而待。

独立的网络控制面板

目前 WordPress 的多站点管理还非常麻烦。WordPress 将着手把多站点管理面板从控制台中独立出来，是子站点将拥有一个独立的控制台。由于这项工作非常复杂和费事，有可能推迟到 WordPress 3.2 才推出。

改进主题管理的 UI

WordPress 继续改进管理体验。当你是一个多站点超级管理员的时候，你往往需要预先安装很多的主题供用户选用，改良的 UI 将令超级管理员能更加方便地安装和管理主题。

文章模板和文章样式

作为细化自定义文章类型的一项工作，你可以为不同内容的文章选择不同的模板和样式。假如你的博客既有展示图片的文章，又有以文本为主的文章的时候，采用不同的文章样式将使你的博客拥有更佳的阅读体验。

CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放

bolo — Thu, 22 Jul 2010 06:03:02 +0000

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

CSS 屏蔽 Webkit 输入框高亮

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

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

input {
	outline: none;
}
/* 屏蔽文本框高亮 */
textarea {
	outline: none;
}

CSS 屏蔽 Webkit 文本框缩放

Webkit 的文本框缩放功能原本是方便用户进行大量文本输入而设计的，但有时果度的缩放会造成下图的效果，打乱了页面的布局。如果你的网站已经为用户提供了足够大的空间让用户进行输入，那么你可以屏蔽这个功能，用 CSS 有两种方法。

CSS 2.1 的方法：

原理：限制文本框的最大宽度和最大高度，使其和设计的大小一样。

textarea {
	width: 400px;
	max-width: 400px;
	height: 400px;
	max-height: 400px;

CSS3 的方法：

通过 resize 属性禁止对元素进行缩放，因为 Chrome 对 CSS3 支持良好，因此推荐使用这个方法。

1
2
3

texearea {
	resize: none;
}

利用 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。

CSS 多个子框架居中

bolo — Sat, 15 May 2010 13:29:44 +0000

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

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

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

通常的方法

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

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

改变子框架级别并且控制剩余的空白

使用 float 和 margin 来让多个子框架居中并且等分父框架剩余空间的做法缺点很多。为了避开这些缺点，我们还可以使用另一种方法：把子框架的级别改为 inline-block ，并且通过 letter-spacing 属性 控制自框架之间的间距。

假设在一个父框架里有四个 block 级的子容器，每个子容器的大小均为 100px x 100px。为了让这些子框架能排列在同一行内，我们可以把它们改为 inline-block 级，由于子框架和父框架之间并没有其它的内容，应此要控制子框架的空间分配将易如反掌。姑且假设父框架 id=parent，子框架 class=child，那么 CSS 可以这样写：

#parent {
	width: 615px;
	border: solid 1px #aaa;
	text-align: center;
	font-size: 20px;
	letter-spacing: 35px;
	whitewhite-space: nowrap;
	line-height: 12px;
	overflow: hidden;
}
.child {
	width: 100px;
	height: 100px;
	border: solid 1px #ccc;
	display: inline-block;
	vertical-align: middle;
}

在这段样式里，#parent 的 text-align、letter-spacing、white-space、overflow 和 .child 的 vertical-align、display 这些属性是实现预想效果的关键，下面解释一下这些属性起了什么作用。

text-align：使 #parent 里的所有内容都居中
letter-spacing：控制每个子框架之间的空白大小
white-space: nowrap：防止最后一个子框架被挤到下一行
overflow: hidden：隐藏超出 #parent 范围的内容
vertical-align: middle：使所有子框架都垂直居中
display: inline-block：是所有子框架都排列在同一行，并且保持 block 级元素的特性

兼容 IE

在今时今日，老版本的 IE 浏览器已经成为网页设计师的心头大恨，虽然上面的 CSS 能兼容 IE8，但由于 IE6 和 IE7 并不完全支持 inline-block 级元素，因此我们还需要写下面的一段 Hack，确保在 IE6 和 IE7 里能保持和现代浏览器一致的效果。

.child {
	*display: inline;
	*margin: 0 20px 0 20px;
}

本文所举例子的最终效果可以看这个 DEMO。

后记

本文所举的例子虽然只有短短的两句 IE Hack，但在实际开发中大家要写的 Hack 肯定要多很多，因此淘汰老版本 IE 的任务已经刻不容缓。我听过很多人说：“我不用 IE 浏览器的，我用傲游和世界之窗”，在这里我提醒一下大家，对这些无法解释清楚的人，我们可以简单地和他们说：“凡是能用支付宝的浏览器都是落后的，请放弃使用。”。

CSS3 灵活的盒子模型(Flexible Box Module) – 1

bolo — Tue, 04 May 2010 08:03:26 +0000

CSS3 标准里引入了一些新的盒子模型参数，在 CSS2 的基础上，我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看这个文档。

通过学习和测试，我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中，我的所有例子都基于以下 HTML代码：


	1
	2
	3

容器的排列

在通常的情况下，页面上所有容器的顺序都按照载入的顺序排列。而使用 CSS3 提供的功能后，我们可以在不改变 HTML 结构的前提下随意改变容器显示的位置，这样不但给排版带来极大的方便，我们也可以利用这些功能进行流量整形。

在需用使用灵活盒子模型(Flexible Box Module)的时候，我们需要先把其父容器的 Display 属性设置为 box 或者 inline-box 。

水平分布和垂直分布

我们可以通过 box-orient 属性指定容器的分布轴，当这个属性的值为 vertical 时其子容器将垂直分布（也可以为 block-axis ），当值为 horizontal 时其子容器讲水平分布（也可以为 inline-axis ）。在本文的第一个例子里我使用了以下的 CSS ：

#exemple1 .content{
	-moz-box-orient : horizontal;
	-webkit-box-orient : horizontal;
	box-orient : horizontal;
}
 
#exemple1 .boite{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}

具体的效果可以看这个 DEMO ，三个子 Div 容器都横向并列了。

注：这个效果在 CSS2 里理论上也可以通过 Display: inline; 实现，但由于某些浏览器的 BUG ，没人会这样做。

反序排列

box-direction 属性可以让我们随意改变容器的显示顺序。我们知道，在默认的情况下，block 级元素是按照加载顺序从上到下排列， inline 级元素是从左到右排列的，但现在通过 box-direction 属性我们可以让最后加载的 block 级元素显示在最顶部，最后加载的 inline 级元素显示在左边。

但在使用这个属性的时候要注意它可能会改变元素的某些属性，产生一些不能控制的效果。

在第二个例子里，我使用了以下的 CSS ：

#exemple2 .content{
	-moz-box-orient : vertical;
	-moz-box-direction : reverse;
 
	-webkit-box-orient : vertical;
	-webkit-box-direction : reverse;
 
	box-orient : vertical;
	box-direction : reverse;
}
 
#exemple2 .boite{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}

效果大家可以看这个 DEMO。可以发现，在不改变 HTML 结构的情况下，容器的排列顺序改变了。

按指定顺序排列

我们不但可以让一组同级容器反序排列，而且还可以让它们按自己喜欢的顺序排列，box-ordinal-group 属性可以帮我们做到这一点。通过 box-ordinal-group 为各个容器指定一个序号，默认情况下他们将会按照序号递增的顺序排列。要注意的是：没有指定序号的容器默认都为 1 ，并且序号相同的元素将按照加载顺序排列。大家可以看一下下面的 CSS ：

#exemple3 .content{
	-moz-box-orient : vertical;
	-moz-box-direction : reverse;
 
	-webkit-box-orient : vertical;
	-webkit-box-direction : reverse;
 
	box-orient : vertical;
	box-direction : reverse;
}
 
#exemple3 .boite{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}
 
#exemple3 .v1{
	-moz-box-ordinal-group : 2;
	-webkit-box-ordinal-group : 2;
	box-ordinal-group : 2;
}
 
#exemple3 .v2{
	-moz-box-ordinal-group : 2;
	-webkit-box-ordinal-group : 2;
	box-ordinal-group : 2;
}
 
#exemple3 .v3{
	-moz-box-ordinal-group : 1;
	-webkit-box-ordinal-group : 1;
	box-ordinal-group : 1;
}

在上面的 CSS 里，我把第一和第二个容器的序号都定为 2 ，第三个容器序号为 1 ，因此最终效果应该是 v3 排在第一，v1 和 v2 则根据加载顺序，v1 排在 v2 前面。效果可以看这个 DEMO。

后记

CSS3 真的非常强大，我相信在它普及以后，我们做网页的时候将可以减少大量的 JavaScript 。关于 CSS3 盒子模型的介绍还没完，这篇文章只介绍了一下容器的排序，下一次将说说容器的尺寸。欢迎订阅本博客，以即时获知最新的更新。

网页圆角的取舍

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 核心的最新版浏览器进行浏览。

IE测试工具：Web 3 SuperPreview

bolo — Thu, 25 Feb 2010 05:31:55 +0000

Microsoft Expression Web 3 SuperPreview是微软公司为WEB开发人员推出的一个用来测试网站效果的软件，免费版可以用来测试IE6+的页面效果，并且可试用60天。这对一般的网页设计人员来说已经足够了。特别在升级到Win7以后，老牌测试工具IETester经常报错，令人非常郁闷。微软自家的Web 3 SuperPreview就不会犯这种低级错误了，而且它的功能比IETester强大多了。我以我的日记博客（http://shouy.in）为测试对象演示一下几个好用的功能。

精确的元素尺寸和坐标

和一般测试工具不同，Web 3 SuperPreview会把整个页面按HTML标记分成一块一块的，点击以后会显示该元素的大小和在屏幕上的坐标。一像素的误差都可以通过数字直接比较出来，这个精度是目测难以达到的。从这张图片可以看出，文章标题的高度有3px的误差，看来我要修改一下文章标题的样式了。

标尺功能

在同一个页面里比较box之间的相对位置，Bolo的常用方法是随便打开一个新窗口，用这个新窗口去量。可是这个土办法的缺点是非常明显的，想精确地比较出差别也比较难，Web 3 SuperPreview带有非常好用的标尺功能，而且可以实现跨浏览器的直接对比。

覆盖视图

有时一个个元素地进行比较是非常麻烦的，浪费的时间也多，Web 3 SuperPreview有个OverlayLayout（覆盖布局）的功能，一下子就可以比较出整个页面的差别。

强大的扩展性

以上只是Web 3 SuperPreview免费版的基本功能，更多的功能还需要大家去挖掘。另外也可以购买正式版，获得更多令人垂涎的功能，如：

支持更多浏览器，如Safari等
支持ASP.net，PHP程序的调试
支持脚本的调试&more

更多请浏览Microsoft Expression Web 3 SuperPreview官方网站，下载页面。

10个节约开发时间的CSS技巧

bolo — Sat, 26 Dec 2009 12:26:00 +0000

CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。

1.简单的纯CSS Tooltip

通过这些代码，你可以做出简单的Tooltip。这是CSS代码：

a:hover {
	background:#ffffff; /*要兼容IE6的话必须添加背景色*/
	text-decoration:none;
}
a.tooltip span {
	display:none;
	padding:2px 3px;
	margin-left:8px;
	width:130px;
}
a.tooltip:hover span{
	display:inline;
	position:absolute;
	background:#ffffff;
	border:1px solid #cccccc;
	color:#6c6c6c;
}

HTML代码如下：

1	Easy <a class="tooltip" href="#">Tooltip<span>This is a Example by imbolo.com.</span></a>.

效果如图。

2.重设基本样式

为了统一不同浏览器对各种HTML标签的默认样式的渲染，我们必须从新定义各种标签的样式，这样能对以后的开发带来方便。重新定义各种HTML标签只需要在CSS的开头加入以下代码。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: none;
}
 
/* 元素获得焦点时的样式! */
:focus {
	outline: 0;
}
 
/* 特殊文本的样式! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* 细线表格样式 */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3.方便的CSS调试器

这段代码可以把页面上的各种标签嵌套用不同的线条划分出来，方便你找出BUG。

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

4.使一个未设定宽度的DIV居中

对于一个有固定宽度的DIV容器，你可以轻松地通过margin:auto属性令他居中。如果要居中的DIV容器并没有设置宽度的话，你可以使用下面的CSS代码：

.content {
	margin: 0 auto 8px;
	display: table;
	}
 
.content div {
	display: table-cell;
	}