2009 Jun 26

Digest and Thoughts on Web Standards Solutions – More on Styles

By Robin | Posted in CSS, Layout, XHTML | Comments (0) | Views(525) |
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 <style> tag

  • Browser can’t cache the css content
  • Bad for maintaince
  • Should only be used in development period

Wrap the CSS content with CDATA tag, e.g:

<style type="text/css">
<![CDATA[
...CSS declarations here...
]]>
</style>

External CSS

Insert a link tag inside the head tag:

<link rel="stylesheet"type="text/css"href="styles.css"/>

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. 

<head>
<meta http-equiv="content-type"content="text/html;charset=utf-8"/>
<title>Applying CSS</title>
<link rel="stylesheet"type="text/css"href="lofi.css"/>
<style type="text/css">
@import"hifi.css";
</style>
</head>

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.

<link rel="stylesheet"type="text/css"href="default.css"title="default"/>
<link rel="alternate stylesheet"type="text/css"href="largetext.css"title="large"/>
<link rel="alternate stylesheet"type="text/css"href="largertext.css"title="larger"/>

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
<link rel="stylesheet"type="text/css"media="screen"href="screenstyles.css"/>

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

@media or @import
<style type="text/css">
@import url("screenstyles.css")screen;
@media print{
/* for printers */
}
</style>

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

media accept multiple values seperated by blank：

<link rel="stylesheet"type="text/css"media="screen,print"href="screenstyles.css"/>

or

<style type="text/css">
@import url("screenandprint.css")screen,print;
@media print{
/* for printers */
}
</style>

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

<link rel="stylesheet"type="text/css"media="screen"href="/css/styles.css"/>
<link rel="stylesheet"type="text/css"media="print"href="/css/print.css"/>

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:

box-model-1

But in IE5, sad truth is:

box-model-2

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.

Listamatic- The IE box model and Doctype modes_1246021608084
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).

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 <body>

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:

<ul id="minitabs">
<li id="apples_tab"><a href="/apples/">Apples</a></li>
<li id="spag_tab"><a href="/spaghetti/">Spaghetti</a></li>
<li id="beans_tab"><a href="/greenbeans/">Green Beans</a></li>
<li id="milk_tab"><a href="/milk/">Milk</a></li>
</ul>

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应用到文档上

在文档内部定义<style>元素

  • 这样做浏览器无法缓存CSS文件，降低了页面性能
  • 不利于后期维护CSS
  • 应该仅仅在开发阶段作为调试手段

应该用CDATA标记包围CSS代码，示例如下：

<style type="text/css">
<![CDATA[
...CSS declarations here...
]]>
</style>

外部样式表

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

<link rel="stylesheet"type="text/css"href="styles.css"/>

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

@import规则

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

<head>
<meta http-equiv="content-type"content="text/html;charset=utf-8"/>
<title>Applying CSS</title>
<link rel="stylesheet"type="text/css"href="lofi.css"/>
<style type="text/css">
@import"hifi.css";
</style>
</head>

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

行内添加样式

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

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

<link rel="stylesheet"type="text/css"href="default.css"title="default"/>
<link rel="alternate stylesheet"type="text/css"href="largetext.css"title="large"/>
<link rel="alternate stylesheet"type="text/css"href="largertext.css"title="larger"/>

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

打印样式

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

通过media属性指定
<link rel="stylesheet"type="text/css"media="screen"href="screenstyles.css"/>

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

@media或@import
<style type="text/css">
@import url("screenstyles.css")screen;
@media print{
/*为打印机指定的样式表*/
}
</style>

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

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

<link rel="stylesheet"type="text/css"media="screen,print"href="screenstyles.css"/>

或者

<style type="text/css">
@import url("screenandprint.css")screen,print;
@media print{
/*为打印机指定的样式表*/
}
</style>

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

<link rel="stylesheet"type="text/css"media="screen"href="/css/styles.css"/>
<link rel="stylesheet"type="text/css"media="print"href="/css/print.css"/>

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

  • 应该在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;
}

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

box-model-1

但是在IE5中，结果是这样

box-model-2

解决这个问题，目前不叫实用的只有使用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属性。

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

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

fauxcolumns

"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>设定样式

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

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

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

<ul id="minitabs">
<li id="apples_tab"><a href="/apples/">Apples</a></li>
<li id="spag_tab"><a href="/spaghetti/">Spaghetti</a></li>
<li id="beans_tab"><a href="/greenbeans/">Green Beans</a></li>
<li id="milk_tab"><a href="/milk/">Milk</a></li>
</ul>

在不同的页面给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完成的。

下一步

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

相关组织

  • 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

创意博客

  • 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的高级工程师，书很薄，很快就可以消化，在这里做个小广告
This entry was written by Robin, posted on June 26, 2009 at 11:07 am, filed under CSS, Layout, XHTML. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never shared. Required fields are marked *

*
*

    Most Commented