PageTalks » CSS

Logical CSS

Robin — Thu, 09 Dec 2010 03:05:01 +0000

前端是目前互联网上最疯狂的领域之一。不仅仅是HTML5和CSS3，而是因为两者的产生激发了人们的无限想象。大家开始实用之前制作网页的方法来制作应用程序。程序逻辑和数据的问题可以交给Sencha Touch和Sproutcore之类的框架进行解决，而Look&Feel的问题，就只能由CSS3来解决了。

但是CSS是被设计来渲染页面的，而不是描述程序外观的。即使是CSS3，在如今应该也是不能满足这个要求的。虽然现在有大量的项目拥有上万行的CSS，但这样的项目对于开发者来说是一个非常巨大的考研。CSS没有变量、命名空间、包这些当今程序思想中最为基本的概念，开发者只能通过事先口头约定进行协同开发。即便是一个人维护CSS，你也不一定记得你几天前写的那些样式是否会和你今天写的有重复的ID，或是你是否在定义冗余的样式。诸如此类的问题仔细想象，会是数不尽的。也许大家会告诉我，这个世界上有Blueprint和960.gs之类的CSS框架啊～可是这些框架在需求超过“布局”、“设备兼容性”之后，你会发现，他们其实并没有解决问题。更本质上的那些由于CSS语言本身而引发的问题，其实是需要一门新的“语言”来解决的。在这里介绍两个这样的“语言”，SASS和{Less}，两者均是CSS3的超集。

{Less}

{Less}想做的事情就是就如同其名字一样，减少CSS的代码量。它在遵循CSS语法的前提下，提供了变量、函数、层级(Nesting)、数值操作等功能。

感觉应该直接上代码来：

Variables

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

上面的代码演示了less里面，CSS如果有变量是多么方便的一件事。

Mixins

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

你曾经抱怨过写圆角要写N句浏览器前缀的语法么？通过实用mixin，你可以如此潇洒的写那些该死的样式。

Nesting

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

CSS的子选择器，往往会让你写N多的ID和Class串联起来，实际上你得确定你如果命名层级，最多多少层，等等。这些东西，都只能口头约定。但是如果你通过如上语法进行编写，这些问题其实你已经不需考虑了。

Operation

@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

#footer {
  color: (@base-color + #111) * 1.5;
}

最后一个特性，数值操作。不多说了，这个特性省了很多JS代码了。

Deployment

官方要求将这种样式保存为.less扩展名。并且需要命令行工具“翻译”为浏览器能够理解的原生CSS。

当然，还有有一个GUI界面的程序能够进行自动化操作的，Less.app，不过是Mac only的。

SASS, aka, Syntactically Awesome Style Sheet

SASS和Less的原理是一样的，都是在语法上提供CSS3的超集来解决矛盾，并且通过“翻译”生成CSS。但是SASS提供了更为强大的语法和特性。

SASS支持任何位置的变量，不仅仅可以将其作为属性的数值，还可以作为属性名或者属性名的一部分。
SASS内置了更多处理函数，例如色彩的精确调节等
SASS内置了很多你经常会用到的mixin，例如圆角、阴影等，不需要你从头开始写
…

基本来说，SASS和Less思想一致，但确实两个规模完全是两个概念。可能这也是为什么Sencha本身就是用SASS来写自己主题样式的原因了吧。

详细情况可以看看他们的教程，文档或是安装来看看。

PS 无论是SASS还是{Less}都是需要Ruby环境的，因为其命令行工具都是ruby写的。Windows下的ruby环境其实很不方便，Windows sucks，换Linux或者Mac吧⋯⋯

Mobile App Development…in OTHER Ways

Robin — Fri, 24 Sep 2010 08:31:47 +0000

江湖有江湖的规矩，大家都知道iPhone上的Cocoa Touch框架和Xcode是开发Apple移动产品的王道。Android SDK和Eclipse是开发Android App的王道⋯⋯你可以找到所有主流平台的开发框架和相关IDE。

你说这做移动端应用的人容易么？虽说Blackberry和Android都是基于Java、有效部分人之前也做过Objective－C，但是想到一个大众产品需要提供每个平台的无差别体验时，你做的可能不是一个项目，而是N个项目。哪天国内某个厂商做了自己的操作系统和SDK，你也得啥啥的多做一个版本。对于财大气粗的公司这些都是无所谓的，可是对于那些可怜兮兮的工程师和项目经理更期望自己的产品生命周期能更长一些、受众应该更广一些——我们需要的是跨平台的解决方案啊！

我们第一个想到的词肯定会是HTML⋯⋯这不是什么新鲜东西，在很多其他嵌入式产品中，例如路由，都是用网页作为用户接口的。将Web App封装到一个应用程序包内进行分发这种概念，是一个很直观的想法。

AListApart上已经有文章在讨论这个问题，但是作者根据自身经验觉得WebApp在需求变得复杂之后不能满足任务⋯⋯汗⋯⋯的确有这样的嫌疑吧。如果单纯使用WebApp再套一个WebView的壳，就没法使用重力感应、GPS、照相机之类的功能。

问题的确如此，但是还是希望还是有的。Phonegap、Titanium、Rhodes、SproutCore Touch这三个跨平台的移动框架虽然依然是一个“壳”，就不仅仅是一个WebView的壳而已。

轻量级的PhoneGap

PhoneGap的是一个非常轻量级的框架，在开发过程中完全不需要使用Java或Ruby之类的代码，而是纯粹的HTML＋JS＋CSS。只是这里的JS里被赋予了增强型的API，你可以控制Camera、加速器、GPS等等。想了解它的功能，你可以直接看他的文档。

PhoneGap最大的优势就是它真的很轻量很快捷。你能把Web开发流程中的Rapid Prototyping应用到Mobile App的开发之中。

缺点也很明显。由于使用JS作为语言载体，你的效率没法跟Objective-C、Java的比。由于，PhoneGap限定你的程序在一个HTML文件里面，那么App规模越来越大之后，你还能在一个HTML里管理你的App么？
最后一种是个这些框架的通病，无法提供完全一致的用户体验。在UI方面，由于无法调用系统默认的UI库，界面完全靠你自己去写，这对用户体验设计是一个灾难。虽然jqTouch之类的框架部分弥补了这方面的缺陷，但是用HTML模拟的控件用起来还是没有系统原生的流畅⋯⋯

更聪明的Titanium

Titanium也是利用HTML、JS、CSS。不过其JS API封装的更强大。

同样是将手机所有功能都封装起来，但是比PhoneGap更完美。但这个是牺牲跨平台性的，Titanium只支持iPhone和Android，现在的Blackberry的支持还是测试阶段⋯⋯不过对于中国手机用户来说，这样的支持性反而更好。

Titanium比PhoneGap对手机的功能封装的更好，前者支持后者不支持的File IO操作（PhoneGap支持不完善）、Contacts读取等等。
对于正式的产品开发，选择兼容性更强的PhoneGap还是功能更强大的Titanium，的确是个疑问。

