PageTalks » XHTML

12 Tips for a More Accessible Website

Robin — Tue, 23 Mar 2010 13:04:43 +0000

Making your website accessible to everyone is not only a moral duty, it’s a legal obligation. Many organizations, including the International Olympic Committee, have been sued for not making their websites accessible enough. With 50 million Americans suffering from some disability or other, improving your site’s accessibility makes clear commercial sense too.

It’s not just those labeled as ‘disabled’ who stand to gain either. Research suggests that 57% of adult computer users will benefit from enhanced accessibility of some kind. Only 19% of websites currently meet the most basic accessibility requirements, so you can really stand out from the competition by making a few changes to your site.

In this article, we explore 12 ways in which you can make your site more accessible. Some methods are very cheap and quick to implement, others require a little more time and financial investment, but you should think of them as business opportunities. With the internet so central to all of our lives these days, it’s unfair that some people are being left behind.

增加可访问性可以笼统的理解为能让更多人有效的理解应用程序所传达的内容。你需要考虑的是一个构造良好的页面、在尽可能多的环境下可用的内容展现、对特殊人士的关怀⋯⋯
老外的12条遵则对中国大多数网站都是对牛弹琴，很可能从成本上我们的项目就无法兼顾这些东西，不过还是很值得学习的，这毕竟是未来的趋势。

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 How to Fvck That Page Robin — Fri, 29 Aug 2008 06:46:03 +0000 为什么你的居中属性没有生效？为什么浮动元素不听你的话？为什么这个图片会这样显示？…… 这样或那样的问题困扰着步入网页设计的每个人，以下就以个人经验来来总结一下解决问题的流程。懒人大法——问你的朋友如果你有同样做网页设计的朋友，可以和他一起研究，也许他早就你想要的答案。至于在论坛论坛求助，就要看你RP了。提前预防——看清楚IE、Mozilla下的CSS支持最踏实的方法就是在此之前就熟悉CSS在主流浏览器里的支持情况，有时候拿着CSS手册看，看到里面说的属性或选择赴多么多么的NB，结果没一个浏览器支持。这方面的讯息网络上已经积累了不少： IE7的官方BLOG，总结了IE7的CSS修正和已知错误 PIE-Position is Everything，IE6时代就存在的怨念群体，总结了很多IE的错误以及解决方案也许你没有想到，Mozilla有专有属性，可能在兼容性问题上你会用到分析显示问题的好文章乖孩子的做法——有时间多读读书如果你有幸从头到尾读下任何一本XHTML教程，你写出来的叶子就算无法正常显示，你也可以问心无愧。写书的，再菜也是这方面有过研究的学者。当然有一本好教材，那才叫如虎添翼。这方面的书籍，基本没有悬念的指向O‘Reilly出版社，就两本：《XHTML权威指南》6TH Edition（EN）5TH Edition（CN）、《CSS权威指南》1ST Edition（CN）2ND Edition（EN）。第二本书的有第三版，但是改动不大，而且只有英文版，不必求新。这些书EM上可以拖到，临时解馋，拥有一本实体书才是最重要的。CSS方面还有一本一定有的书，电子版的CSS2手册。另外最让人想不到的一点是W3C文档，那上面很多东西都是宝! 坏孩子的做法——我用hack我怕谁一般来说是不推荐hack的，但是hack用起来真的很方便，而且如果真的成功了有种解脱了的感觉……汗~下面是我保存下的hack资源： IE7的!important hack 少量CSS Hack CSS Hack图表做个细心人——关注页面可访问性很多时候就算一般浏览器显示正常，也不意味着所有浏览者都能正常阅读。可访问性——这是一个很大的课题，有的人会研究得很BT，往往也和SEO挂上钩，有时候读别人的文章，我会头晕。对于一般网站，我觉得能做到如下一些就好，其他事情可以自行Google：选择合适的DOCTYPE 标记恰当的语言构建具有意义并且独特的标题提供完整的导航工具把你的主要内容提前理性地使用颜色使用真实链接将链接写上title属性，图片上写上alt属性设置键盘快捷方式不要打开新窗口学会使用arconyms 表格头TD标签如果要加粗，请换Caption 别为了布局而用spacer imgaes 使用水平标尺恰当使用Header 用label标签组织表单为每个页面提供搜索选项如果通过以上途径都没有改善问题，那么你能做的只有两件事情：更换你的思路，实现另一种效果等待hack或浏览器更新 Let’s Fvck That Page

PageTalks » XHTML

12 Tips for a More Accessible Website

Print Style in Actions

What I’ve been told

@import Doesn’t Work

What else should be hidden from printers

Override CSS

Where is my LOGO?

Final Result

Digest and Thoughts on Web Standards Solutions – More on Styles

Applying CSS

Use tag</h4> <ul> <li>Browser can&#8217;t cache the css content</li> <li>Bad for maintaince</li> <li>Should only be used in development period</li> </ul> <p>Wrap the CSS content with CDATA tag, e.g:</p> <pre><style type="text/css"> <![CDATA[ ...CSS declarations here... ]]>

External CSS

@import rules

Inline style

Print Style

CSS Layout

Styling text

Image Replacement

Styling

Ending

Public Organizations

Inspiration Blogs

Books

应用CSS

外部样式表

@import规则

行内添加样式

打印样式

CSS布局

设定文本样式

图片替换

为设定样式

下一步

相关组织

创意博客

书籍

Digest and Thoughts on Web Standards Solutions – Basic Markups

列表元素

标题

FIRST IMPRESSION

表格数据

引用文本

表单

短语元素

锚点

Orange are tasty

Orange are tasty

更多关于列表

精简代码

Lists

Heading

FIRST IMPRESSION

Tabular Data

Quotations

Form

Phase Elements

Anchors

Orange are tasty

Orange are tasty

More on list

Simplifing Markup

How to Fvck That Page

懒人大法——问你的朋友

提前预防——看清楚IE、Mozilla下的CSS支持

乖孩子的做法——有时间多读读书

坏孩子的做法——我用hack我怕谁

做个细心人——关注页面可访问性

Use