由css撰写的日志

15号w3c css 工作组放出了三个工作草案一个Last Call:

• 2005-12-15 工作草案: CSS3 advanced layout module（css3高级布局模块)
• 2005-12-15 最后征求意见: Selectors（选择器)
• 2005-12-15 工作草案: CSS3 Multi-column layout module （css3 多栏布局模块)
• 2005-12-15 工作草案: CSS3 cascading and inheritance module（css3 层叠和继承模块)

css3离我们是越来越进了，不知道到时候哪个浏览器厂商会最先跟进?好了，进入正题。

为了提高可用性和加速页面载入速度。把lilina聚合搬到了单独的php页面中。现在的页面已经能够通过w3c html validator校验了。因为使用了flickr和豆瓣的javascript badge的缘故，校验器还是会有警告提示。另外后端使用的fckeditor编辑器也有bug存在。比如我写下如下代码。

<pre><ul><li>条目1</li><li>条目2</li></ul></pre>
之后,MT生成页面的时候会变成。
<pre><br /><ul><li>条目1<br /></li><li>条目2<br /></li></ul><br /></pre>

这样的不符合规范且完全多余的br标签。html validator的提示如下。

 One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

就是说在内联级元素(inline-level element)中试图插入块级(block-level element)元素。这样做是不允许的。唯一的能在内联元素中插入块级元素的例外是object标签。那么什么是内联级元素(inline-level element)和块级(block-level element)元素呢？。

块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签’P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。

如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。

你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。

可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。

ps:关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

继续阅读 »

什么将推动css成为web界面设计的重要基础？

• 搜索引擎重要性的提升
• 模版技术的流行
• ajax,web2.0技术的流行
• 平台无关性的考虑？
• 基于机器友好的考量？

搜索引擎重要性的不断提升。不管是商业网站还是内容服务提供商，都希望有更多的受众。达成此一基本目标的手段之一就是通过众多的搜索引擎渠道获得尽可能多的潜在受众。良好结构和内容的页面往往更受搜索引擎的亲睐。基于搜索引擎友好的web界面设计，要求web设计和开发者用标准的html,dhtml,xml,css来组织内容。而组织良好的css也自然能达到使用者友好、搜索引擎友好、机器友好的目的。

模版技术的流行并不能成为css发展的直接动力，因为基于表格的界面设计方法也能达到相同之目的。何况css layout的首次开发时间相对表格技术来说要长一些。我们假定web开发的基本流程是designer用photoshop设计好基本界面psd图，然后交给web developer把psd图用html,css来制作成页面毛胚。而web programmer把静态的毛胚用动态语言嵌入的方式制作成模版或动态网页。在此基本流程中，如果是复杂的布局，那么表格的布局方法的开发速度要比css的布局方法高效的多。这个因素也是css layout不能快速流行的一个主要原因（不过大量的css layout设计模版的涌现或可解决这个问题）。不过缺点未必是真正的缺点，优点亦是。如果css layout的设计经验大量积累以后，css layout可以被设计成深具弹性，与内容或程序分离度相当高的独立控制器。如果遇到界面需要反复修改的情况，web界面设计师完全可以用自己的静态页面配合css来独立操作css layout的修改和优化，而不必阻断程序员的开发进度。当然也不必用嵌满脚本的动态页面来修改了。你所要做的只是更新你的css文件和图片。

虽然我的表述不能给刚开始进行css layout的设计师以立竿见影的效果，但是当你有了大量的实战经验后，必然也会被css layout的威力所打动。

ajax技术的流行成了今年web开发领域最热门的一个话题。这个老酒装在新瓶子里的技术让很多技术狂热者心跳不止。不过，我至今没有把这个技术用在任何我接触到的上线网站上去，即不便多说什么。不过这个技术肯定将直接逼迫开发者用更加符合标准的头脑来思考一系列技术问题。作为一种自然演化，会有越来越多网站贴上w3c css validator , w3c xhtml validator的标签，向明日的某一种技术跃进作好准备。

平台无关性的考虑其实也是css的一个相对劣势，浏览器之间的战争就是各路英雄都想当武林盟主，统一标准，统一天下。各门各派的各种招数都用上了。像firefox这种名门正派以坚持实现既有标准为主。像ie这种旁门左道，仗着家里有大把的银子和官府（OS）勾结的背景，下迷药使绊子放暗器诸多手段无所不用其极。害得诸多web开发者苦不堪言。要么放弃兼容性、要么花大力气来实现多平台兼容，这么做的直接后果是开发成本大大增加而客户未必买你的帐。而且据说这IE7也不是什么好鸟，看来这暗无天日的日子还要继续下去了。

闲话不多说了，我现在基本只考虑ie和firefox兼容，如果mac os如期正式出现在pc上的话，估计还要加上safari了。其他入netscape,opera基本就不考虑了。

基于机器（设备）友好的考量，因为css并不是只是为了提升使用者友好度的技术。我们还要考虑对打印机是友好的，对麦克风是友好的，对其他可输出内容的机器都是友好的。暂时想不出什么好词来，就用机器友好来统称其他输出设备的友好度考量吧。其实，除了打印友好外，其他的设备友好估计现在还少人问津，不久的某一天，你可以来听我的blog,来摸我的blog，来吃…我的blog.

大致写了一点关于css layout的东西，感觉思路还没有完全缕顺，先贴出来给大家拍砖，也算是想达到大家共同进度目的的一个楔子吧。

在这个可算是页面可用性的基本功能。只要页面的Accesibility和UI都站在用户的角度去考虑，把看似简单的东西都想到、做到。这就是一个合格的UI设计。切入正题。
在页面中用link命令导入需要的两个外部css文件。

[link rel="alternate stylesheet" href="http://www.designbyfire.com/large.css" type="text/css" title="large"/]
[link rel="stylesheet" href="http://www.designbyfire.com/small.css" type="text/css" title="small"/]

继续阅读 »

微软总是麻烦和事端的制造者。就像一个小孩，表面上听从了大人的话。但是，有不完全遵照大人的吩咐去做。喜欢做精作怪的搞些自己的小玩意儿。表面看，还是在做大人吩咐的事情。:0
要让你设计的CSS布局，在各门各派的浏览器里面有一致的外观，是一件困难、痛苦、乏味的工作。而且，那几乎也是不可能完成的任务。总会有或多或少的差别。特别是使用了复杂结构的CSS layout更加是如此。这些麻烦和事端的制造者，为了各自的利益和希望掌握标准的野心，搞得开发者苦不堪言。大量的时间浪费在了仅仅是为了取得一致的浏览器表现。沿用讽刺java的一句话，CSS Once,Debug Any Navigator
今天天气很不错，过了几天春寒料峭的日子。和煦的春风又回来了。象天气预报一样，我们只能预测未来，不能完全掌握未来。