绝对重量级的Rhodes

Rhodes采取的是另一种思路，简单说，Rhodes的框架在App内部架设了一个Client/Server端，开发者写的程序就是其Client端，通过框架的JS API调用“Server”端的“WebService”。Server端再根据得到指令进行操作，Server端本身具有调用平台原生API的使用能力。

其”Server“端使用的是Ruby，那么很多同学可以通过Ruby自己封装平台上的原生API给”Client“端的JS使用。

Rhodes还有相应的云端解决方案，能够解决Mobile App的数据同步等问题。

详细的可以参考Rhodes的介绍，或者这个Slide。

蓄势待发的SproutCore Touch

今年早些的时候就发布了SproutCore Touch。SproutCore(网站已被hexie)就已经很NB了，YUI、jQuery跟它都不是一个等级的东西，或者就不是同一个概念。SproutCore可以是仅仅借用了JS的语法去定义了一个全新的界面开发环境，并且提供了项目生命周期的一切工具。SproutCore Touch是面向移动端的框架，肯定会在SproutCore的基础上加入移动端的Touch、GPS、Camera相关的API。

可惜这个框架的学习难度特别大，其API的文档和调试环境特别不友好⋯⋯好吧，应该是说，文档比较难找，然后你又要用Ruby来完成开发工具的配置、代码调试等等。另外，这个框架的开发进度好慢的。

但这个框架是基于SproutCore的，潜力太不可小视的。

没有Utopia

现在，我们可以放心的用已有的技术去快速抢占移动端市场了。再加上HTML5在移动平台上的广泛支持，前途看似无限美好。

但是大家不要忘了，现在你的App虽然没有跟平台依赖，但是跟这些框架相关了！
从性能上说，程序性能又是跟每个平台上的浏览器有关。Webkit虽然是主流，但是你会发现Android和iPhone的Webkit就很不一样，更不用说每个不同版本的平台之间浏览器的差异了⋯⋯似乎你又回到了桌面浏览器的兼容性大战上。

这些问题在你使用一些HTML5的新特性就特别明显。比如，你会发现iPhone上竟然没有WebWorker。Android上Canvas.toDataURL()方法无法执行等等问题。

看来，Mobile App领域还真是一块处女地⋯⋯

HTML5 and CSS3 Must-have Online Resources

Robin — Sat, 07 Aug 2010 11:50:29 +0000

好吧～到了掏家底的时候了。最近看了很多相关资料，所以还是有很多可以说的。相信大家在消化这些资料之后，应该会对HTML5和CSS3有较为深入的了解。

Well, It’s time for me to share something about HTML5 and CSS3. We’ve discussed too much about them and it’s necessary to really dive into these techs……

Future Trends

Tutorials for Novices

Important Documentations

Live Demos

Compatibility

Open Source Projects

HTML5 Canvas for Internet Explorer
Modernizer.js
CAKE – Canvas Animation Kit Experiment
Gordon – An open source Flash™ runtime written in pure JavaScript with SVG
Smokescreen – convert flash to HTML5/Javascript
Raphaël: Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web
Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets.
Cappuccino is an open source framework that makes it easy to build desktop-caliber applications that run in a web browser.

Online Tools

JS Bin – an online sandbox for js
CSS3 Generator
CSS3, Please!
Adobe BrowserLab
Linear Gradients-Css3 Demo
Box Shadow – Css3 Demo
transform and transform-origin Css3 Demo
border-radius Css3 Demo
Transform Matrix – Css3 Demo
MockFlow

列了这么多文章，其实大家看完会发现，有些东西经过多个人的理解、诠释后会变为，所以，还不如直接去看看源头——W3C的文档。如果你看别人的教程真的看不懂了，直接去看官方文档吧！

So many articles? You will steadily find it clear that docs on w3c will be most of use. Therefore, if you feel puzzled by these articles, just dig into docs from w3c!

Samsung telephone suijo bus schedule * Bicycle speedometer odometer george post

Revelation of HTML5, CSS3 and more…

Robin — Sat, 07 Aug 2010 10:38:49 +0000

就在我还在写这篇文章的时候，HTML5的标准还在不断完善。当然，开发者已经习惯W3C和其他“砖家”组织慢慢吞吞的编写，再加上W3C和WHATWG的恩怨，“~~2020~~2022年才会成为Proposed Recommendation”实在是意料之中的事情。

但是看看现实状况，你会非常有喜感，Safari 5、FF3、Chrome 5都已经支持了60％以上的HTML5功能，甚至连IE9 Preview3里面都有好多新功能的支持。

我们何去何从？

完全放弃之前的HTML是不可能的，广大的IE用户群会让你发疯。但这本身就是一种博弈，你如果继续将IE，尤其是IE6作为你的WebApp的主要客户端，那么你就在助长IE6，到头来让开发者更痛苦。

Yahoo所提倡的Progressive Enhancement和Graceful Degradation是两个美好的准则，面对于日益扩张的产品线、快速的产品更新速度，让你觉得多花一行代码给那些垃圾浏览器做功能支持都觉得蛋疼——有时候你甚至连SWFObject都不想用。

当然，我们不能继续停留在抱怨诸如IE之类（也就只有IE）这种垃圾浏览器的怪圈之中。

现在，已经有开发者拥有足够勇气去放弃IE6的支持了。包括google在内的一线厂商，实际上已经再为高级浏览器和IE6单独开发不同的版本的应用。也就是说，如果用户使用老掉牙的IE6进行浏览，他会看到一个催促他们换浏览器的对话框，以及一个Web 1.0的传统应用程序（没有ajax、没有canvas、没有offline功能）。

好吧，在做出这个决定的时候，你可能要说服你的主管去做用户调研以及SWOT分析。

我们不得不承认，我们自己和那些使用高级浏览器的用户没有理由去忍受因为某些弱智浏览器而削弱的用户体验。用户喜欢圆角边框、界面动画、离线存储和更智能的表单等等。

好吧。那些高级浏览器就很好么？其实，大家又回到了上次浏览器大战。Netscape和IE不断的添加自己的私有属性和方法，这就是这次我们遇到的。

诸如”-webkit-”、”-moz-”之类的前缀根本就无法通过W3C的验证，而你也无法保证这些私有的CSS属性的效果是一致的。也许大家写一个CSS3的旋转就得这个样子：

.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+
       -o-transform: rotate(7.5deg);  /* Opera 10.5
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome
             filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
                     M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
                     M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)"; /* IE8
               zoom: 1;
}

实在是太华丽了，这一条CSS规则就可以增大3到4倍，乐观估计整个CSS文档会因为兼容性需求增大2倍吧？

那JS方面呢？webkitTransitionEnd、webkitAnimationEnd⋯⋯乖乖，你这兼容性到底怎么做？

门户站点的前端工程师会哭的，所以HTML5的使用真的是要深思熟虑，考虑到自己的目标浏览器。

总是有人诟骂Adobe Flash是个私有技术，不如HTML5通用，就目前这种状况，现实版的HTML5就是每个浏览器厂商的“私有技术”。每个公司都维护这一套自己的命名规则，自己的文档⋯⋯原来W3C所提倡的“共产主义”就和XX一样⋯⋯

那HTML5真的是爷爷不疼奶奶不爱么？

面向广大的PC端，HTML5的应用需要大量的兼容性代码，甚至考虑到制作IE的降级版本，这个成本，对于小巧型的APP完全ok，做Gmail级别的？还是别找刺激了。

个人认为手机市场才是HTML5的天下。本身手机市场里，系统软件和手机本身都有开发商控制。iPhone下跑Safari的人绝对是占大多数，如果做iPhone4的webapp，完全有可能按照Apple的那些私有版本的HTML5写程序。基本上，满足了webkit引擎，大部分的智能机你都可以搞定了。

再加上还有个WebOS的概念在，可以期待HTML5在移动平台上会先火起来！

另一个HTML5的栖息地，可能是各大厂商的研发中心里。HTML5给了广大开发者另一个快速原型工具。以往，一个设计流程走下来，最终不管你愿意与否，你只能用Flash去实现那些复杂的动画和应用程序逻辑，但是我们现在有Flash。

CSS3的Animation和Transition，HTML5的Canvas足以满足大部门DEMO的要求了吧？

虽然这样，HTML5和CSS3已经“沦为”一个RPD工具了，但是它仍旧证明了其价值所在。

在那些CEO眼里，HTML5也将成为遏制Adobe Flash扩张的法宝。微软的Silverlight如此疲软，Apple也是希望能够将效率地下的Flash敢出移动平台⋯⋯

好吧，让我们拭目以待。我们能做的，可能只有把HTML5和Flash全部学一遍吧⋯⋯泪⋯⋯

When can I use HTML5 & CSS3?

Robin — Tue, 08 Jun 2010 06:28:08 +0000

As web designers we want to know when we can start to roll out HTML5 and CSS3 functionality on our client’s sites and we want to share that knowledge. So last Autumn we built findmebyip.com; a free testing tool that sends you a live, detailed report of what your client’s browser supports.

HTML5和CSS3的功能已经让许多前端工程师垂涎三尺，可显示总是残酷的。与MS奋斗了这么多年，我们还是无法为仍然广泛使用的IE6做出任何改进（似乎，IE6不死，前端就无法进步啊！）；而最新的IE9对标准的支持也是微乎其微。
本文分析了HTML5和CSS3的现状，以便大家在实际工作中量而为。

50 Excellent Tutorials for Web Development Using CSS3

Robin — Tue, 23 Mar 2010 12:34:26 +0000

In this modern web world we offering CSS3 techniques in these really useful tutorials with many exciting features and latest practice, after an detail research session about CSS3 (Cascade Style Sheet) make an roundup where amazing ideas about Web Developments.

CSS3 have more exciting features which are most compatible for cross browser usability as we using famous internet browsers: Internet Explorer 7 & 8, Firefox, Safari and chrome, they all very supporting of new CSS3 properties.

文章总结了CSS3最新的50个教程。CSS3呼之欲出，对于前端设计师来说，需要赶紧给自己充充电。虽然短期实用性不大，可是对于个别属性的支持，还是很有希望的。

Print Style in Actions

Robin — Sun, 28 Jun 2009 07:49:51 +0000

Recently I’ve read deeply into some books about web standards, and found out people would be pleased if they can just click the print button in a web browser and get everything they want neatly printed. The books lead me to two excellent articles written by Eric Meyer.
Two articles are: “CSS Design: Going to Print” (www.alistapart.com/articles/goingtoprint) and “Print Different” (www.meyerweb.com/eric/articles/webrev/200001.html).

And this article is the experiences I got during making the print style for PageTalks.com.

Before making a print stlye, the preview is terrible:

What I’ve been told

Eric Meyer sums three ways to implement the print style on a web page.

@import url(paged.css) print,projection;
@media print {…}

The principles of building a printer-friendly page always require the designers to bear in mind the general idea of saving ink. To do so, we have to accomplish some simple steps:

hide all banners
hide all widgets, sidebars, comments and so on
use white background
assign correct font size for printers

With the font-size properties, point value is doing a better job here and readers will be more comfortable with serif font-family. Eric chose 12pt for font-size, but I think it’s pretty huge value for texts. So I use 10pt instead.
In fact, you need to reset all the properties related to typography using pt. E.g:

body {
font-size: 10pt;
line-height: 15pt;
margin:12pt 6pt;
padding:3pt;
}

body a,body a:link,body:visited,body a:hover,body a:active {
background:#FFF;
color:#000;
text-decoration:none;
}

body h2,body h3,body h4,body h5,body h6 {
line-height:125%;
}

body h1 {
font:bold 10pt/150% helvetica, arial, sans-serif;
letter-spacing:0.3pt;
margin:6pt 0;
text-transform:uppercase;
}

body h2 {
border-bottom:1px dotted #AAA;
font:14pt/150% georgia, times, serif;
margin:18pt 0 6pt;
padding:0 2pt 0 0;
}

body h3 {
font-size:9pt;
margin:18pt 0 6pt;
text-transform:uppercase;
}

body p {
margin:0 0 12pt;
}

body div.entry-date {
border:1px solid #999;
float:right;
font-size:7pt;
margin:0 3pt;
padding:1pt 3pt;
text-transform:uppercase;
}

@import Doesn’t Work

Don’t pannic. Firefox does a good job to load import rule with media type. However, it’s not so lucky with IE6. (I didn’t test IE7 or IE8, since IE6 users overnumbers the total users of IE7 and IE8)
IE6 seems to be unable to parse a @import rule with media type like this:

@import url(paged.css) print,projection;

Without media type, it can obey the import rule as Firefox does. Believe or not! See my test page and play aroud with IE6: Test for Import Rules

Declarations of media is supported by IE6, which means you can add do it like this:

@media print {
@import url("print.css")
}
or just use link tag:

What else should be hidden from printers

Beside font properties, making unneccessary contents invisible is also a tiring task. Technically, besides the contents we’ve listed before, we should hide all interactive components like forms, buttons, inputs and so on. That’s because users can’t interact on the papaer and we just save more ink by not printing them at all. E.g:

The comment form is impossible to be used on a paper.

Some links that triggers a javascript event or point to actions that impossible to take on papers.

Edit link is useless. More often than not, users holding the paper don’t intend to ‘Edit’.

/* Hide unneccessary contents */
body div#blog-description,body div.sidebar,body div#access,
body div#globalnav,body span.archive-meta,body div.entry-meta,body div#footer,
body div.navigation,div#respond,div#trackbacks-list,body div.formcontainer,
body form, body div.serve-bar, .comments .comment-meta * {
display:none;
}

/* Hide contents generated by Javascript and flash */
.lang-select ,body div.entry-content embed, body div.entry-content object {
display: none;
}

Override CSS

It’s ideal to seperate print style and screen style completely. In my case, I don’t want to rewrite the layout in print style. That means I’m bound with the troubles of inheritence.

In the CSS for screen, I specify the widths and postions of containers. It’s time for me to reset it in print style.

You’d better clear the paddign and margin so as to make most of papers
When assigning width values, avoid use px unit; margin of 5% is prefered

/* Override the layout for printer */
body #container {
margin: 0;
padding: 0;
width: 100%;
}
body #container #content {
margin: 0;
padding: 10px;
}

body div.entry-content a.more-link {
position: static;
}

Just watch out if you have to do the similar job.

Where is my LOGO?

Clicked the print preview button and found my logo was gone.
It’s not surprising for you to understand the broswers will hide css background automatically. I use a image replacement technique to display my logo, so the background is just hidden.

The only choice left to me is to use a IMG tag to show the logo.

I re-designed the logo for print and hide it in CSS for screen.

body #header div#blog-description, body #header h1#blog-title {
display: none;
}

body #header {
width: 257px;
height: 58px;
text-indent: 0px;
top: 0px!important;
left: -10px;
z-index: 11111;
}

#blog-logo {
display: block;
}

Final Result

After multiple tweakings, we finnaly got a nice print stlye:

Try to create your own print style!

Digest and Thoughts on Web Standards Solutions – More on Styles

Robin — Fri, 26 Jun 2009 15:07:28 +0000

This post follows my earlier post Digest and Thoughts on Web Standards Solutions – Basic Markups. I suggest read that article first and then head to this one.

这篇文章是接着之前的文章写的，建议大家先将之前的文章看看再移步这篇文章。

Applying CSS

I suppose to move this chapter ahead. Lots of ways to apply CSS to a document:

Use

External CSS

Insert a link tag inside the head tag:

Now the broswer can cache the file and it’s easy for you to modify.

@import rules

Defining the @import rules in CSS is another good option. Ancient browers such as Netscape doesn’t understant import rule. Therefore they are unable to load CSS assigned in @import rules. We can separate our structured markup from the presentation as much as possible, and then hold design details and styles for browsers that support them.



Applying CSS

Only contemperory bwosers can read hifi.css, while old ones can’t. And then we can fully use the Cascade feature of CSS to override the properties formerly assigned.

Inline style

For temperoray usage only.

CSS can have alternative files to provide users chances to choose which set of stlye to load.

It’s a pity that only new brwoser can handle this.

Print Style

CSS is not only for computer screen. It can be used for many types of media. However not every type of media support CSS. Printer and screen readers are just two common clients besides computer screen.

By media property

media type:http://www.w3.org/TR/CSS21/media.html。

@media or @import

Default value for media is all, which means all devices will load this CSS file.

media accept multiple values seperated by blank：

In real world, we need to create another CSS for printers.

There are some basic skill you will find useful when making print style:

Assigning a value using pt unit as a base font size in BODY, e.g body {font-size: 12pt;}
Hide unneccessary contents such as sidebars and widgets, and so on
Hide your beautiful background. Just leave some important images such as logo. And take speical care with the color they contain.
Make sure users will still distinguish the links and normal text on the paper.

a:link,a:visited{
color:blue;
text-decoration:underline;
}
#content a:link:after,#content a:visited:after{
content:"("attr(href)")";
}

Here we use pesudo-class :after and :content to modify the text content, which is a very controversial method among designers as they regard it’s against the idea of CSS
I think it’s all up to you.

Dan also recommends two articles about print style：

http://www.alistapart.com/articles/goingtoprint
http://www.meyerweb.com/eric/articles/webrev/200001.html

CSS Layout

Dan demonstrates some basic methods to layout with CSS.
Generally it’s realized by floating and absoulute positioning.
However it’s definitely not sufficient in real world.
I will give another guide about contemperarory css layout.

Dave also make supplements for us:

"The Layout Reservoir"(http://www.bluerobot.com/web/layouts/)
"From Table Hacks to CSS Layout:A Web Designer’s Journey"(http://www.alistapart.com/articles/journey/)
"CSS Layout Techniques:For Fun and Profit"(http://www.glish.com/css/)
"Little Boxes"(http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html)
"CSS Zen Garden"(http://www.csszengarden.com/)

Some are already househeld.

Dan also memtions the irritating box model. Box model is vital in layout, for most strange problems that cost your days to solve are caused by them.
Generally speaking, CSS1 compliant browsers will do as written in W3S specs. The conflict arises in (stupid) IE5. For example:

#sidebar{
width:200px;
padding:10px;
border:5px solid black;
}

Correct explaination is as followed:

But in IE5, sad truth is:

The solution is using css hack:

#sidebar{
padding:10px;
border:5px solid black;
width:230px;/*for IE5/Win*/
voice-family:"\"}\"";
voice-family:inherit;
width:200px;/*actual value*/
}
html>body#sidebar{
width:200px;
}

We use voice-family property to mislead IE5 to believe to think this css declaration is ended. However new bwosers will handle the whole declaration nicely. The later width property shall overrides the former one.
The second CSS declaration block is for Opera which unfortunately will be mieled as well. Let’s give a child selector to confuse old browsers such IE5 but pass to the new borsers.

A chart explaining the behaviours of IE and Doctypes. See more at http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

Last part of this chapter, Dan introduces a useful technique – Faux Columns.
In the design of CMS, we hope our sidebar can be high enough to reach the bottom so that we can show the background (probably repeated images). But the elements’ height are assigned according to their real height and assign the fixed height before the content is generated is unrealistic.
We can trace the concept of Faux columns to the Alistapart:
"Faux columns"(http://www.alistapart.com/articles/fauxcolumns).

The instructions are easy: wrap the #left and #right in a container div, and use CSS to assign background to the container.
The content in the container div will make it tall enough to display the background properly.

Styling text

In this chapter, Dan discussed some common css properties to style text:

line-height, defines the line height. Commonly use a em based value
font-family, tells the browser to use which font face to display the text. It accept multiple values; The font name contians blank, use quotation marks to wrap it
letter-spaceing, change the space between letters, commonly used in styling the headings
:fisrt-letter pseudo-class is not supported in most mordern broswers. To apply drop cap effect, we need to wrap the first letter with additional tag
text-align, sets the way the text in a contain align. Can be left, center, right, and justify. Justified text spaces words out so that each line is of equal length, making a tight, defined column.
text-transform can modify the capitalization of text. Can be upppercase or lowercase
font-variant allows us to render type in small caps (where the text is capitalized with varying character sizes)
text-indent indents the first line of paragraphs

Image Replacement

In this chapter, Dan introduces some ususal Image Replacement techniques: FIR, LIR, Phark. These techniques are used to solve the dilema that the fonts chosen by designers are often unavaliable in clients. So we just use images to serve as normal texts.

See more at Using Background Image to Replace Text

sFir is now more and more popular. You can find the examples right here in PageTalks. All titles here are presented by sFir techniques.

Styling

It’s very interesting to assign class to Body tag. View the source of large CMS, you may find body has classes!
Dan explains that by using class in body, we can:

Swich the layout
Specify the CSS property for special pages, e.g body.index#content{…}, assigining some css property to #content in Index only
You can tell users “You are here” in the navi

For example, suppose the navi bar is as followed:


Apples
Spaghetti
Green Beans
Milk

Assign id property to body, and write in the CSS like this:

body#apples#apples_tab a,
body#spag#spag_tab a,
body#beans#beans_tab a,
body#milk#milk_tab a{
color:#000;
background:url(tab_pyra.gif)no-repeat bottom center;
}

You needn’t server side script to judge which page the user is in. It’s only based on HTML tags and CSS.

Ending

In this chapter, Dan gives us lots of useful resources to go on our study.

Public Organizations

W3C – http://www.w3.org
Web Standards Project – http://www.webstandards.org
A List Apart http://www.alistapart.com
CSS Zen Garden http://www.csszengarden.com
Dive into Accessibility – http://www.diveintoaccessibility.org
css-discuss – http://www.css-discuss.org
Web-Graphics – web-graphics.com
Digital Web Magazine – http://www.digital-web.com
The Weekly Standards – http://www.weeklystandards.com

Inspiration Blogs

Jeffrey Zeldman Presents:The Daily Report – http://www.zeldman.com
Stopdesign – http://www.stopdesign.com
mezzoblue – http://www.mezzoblue.com
meyerweb.com – http://www.meyerweb.com/
Tantek Celik – tantek.com/log/
What Do I Know? – http://www.whatdoiknow.org/
Asterisk* – http://www.7nights.com/asterisk/
superfluousbanter – http://www.superfluousbanter.org
Simon Willison’s Weblog – simon.incutio.com
Brainstorms and Raves – http://www.brainstormsandraves.com
Living Can Kill You – http://www.saila.com/columns/lcky/

Books

Designing with Web Standards: By Jeffrey Zeldman(New Riders,2003)
Cascading Style Sheets:The Definitive Guide: By Eric Meyer(O’Reilly&Associates,2000)
Speed up Your Site:Web Site Optimization: By Andrew B.King(New Riders,2003)

应用CSS

个人觉得作者应该把这一章提到前面，笑……
有很多方法可以将CSS应用到文档上

在文档内部定义

外部样式表

在head标签里面，定义一个link元素

这样做浏览器可以对这个文件做缓存，而且有利于日后维护

@import规则

在CSS文件中定义@import规则，也是一个很好的方法
老的浏览器，诸如Netscape 4.x等不支持import规则，这意味着通过import规则导入的CSS是无法被这些老浏览器看到的。我们可以为不用级别的浏览器指定兼容性方案：



Applying CSS

只有较为现代的浏览器才能读取hifi.css，而老浏览器只能看到lofi.css。建立这种方案，我们应该充分利用CSS的层叠特性，即之后的属性可以覆盖先前定义的属性。

行内添加样式

这是最不好的方法，只能用作指定临时样式之用。

CSS的可替换属性可能还很不为人知，其实就是给浏览诸多CSS文件供浏览器加载

书中给出了定义了不同字体大小下的各个CSS文件，供浏览器选择。通常这是基于浏览器用户界面的操作，老的浏览器可能不支持这个特性。

打印样式

CSS的不仅仅是为渲染屏幕效果而产生的，他的目标媒介有很多。但是由于各个厂商都不太遵循网页标准，所以CSS的这些高级功能也就是白费了。不过值得欣慰的是，对于打印机和屏幕阅读器，我们是可以单独为他们指定CSS文档的。

通过media属性指定

media的可选项你应该去参考一下http://www.w3.org/TR/CSS21/media.html。

@media或@import

其实没有指定media属性时，浏览器默认值为all，也就是所有媒介都会读取这个CSS。

media属性允许指定用空格隔开的多个值，例如：

或者

实际操作中，我们应该分为两个文件为打印机和屏幕提供样式。

在定义打印样式的时候，有一些很基本的技巧：

应该在body中指定一个以pt为单位的基准字号
将不必要的内从隐藏，例如侧边栏、文章类表等等
将那些绚烂的背景图片都隐藏起来吧；例如logo之类必要显示的图片，也要注意色彩问题
应该保证在输出纸张上我们依然能分别普通文字和链接文字

a:link,a:visited{
color:blue;
text-decoration:underline;
}
#content a:link:after,#content a:visited:after{
content:"("attr(href)")";
}

这里用了:after伪类以及content属性，实现了通过CSS修改文本内容，有人评论说这样是有悖于CSS的出众的。大家自己定夺吧。
文中推荐了两篇Eric Meyer的关于打印样式的文章：

http://www.alistapart.com/articles/goingtoprint
http://www.meyerweb.com/eric/articles/webrev/200001.html

CSS布局

这一节里面我们可以看到作者演示了一些基本的布局方法。
浮动实现侧边栏实现双栏布局、浮动双栏实现三栏布局、浮动内容、双浮动、绝对定位侧边栏等等。个人感觉可能由于这本书的限制，介绍的这些布局方法在实际操作中是远远不够用的。我会另外用一篇文章来总结一下对现代CSS布局的学习。
当然文中也给出了一些讲布局的文章：

"The Layout Reservoir"(http://www.bluerobot.com/web/layouts/)
"From Table Hacks to CSS Layout:A Web Designer’s Journey"(http://www.alistapart.com/articles/journey/)
"CSS Layout Techniques:For Fun and Profit"(http://www.glish.com/css/)
"Little Boxes"(http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html)
"CSS Zen Garden"(http://www.csszengarden.com/)

有一些是路人皆知的啦……

本节的后半部分作者讲到了盒模型，写的越多对这个东西就会更加熟悉，一开始是相当让人头疼的。大多数莫名其妙的布局问题都是源自于盒模型的兼容性。
总的来说，只要是支持CSS1的浏览器都能够按照W3C所推荐的那样去理解盒模型，主要问题都出现在如IE5这样比较顽固的浏览器上。书中举出了如下的CSS代码

#sidebar{
width:200px;
padding:10px;
border:5px solid black;
}

正确的解释应该如下图所示

但是在IE5中，结果是这样

解决这个问题，目前不叫实用的只有使用hack。

#sidebar{
padding:10px;
border:5px solid black;
width:230px;/*for IE5/Win*/
voice-family:"\"}\"";
voice-family:inherit;
width:200px;/*actual value*/
}
html>body#sidebar{
width:200px;
}

我们用一个不会影响外观的voice-family，传递一个会让IE5误以为这个声明已经结束的符号。但对于新的浏览器，剩下的规则还会继续解析，最后一个width就会覆盖先前的width。而第二个声明，则是因为诸如Opera的CSS2兼容浏览器也会因为那些符号而已为第一条声明提前结束，所以用一个CSS2的子选择符再次写出width属性。

这是一张了解释IE对于盒模型的行为与Doctype的关系的图标。你可以在这里了解更多：http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

本节最后作者介绍了一种非常有趣的招数——伪栏
在一般的CMS设计中，我们往往希望侧边栏能够和整个页面页面一样高，多半是设计师是希望背景图片能够显示完全。但是CSS在默认情况下，会自动适应高度，内容有多高，容器的高度就有多少；倘若你想手动指定高度，实现计算一个CMS系统文章容器的高度也是不现实的。

"Faux columns"(http://www.alistapart.com/articles/fauxcolumns)也是出现在alistapart里面的概念。实现原理很简单，那就是将#left和#right两个div用一个容器div包裹起来，然后把背景图片指定到这个容器div里面，这样图片的延伸高度就和文章高度一样了。

设定文本样式

本节主要介绍了用常用的一些CSS属性来定义文本样式。

用line-height定义行高，使用相对单位em会更有效
用font-family指定字体，可以指定多个字体作为备选；若字体名字里面有空格，就要用引号引用
用letter-spaceing来指定字符间距，这是文章标题上常见的效果
虽然用:fisrt-letter这个伪类可以实现段首字母下沉，可是大多数浏览器都不支持这个伪类，所以还是需要手工在断手字母旁边包围一个span，再来操作span的属性
用text-align设定文本的对其方式，除了left、center、right三个常规属性，还有一个justify这种”两端对齐“的方式，这种方式可能让字符之间的间距不规则，但是页面整体效果是整齐的
用text-transform可以将小写字母变大写，大写字母变小写。可选属性是upppercase、lowercase
用font-variant来实现”小型大写字母“（这翻译够绕口吧？原文“Small Caps”）
用text-indent来实现首行缩进，这个缩进仅仅对每一段的第一行有效

图片替换

这一节讲了FIR、LIR、Phark等常用的图片替换方法
图片替换方法主要是为了解决设计师所用的字体在客户端上不一定存在的困境，往往解决方案是使用图片来代替。
里面讲述的方法在我的另一片文章里面已经都已经涵盖，请自行参考，这里不再赘述。
需要指出的是，现在sFIR技术也很流行，PageTalks的标题都是使用sFIR，sFIR也解决了一些图片替换技术目前无法解决的问题，值得参考。

为设定样式

这一节就比较耐人寻味了。其实翻开大型站点的代码，几乎都会发现他们的body上竟然有class属性，作者在此道出了真意：

用class随时切换分栏等布局特性
在系统的特定页面指定特定的属性，例如body.index#content{…}，这样的语法精确的给首页的#content的元素指定了样式
巧妙的实现导航栏的”当前页面提示“

示例，假设导航栏的代码是这样的：


Apples
Spaghetti
Green Beans
Milk

在不同的页面给body指定相应的id，那么可以在CSS中这样写

body#apples#apples_tab a,
body#spag#spag_tab a,
body#beans#beans_tab a,
body#milk#milk_tab a{
color:#000;
background:url(tab_pyra.gif)no-repeat bottom center;
}

这样的好处是不需要在服务器端脚本上写判断页面的逻辑，而仅仅是通过设定id属性和修改CSS完成的。

下一步

这节作者给出了很多有用的链接，供大家进一步学习研究

创意博客

Jeffrey Zeldman Presents:The Daily Report – http://www.zeldman.com
Stopdesign – http://www.stopdesign.com
mezzoblue – http://www.mezzoblue.com
meyerweb.com – http://www.meyerweb.com/
Tantek Celik – tantek.com/log/
What Do I Know? – http://www.whatdoiknow.org/
Asterisk* – http://www.7nights.com/asterisk/
superfluousbanter – http://www.superfluousbanter.org
Simon Willison’s Weblog – simon.incutio.com
Brainstorms and Raves – http://www.brainstormsandraves.com
Living Can Kill You – http://www.saila.com/columns/lcky/

书籍

Designing with Web Standards，《网站重构》: By Jeffrey Zeldman(New Riders,2003)
Cascading Style Sheets:The Definitive Guide，《CSS权威指南》: By Eric Meyer(O’Reilly&Associates,2000)
Speed up Your Site:Web Site Optimization: By Andrew B.King(New Riders,2003)
第三本书讲的是HTML和CSS的代码优化，貌似国内没有出版，其实这本书也不错：
High Performance WebSites，《高性能网站设计》
Steve Souders(O’Reilly)，作者是是YUI的高级工程师，书很薄，很快就可以消化，在这里做个小广告

Digest and Thoughts on Web Standards Solutions – Basic Markups

Robin — Fri, 26 Jun 2009 14:40:00 +0000

在图书馆看到这书，早就想拜读一下，考完了伟大的马哲，终于完成我的愿望啦。书的详细信息：http://www.china-pub.com/40160&ref=ps

书拿起来很薄，印刷还算精细。人民邮电出版出版的一系列书顺准都很高，但是翻译的质量参差不齐。这本书翻译质量不敢恭维，很多句子读起来绕口，我只有去查阅英文原版才得以豁然开朗。
原作者是Dan Cederholm，可能这名字没有Dave Shea这些顶级NB人士响亮，但是他的网站Simplebits.com很早就已经被我放到收藏夹里了。

整本书适合懂得XHTML，但是想让自己的页面更接近网页标准的设计师、前端工程师们细读。内容都不是什么新东西，但是算是一个比较实在的小册子。总的来说，是一本优秀的入门级读物。应该与一本《CSS Mastery》相似，大家两者只要收录其一就可以。

本文是我整理的阅读笔记，也是我觉得里面比较精华的内容，供大家参考。如果你发现这些内容已经是烂熟于心，这本书就远远低于你的要求了。（那一定是很N的人了，笑……）

I met this book in the library months ago. Despite the few glimpses in a hurry, I felt it was a great book and made up a mind to produce some time to read it.
Detail about this book:

http://astore.amazon.com/simplebits-20/detail/1590593812

It’s only a handy book, light and thin. The author is Dan Cederholm, who probably is a nobody in your mind but indeed an expert in Web Standards. Simplebits is his own site and I took it into my favorites long time ago.

On the whole, this book is good enough for those who know the basics about XHTML, but desire to rise into a upper atmosphere of web standards. You may think CSS Mastery is also anther choice. Yes, it’s very similar to CSS Mastery. In my opinion, just buy either of two.

Following are some my digests and thoughts about this book, for you review. Hope you find it useful.

列表元素

不要用br换行
保持标签闭合
使用li和ul

本节中作者讲述了用纯CSS实现一个非常漂亮的导航菜单，值得参考。

标题

使用h1~h6描述标题
注意标题级别，尽量做到递减

本节中描述一种名叫“变色龙效果（The Chameleon Effect）”的技巧。通过运用透明的GIF的IMG元素，并在CSS中设置IMG的background属性，这样可以为透明部分填色。

FIRST IMPRESSION

仅仅通过更改CSS的属性可以达到更换颜色的目的。这种技巧也可以用来作图像的水影。

表格数据

table并不是万恶的，它是XHTML的一部分，表格型数据都应该用table来写，这些数据可能是：

日历
工作簿
图表
日程表

写表格时应该注意一些细节：

加入caption作为表格标题，明确表格内容
设置summary属性介绍table的内容，提高可访问性
活用th表示表头
利用td的headers属性表明数据之间的关系
在th中设置abbr属性设置该表头的简写或概要，为屏幕阅读器提供便利
活用thead、tfoot、tbody增加表格的语义；同时打印输出时，会在每一个单独的纸张上都输出thead和tfoot，提高可读性

本节中作者演示了如何用CSS创建基于表格的格点：

table{
border-top:1px solid#999;
border-left:1px solid#999;
border-collapse:collapse;
}
th,td{
border-right:1px solid#999;
border-bottom:1px solid#999;
}

这里我们通过设置border-collapse完全消除单元格之间的间隙。

引用文本

这方面是大多数设计师没有注意的问题了，作者也提出了一些网上常见的做法以及他们的缺点。正确的编写引用文本，应该：

用blockquote包围内容
给blockquote添加cite属性，告诉浏览器这段文字来自哪里
如果是行内引用则用q
给q设置lang标签（完整的lang属性可用值，参考http://www.w3.org/TR/html4/struct/dirlang.html#langcodes）

表单

又是XHTML的一大陷阱，看看高手写出来的表单代码和自己写的就觉得自己没学过XHTML。时常可以看到人们这样做：

用br换行
用table布局
使用p和br实现换行

书中是这样建议的：

对于简单的表单尽量不要用table
对于项目的名称，用label包围
简单的表单通过p、label就可以简单的构件
最极端的状态是用dl、dt、dd来写表单，这样的可读性是最高的
设置input等项目的tabindex属性，提高可用性
为常用项目设置accesskey属性
在同一个form下，利用fieldset给项目分组
利用legengd给每个fieldset提供标题

一些实例：



Name:

Email:

Remember this info?

个人的疑虑：这个写法中，dt和dd的个数不匹配，是否完全正确还有待研究。在HTML&XHTML The Definitive Guide中也只是模糊地这样说明：

each item name in a
list is marked with the
tag,followed by the item’s definition or explanation marked by the
tag.


Name:


Email:



Remember this info?



Sign In
Name:


Email:



Remember this info?

短语元素

这个也是极容易混淆的地方，面试前端，也许人家就会问你：“和有什么区别？”
事实上目前实现富有语义的XHTML的最大困难就是设计师不愿意浪费时间来设定这些短语元素。
书中简明扼要的指出：

表示强调
表示更强的强调

和在显示效果上都是粗体，但是能表达语义上的含义，而仅仅进行了视觉上的格式化。当然，这些位置最好使用CSS的font-weight或font-style实现

和和上面同理

Your order number for future reference is:6474-82071. It took me not one,butthreehours to shovel my driveway this weekend.

只有上面这两种写法才能正确表示强调。当然不是要求你不用和，事实上有很多位置只需要对其进行视觉上的格式化。
用来表明引用信息或对其文献的参考说明。示例：

The novel,The Scarlet Letteris set in Puritan Boston and like this book,was written in Salem,Massachusetts.

表示一种简写形式，如WWW、HTTP等，屏幕阅读器将会将其以单个字母地形式读出

表示取首字母的缩写形式，屏幕阅读器将会将其作为一个单词读出

设置和的title属性定义其全称

虽然IE只支持，但我们还是应该按照规范来写页面，该用什么用什么

XHTML NATO

同时，你可能需要设置CSS来让某些不遵从标准的浏览器实现两者的默认行为：

abbr{ speak:spell-out; } acronym{ speak:normal; }

用来展示代码，示例：
#content{ width:80%; padding:20px; background:blue; } 用于显示程序或脚本的运行输出结果 When the script has executed,at the command line you will see the messagescript was successful!. 用于指明程序的变量或参数，示例： I'm going to pass the parameterlastUpdatedto my main.xsl file. 用于指明那些需要有用户输入的文本，示例： To quickly change focus to the search input field,Mac users typeCommand+9. 锚点锚点是互联网中最基本的元素，它的产生出现可以追溯到Internet的第一张网页。锚点的指向页面内部的一个元素，也可以指向网络上的任何一个URL。当你需要让锚点指向页面内部元素的时候，你可以： About Orange ....... Orange are tasty 如果你想设置一个指向头部的链接，你最好不要用"#top"，因为top是一些浏览器的保留字段。可能基于某些向前兼容的考虑，会使用name属性，例如： About Orange ....... Orange are tasty 但不是每个元素都同时支持name和id属性——只有如下标签是支持的：、、、、、、书中还给出了其他建议：给链接一个title属性，写出该链接的提示文字注意链接的全局样式伪类:link可以帮你找到所有有href属性的链接应该用CSS定义样式将链接突出伪类的定义顺序必须是:link,:visited,:hover,:active，记忆诀窍是LoVe/HAte 更多关于列表这一节作者主要讨论了更多形式的列表，比如有序列表和解释列表。构造带序号的列表应该使用ol、li，浏览器会自动为li编号可以定义li的list-style-type来改变编号的类型，可选值为： decimal:1,2,3,4,etc.(commonly the default) upper-alpha:A,B,C,D,etc. lower-alpha:a,b,c,d,etc. upper-roman:I,II,III,IV,etc. lower-roman:I,ii,iii,iv,etc. none:No numeral 注意，不要直接用ol的type属性来改变编号类型。对于解释列表，我们可以用dl、dt、dd来描述，这样做的好处除了语义性强之外，在默认状态下就有很高的可读性。 CSS A simple mechanism for adding style(e.g.fonts,colors,spacing)to Web documents. XHTML A family of current and future document types and modules that reproduce,subset,and extend HTML,reformulated in XML. XML A simple,very flexible text format derived from SGML. 精简代码对于CSS新手来说，随意给元素指定class、id会造成日后维护的困难，而且很容易因为CSS的继承而是你无法实现你想要的效果。作者给出了一些建议不要滥用class 活用选择器来节约id、class 在单个元素，例如form、ul、blockquote等又套一层div是不可取的 Lists Don’t use br to break a line Keep the tag closed Use li with ul In this chapter, Dan use pure css to create a beautiful navi tab, which may inspire you a lot. Heading Use h1~h6 to describe headings Use them in the descending order Here, we get to know The Chameleon Effect, which take advantages of transparent GIF in a IMG tag. When you change the background property of IMG in CSS, you change the background of the image the users will feel. FIRST IMPRESSION See, you just change the background of a “image” through modification of CSS. This will work well when you want add a watermark on your photoes. Tabular Data Table is not evil, and it’s part of XHTMl Spec. Tabular data should be described by table tag, e.g: Calender Spreadsheet Charts Schedules Do with more cautions： Add caption tag to serve as a title of the table Assign summary property to tell users the breif to the table, thus increasing the accessiblity. use th as cell heading use the headers property of td tag to show the relations among the data cell assign abbr property in th to brief the cell heading. This will help screen readers a lot Use thead, tfoot, tbody to make table more sematic. You will be glad to find table heading and table foot will be displayed on every printed talbes. And the author shows us how to create a grid using table and CSS ： table{ border-top:1px solid#999; border-left:1px solid#999; border-collapse:collapse; } th,td{ border-right:1px solid#999; border-bottom:1px solid#999; } Here we set the border-collpase to collpase the gag between cells. Quotations It’s a common pitfall to most designers. Dan lists some methods used widely and tell the goods and bads. For correct quotations: Use blockquote to wrap the content Assign cite property to blockquote, telling us where the quotations come from Use q for inline quotations Assign lang property for q to tell users in which language the quotaions are (Complete list of the availible values for lang: http://www.w3.org/TR/html4/struct/dirlang.html#langcodes) Form Just another perilous pitfall. Good forms and bad ones differ tremendously. Sometiems we find people write some like this: Use br to break a line Use table for layout Use both p and br to break a line Dave suggests： Nerver use table for simple forms Wrap the title of input item with label tag Use p and label for simple forms For ultimate readablity, use dl, dt, dd to describe a forms Assign tabindex property for input tags and other interactable components Assign accesskey property for frequently used elements Use fieldset to group related form items Use legend in every fildset to give a title for this group of items Some examples： Name: Email: Remember this info? In code above, dt and dd are not equally matched, which I doubtly personally. But I can’t prove this wrong as HTML&XHTML The Definitive Guide give only a dim definition： each item name in a list is marked with thetag,followed by the item’s definition or explanation marked by the tag. Name: Email: Remember this info? Sign In Name: Email: Remember this info? Phase Elements These are confusing elements in HTML. You may encounter questions about these when you are applying for a front-end engineer: “What’s the difference between and ?” In fact, most designers are just reluctant commsuming time applying these seemingly insignificant phase elements. But, these are the very important steps to build more semantic pages. Dave points out： means emphasis means stronger emphasis and both make text bold，but convery a sematicly emphasizing meaning，while only does the job of formatting visually。Of course you’d better to use font-weight and font-style other to make text bold or italic and are the same story. Your order number for future reference is:6474-82071. It took me not one,butthreehours to shovel my driveway this weekend. Only the two methods above can show your intended emphasis. is used to contain a citation or a reference to other sources, E.g ： The novel,The Scarlet Letteris set in Puritan Boston and like this book,was written in Salem,Massachusetts. Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.) Indicates an acronym (e.g., WAC, radar, etc.) Assign title properties for and to tell users the full name Although IE only support ，we cannot abandon the use of abbr and desert the will of web standards. Just mark the term up according to the specifications. XHTML NATO There are also two CSS rules that could be added to an aural style sheet to further reinforce these directives: abbr{ speak:spell-out; } acronym{ speak:normal; } The element is designed for demonstrating code examples within XHTML pages. #content{ width:80%; padding:20px; background:blue; } is used to show sample output from programs and scripts. When the script has executed,at the command line you will see the messagescript was successful!. is used to designate a program parameter or variable. I'm going to pass the parameterlastUpdatedto my main.xsl file. Indicates text to be entered by the user. To quickly change focus to the search input field,Mac users typeCommand+9. Anchors Anchors are the soul of internet and they are the citizens since the birth of internet. Anchors can be pointed to any URL on the web or any element inside the page. If you want to anchor directs to other part of the page: About Orange ....... Orange are tasty Don't use "top" as a value if you want to make a link that point to the "top" of the page because "top" is often the keyword in a browser. Taking the compatiblilty issues into accounts, you'd like to use name property as well： About Orange ....... Orange are tasty However, not very elements has both name and id property like the following: 、、、、、、 Dan also suggests： Assign title property whose value can be used in the tooltip when mouse over Beware of global link styling :link pseudo-class can find all the links that have href property You should always highlight the links among the text Ordering the four pseudo-classes mentioned becomes important in order for all of them to behave properly—without one overriding the other. The correct order - :link,:visited,:hover,:active. Maybe this will help you: LoVe/HAte More on list In this chapter, Dan pays more attentions to ordered list and definition list. The browser will automatically number the li with demical number. You can change the way thourgh list-style-type property: decimal:1,2,3,4,etc.(commonly the default) upper-alpha:A,B,C,D,etc. lower-alpha:a,b,c,d,etc. upper-roman:I,II,III,IV,etc. lower-roman:I,ii,iii,iv,etc. none:No numeral Don't use the type property in a ol tag to alte the list style. With definition list, we can use dl, dt, dd to describe it. You will get high readablity in default. CSS A simple mechanism for adding style(e.g.fonts,colors,spacing)to Web documents. XHTML A family of current and future document types and modules that reproduce,subset,and extend HTML,reformulated in XML. XML A simple,very flexible text format derived from SGML. Simplifing Markup For novices, it's too easy to make another class in CSS which will eventually hinder job in the future as you've got too many class to maintaine. Some suggestions: Use class wisely Use descendant selectors instead Wraping the lements like form, ul, blockquote with another div is not a wise decision It’s never about tech Robin — Thu, 18 Sep 2008 06:38:51 +0000 今天把《超越CSS Web艺术精髓》这本书看完了，终于。跟我之前读老外的书一样，感觉废话真多。起初我深刻的怀疑真是再继续榨取《CSS Zen Garden》的商业价值，之后再阅读了很多篇书评后，我像有些迷信似地去寻找这本书。终于我在学校图书馆里翻到了这本书，相信我，书竟然是崭新的…… 书的前半部分是十分玩味的，它将重点放在(X)HTML语言上，讲解网页的语义性实现。当然这少不了Microformats。准确的说它用了四分之一的容量来讲述HTML，讲解如何将设计稿转换为HTML文档。之后，你会高兴地看到作者开始介绍一种设计流程。这个流程的确被大多数设计师采用，好吧，应该叫做“被公开的秘密“吧。作为设计师，你可能读过很多关于平面设计的文章，你会发现里面任何一篇都比这书上写的好…… 再之后，就到了这本书我最喜欢的部分，虽然这些内容依旧不是讲CSS的……这部分在于如何延伸、拓展设计师的思维，如何将自己的作品放得更开。他介绍了一些很有趣的方法，比如看看杂志、电影、摄影之类，收集一些具体的小物件，等等。我个人觉得这是这本书最值钱的地方了。后半部分？拜托，它终于在讲一些定位和CSS3的问题了，不过现在谁在乎了？大概大多数读者都已经忘记这本书的标题里有”CSS“这个词了…… 这就是这本书，一本将布局、设计原理、HTML、CSS混在一起的书，它的售价是69元…… 如果你真的想了解一下优秀的CSS是怎么达到的，也许拥有一本《CSS Zen Garden》是更加实际的选择，再说网上还有N多的文章给你做扩展阅读。忘了告诉大家，《CSS Zen Garden》价值49元，但是已经出版有一段时间，所以都在打折。