HTML

我对XHTML不支持target属性的联想

前些日子,本着好奇去下载了微软的 Expression Studio 试用(还不错用),用 Expression Web 的时候,因为它会自动检测文档标准,而我惯用的 Doctype 是 XHTML 1.0 S,结果,我在n多 a 标签的 target 属性下看到了熟悉的红色波浪线……

XHTML 从 1.0 Strict 开始就不在允许在a标签中使用 target 属性了,以前在研究 XHTML 1.1 的时候曾经遇到过这个问题,但是后来渐渐被我遗忘了。于是我又回头去网上查找了各种解决方法,也参考了一些前辈们的想法,而这些想法也改变了我对这件事的认识。

我们知道,a 标签的 target 属性一般最常用于两个地方,一个是控制链接在新标签页(窗口)中打开,另一个则是控制链接在指定的 frame、iframe、弹出窗口中打开。

事实上,W3C委员会是一开始就反对在a标签中使用target。也许有人要问,如果没有target,怎么才能让页面在新标签页或者新窗口中弹出呢?W3C委员会的答复是:设计者没有权利决定用户用什么方式打开页面!

是的!这才是最大的关键所在!经常翻墙上国外Google的朋友也许会有这个印象,英文版的google.com的搜索结果,是在当前页面直接打开的,而不论当年的google.cn还是现在的google.com.hk,都是默认在新标签页中打开的。事实上,正常情况下,所有页面都应该是在当前标签页内打开,哪怕是跨站的链接,如果用户需要从新标签页中打开,他应该很习惯于从右键菜单中选择,或者按住 Ctrl + 单击,又或者一些浏览器中是 Ctrl + Shift + 单击去打开页面。而国内网民们却似乎完全没有这样的习惯,一方面他们习惯于被各种网站上混乱的链接打开方式左右,另一方面,受到这种用户习惯的影响,网页开发人员也只能遵循这一规矩,如果不在链接里加上 target 属性,反而会被客户或项目经理骂吧,而结果就是越走越远的恶性循环而已。

明白了正确的思考方式,再回头来考虑解决方法,当然也时刻不能忘记 HTML 语义化、对人对机器都友好的初衷,那么网上盛传的集中解决方法,哪一种更合适呢?

网上现在一般有2大类解决方法,其中第一种比较冷门,也比较有技术含量了,那就是扩展 DTD。我曾经在一位国人前辈的博客上见过这一解决方法的详细教程,老实说,我基本看不懂。不过 DOCTYPE 可以扩展这件事我倒是知道,似乎官方的规范介绍里就有强调这点。这位前辈在 DOCTYPE 中,除了原有的 DTD 外,再额外加上自己定义的扩展 DTD,从而重新加入 target 属性。这种方法从技术角度来看,似乎是最强大的,但是它也有一个缺点——从本质上来说这其实就是一种规范的倒退,如果不得不通过扩展 DOCTYPE 去实现原先 XHTML 1.0 T 里包括,而在 XHTML 1.0 S 中删除的属性的话,还不如直接使用 XHTML 1.0 T 算了。

另一大类方法就是用 Javascript 去解决了,当然使用 Javascript 也有几种不同的用法,其中一种最笨的办法就是在每个链接里写上 onclick 属性,纯粹用 onclick 去打开窗口,但是这种做法显然弊端很多,首先是工作量很大、不便于维护,另外用户复制链接地址也会失效,而且一旦客户端发生 Javascript 运行错误,或者用户禁用了 Javascript,那整个网站就完全无法使用了。

另一种方法这是用 Javascript 获取整个页面所有的链接元素,然后根据这些链接是否被赋予某个特定的属性,而决定是否要给它附加 onclick 事件。而这个“特定的属性”,一般最常见的是用class。而根据上文的分析,除了 class 属性外,我们还有一个更合适的、更符合语义的、对机器更友好的、更面向未来的属性可用,那就是 rel——对链接赋予一个特定的 rel 属性,说明目标网页与本站之间的关系,进而用 Javascript 将所有此类关系的链接设置为在新标签页(窗口)中打开,这样应该更符合 HTML 规范的本意一些,当然最好的做法还是不要干预。

上文提到,target 属性还有一个用途是控制链接在指定的 frame、iframe、窗口中打开,那么这个很容易理解,因为从 XHTML 1.0 Strict 标准开始,所有的 frameset、iframe 都被禁止使用了,而既然规范也禁止浏览器支配用户打开新窗口,那么控制链接在指定窗口中打开也就毫无用途了。

网页设计审美反思

踏入Web设计师这一行,不知不觉已经有3年时间了。

因为最先接触的启蒙书籍便是Andy Clarke大师的《超越CSS》,以及享誉设计界的《CSS禅意花园》,因此我在Web设计的审美方面,一直是偏向于欧美式的。并且,国内一些老旧的、陈腐的设计与编码,更是加深了我学习前卫Web标准设计的决心。

长久以来我一直以为这种纯欧美式的设计风格,就是我最喜欢的。但是,当我数次更换了我个人博客的主题之后,今天我决定静下心来认真反思这个问题。反思自己的Web设计审美观。

最初的时候,我使用的是WordPress自带的Classic主题,只是自己稍稍修改了一些颜色,该主题的设计者就是《CSS禅意花园》的主要作者之一的Dave Shea。随后我又从WordPress的官方主题库中寻找了一番,选中了BytesForAll的一款Atahualpa主题。这是一款非常简练的主题,除了Logo、搜索、RSS按钮,还有一幅宽大的banner,再无任何图片元素。各个板块之间只是用虚线分割,浅浅的、淡雅的灰色虚线,它表现出的正是整个主题的核心。我在这款主题的基础上做了一些字体、字号、颜色还有图片的优化,让它对中文字体的适应性更好,然后使用了很久。

但是经过一段时间之后,我开始觉得这款主题并不能很好地代表我的审美观,首先它实在太过简单了,我希望的界面风格是要简约+华美,简约和华美并不冲突,既然天底下能有上海政府网这种又繁乱又丑陋的设计,就可以有既简约又华美的设计,只不过非常困难就是了。其次,中文Web设计永远的痛——中文字体,那些基于英文的主题上变换自在的字体与字号,直接拿过来换成中文就只有丑陋两字可以形容,因为不经字体平滑处理的中文没有任何一种字体能够放大到30多px却保持平滑。第三点则是,这种过于简洁的风格无法表达出我想要的一种温馨的、富有情感的效果。

最后,我选中了崔凯先生过去的作品Sunshine,尽管这个主题相比jQ等国外主题,看起来好像很平庸,似乎和国内常见的页面设计风格并无太大的区别,然而这配色与配图却让我产生了些许共鸣。崔凯先生似乎已经不再进行设计了,但我还是应该表示感谢之情。

是的,因为是个人的博客,是个人在繁杂的生活之余,抒发情感的地方,我希望它能够有一个相称的外观。

终于明白了,高于布局、配色、取材等等之上的,一切表象背后的核心,是的,这才是我在Web设计上的终极追求目标——情感。

我所追求的Web设计风格是一种带有情感的风格,一种可以让用户感受到作者想要表达的情感的风格,一种可以带动用户,让用户也渐渐融入作者的情感世界的风格!这不是贴张照片画两条线就可以做到的,不是画个矩形套上阴影和浮雕就可以做到的,不是放个本本中间挖空填点文字进去就可以做到的……

把情感溶入作品中,多少设计师毕生的梦想,这也是普通的设计师与艺术大家的差距吧。不只是平面设计、不只是绘画、不只是文艺、不只是音乐还是别的什么,每一件经由自己双手诞生的东西,哪怕是一行代码,是否有将自己的情感投入其中?是否有这样的意识与觉悟?

引用WordPress中文站下载页的一句话——代码如诗。

一些CSS3新特性介绍及当前浏览器兼容性

回想起我第一次听说CSS3,还是我最早开始学习HTML+CSS的第一本书,Andy Clarke大师的《超越CSS:Web设计艺术精髓》中介绍的,当时别说HTML5了,连IE8还在天上飞呢,然而CSS3却是确确实实被提上日程的东西。一晃好些年过去了,随着HTML5的热度逐步上升,新型浏览器一个接一个地发布,CSS3也再次引起了人们极高的关注。那么现在,我们究竟可以在这些新型浏览器中获得多少CSS3的新体验呢?

我们现在来试试在Opera 10.51、Firefox 3.62、Chrome Dev 5.0.366.2(在大多数的时候可以折射出Safari的表现,故不再单独测试Safari)、IE 9 Preview中,到底能有怎样的表现,又应该怎样去表现。

1、多重背景图

这个是我最早接触的让我眼前一亮的CSS3属性,尤其是有一阵子我想要同时在页头和页尾应用两套不同的背景图并居中的时候。

多重背景图的用法是这样的:

	#div {
	  background-image:
	    url(image1.jpg),
	    url(image2.jpg),
	    url(image3.jpg),
	    url(image4.jpg);
	  background-repeat:
	    no-repeat,
	    no-repeat,
	    no-repeat,
	    no-repeat;
	  background-position:
	    top left,
	    top right,
	    bottom left,
	    bottom right;
	}
	

目前Opera 10.51、Firefox 3.6.2、Chrome Dev 5.0.366.2都能够很完美地支持多重背景图,然而IE9至今还是无法实现,多少让我有些郁闷……

2、RGBA半透明背景色

这个东西我最早是在Opera 10.00的介绍里面了解到的,在实际应用中非常实用,很多地方都可以用到。而且这个新CSS现在受到了非常广泛的支持,上文中提到的浏览器包括IE9和Safari都可以完美地支持RGBA半透明背景色。

RGBA背景色的用法是rgba(red, green, blue, alpha),示例如下:

	#div {
	  background-color:rgba(255, 100, 0, 0.5);
	}
	

与RGBA颜色类似的还有可以使用HSL颜色,方法就是把rgba四个字母替换成hsl三个字母而已。

3、奇偶数选择器

表格隔行不同背景色是现在非常常用的一种表格样式,然而要实现起来却相当困难,不得不给每一行添加class,然后再利用后台程序生成。新的选择器解决了这个问题,并且在上述所有浏览器中可用。

示例表格
Test Table Test Table Test Table
Test Table Test Table Test Table
Test Table Test Table Test Table
Test Table Test Table Test Table
Test Table Test Table Test Table

奇偶数选择器的使用方法如下:

	#tab_test tr:nth-child(odd) /* 奇数行 */
	{
	  background-color:skyblue;
	}
	#tab_test tr:nth-child(even) /* 偶数行 */
	{
	  color:red;
	}
	

4、:target伪类

另一个非常有意思的小东东,不知道现在的Web设计师是否还记得这么个小东西,写一个超链接,将其href=”#test”,然后在页面中随便某个地方找个元素将其id=”test”,然后当你点击这个超链接,页面将会跳转到这个id=”test”的元素这里。:target伪类就是这个功能的一个延伸,它使得你点击这个超链接时,不只是改变页面位置,那个id=”test”的元素还会被赋予某些样式。

  1. 可能因为博客使用了伪静态的关系,这个实例出现了问题,你可以点试试看,不过也许不会出效果……查看示例

它的用法非常简单,在你想被改变样式的目标的选择器后面加上:target就行,比如你想让一个id叫test的元素改变,只要写#test:target就行,当然你也可以用div:target之类更广泛的选择器。这个小东西现在被以上全部浏览器支持。

5、阴影

平面设计时我们最常用的效果就是阴影了……新的CSS让阴影变得容易了,但是IE9还是无法支持到。

阴影的CSS3实现很要命,因为还是实验期的东西,所以Mozilla和Webkit都在CSS属性之前加上了标记以防止误用,而Opera则决定使用原版属性名,所以:

	#box {
	  box-shadow: #333 3px 3px 4px; /* Opera用 */
	  -moz-box-shadow: #333 3px 3px 4px; /* Firefox用 */
	  -webkit-box-shadow: #333 3px 3px 4px; /* Webkit系用 */
	}
	

6、渐变背景色

如果说阴影的写法你已经觉得很要命了,那么我要告诉你,那个毕竟还只是属性名不同……渐变背景色的用法相当混杂,最早响应官方的是Webkit,但是Mozilla也有自己的另一套写法,于是两者的写法不同……另外,IE9继续没支持到。至于Opera,我到现在也没尝试出来它的渐变怎么写,有可能还不支持吧。

	background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
	background: -moz-linear-gradient(top, red, blue);
	

7、被选中文字样式

一个优化细节的好东西,也许日后会被经常用于页面配色的微调吧,目前上述浏览器均已支持,不过Mozilla还是有前缀,Webkit则用了标准名称。

选择这段文字看看效果,对比下选择其他文字时的效果~~

	::selection {
	  background: skyblue;
	  color: pink;
	}
	::-moz-selection {
	  background: skyblue;
	  color: pink;
	}
	

除了上述的个别效果之外,CSS3还有很多更新的功能,包括立体边框、多栏布局、指向变形等等,不过IE6至今仍在警示着我们:革新还有很长的路要走……

放眼未来 编织现在

4.4 结束语

好了,我们已经到了这本书的结尾,接下来是什么?

是未来!

如果你和我一样享受着网页设计的话,你将会发现美好的时光等待着你。你拥有各种机会——几年前我们无法想象的机会——去创造人们喜欢访问的网站。

在CSS刚刚诞生的几年里,网站设计产业就发生了巨大的变化:辅助功能、表意的标签,已经目前Web专家每天都会碰到的CSS。一个真正的专家从来不会停止学习。如果没有不辞劳苦找寻各种解决方案并在休息的时候将这些解决方案慷慨地分享出来的人们,今天的CSS也不可能得到如此广泛的使用。我希望在未来,CSS开发人员能够找出更多令人激动的解决方案,你也可以追随他们的步伐,分享你所学到的东西。

开发和设计网站是一项创意无限的工作,无论你是在写代码,创建数据库,还是进行平面设计,你做的每一件事情都是创造性的。我拥有W3C CSS工作小组的受邀专家的身份,我能够帮助一个具有创造力的设计师,把他的声音带到会议桌,我非常欢迎大家分享自己的想法。如果未来的CSS版本是能同时满足视觉设计师和开发人员的需要的,那么它需要我们所有的人都参与到它朝哪里发展,怎么发展的讨论和争辩中,一起明确它的未来。因此我希望大家都尽力而为,不管贡献大小。

现在可以停止听我唠叨了,去开创未来吧!

——Andy Clarke(“Transcending CSS: The Fine Art of Web Design”)

《超越CSS:Web设计艺术精髓》,英国Web设计大师Andy Clarke所著的这本有着357页正文的经典著作,没有采用国内常见出版物的那种非常紧凑的布局,而有着较大的段间距,大量的各级标题都有特大号的字体与行距(就如Web中常见的那样),每一页都有近半的外边距用于插图和注释,可说文字量并不大,而且读起来绝对不会感觉枯燥。然而,我在一年半前购买的这本书,却到今天才读完(因为中途又去学习了其他的书籍,如《CSS禅意花园》)。

这本书并不是面向Web设计初学者的教材,它更多地在努力引导那些已经知道如何创建“看起来”很好的页面的Web设计师们去了解Web设计的灵魂,去理解怎样编写合理而简练的HTML,理解为何要去努力做到样式与内容分离,以及体验将在不久的未来来到我们身边的CSS3技术。

然而,对我来说,我却把它当成了网页设计的入门书籍给买了下来。

当时的我几乎一个HTML标签也不认识,完全不知道如何在Web页面中书写内容,甚至连“CSS”这个名词都刚刚从同学那里听说。为了完成“软件类课程设计”这门课的期末设计(我使用了PHP语言编写程序),我必须拥有一本教材引导我入门网页设计。然而,在没有仔细阅读前言和目录的情况下,我就因为这本书本身精美脱俗的设计而“无谋”地买下了它。

最后的事实证明,我是幸运的。

在中国买实体教材最容易遇到的问题是,几乎所有的教材的内容都是陈旧的,至少其思想是陈旧的,而且大量的泡沫产品也导致它们的内容是庸俗而千篇一律的。我是幸运的,因为我的起点就在许多人超前。《超越CSS:Web设计艺术精髓》讲述的是当今最先进、甚至是超前的思想,并且不是像说明书那样去讲解每一个HTML标签或每一个CSS属性的功能,而是在试图引导读者领悟如何正确地去思考:“这种内容上应该使用什么元素?”而不是“元素可以使用在哪种内容上”,这使得“思想”这种抽象的东西变得很容易领会。

对我而言,网页设计只是刚刚起步。等待着我去学习的东西还很多,比如我完全没有美术基础,比如我还很不擅长制作自适应宽度的布局,比如对于IE6这些原先已经快从我的记忆中被淡忘的浏览器的支持,比如我对于额外的标签还是非常依赖的(尤其是公司里做网页出的效果图特别喜欢圆角边框,并且几乎要求每一个页面都能适应从800×600到FullHD的所有分辨率)等等。

我身边那些设计网页的人,他们做出的效果图本身就是一个表格的体现,所有的东西全部长得方方正正,并且被按行按列整齐地排列在一起。我曾经设计过一个简单的两列布局,在页面的上半部分(大约700px),左列显示一些重要的文章的链接,右列则是滚动图片和联系方式等小Tips,他们的宽度比大约是3:2,而页面的下半部分则是左右对称1:1的两列不怎么重要的文章链接。结果当我把这个设计提交后,几乎整个办公室的人都诧异地问我:为什么上下两行的列不等宽的?

而我现在要去做的,就是打破这种表格布局时代留下的惯性思维。虽然我没有美术基础,然而对于从未接触过表格布局的我来说,从最初就建立一种不同的思维相对于转换思维要容易得多。尽管我只是不起眼的年轻人,但我将尽我最大的努力去影响我身边的人,让他们明白如何摆脱旧时代的束缚,为何要将样式与内容分离,为何要学习并遵循国际规范,为何要重视特殊人群等。

今天我在这里写下这篇读后感,是为了给自己设立一个标志,从这里开始,前方是新的世界。尽管你可能还是在我那用了他人现成设计的博客上,甚至是我的QZone上阅读到这篇文章,但是我已经开始制作真正属于我个人的主页了。尽管我还是从修改现有博客的样式开始着手(Blogbus的HTML结构非常漂亮,而QZone则是难以修改的表格布局),也许等明年我自己的网站正式上线时它还非常简陋甚至丑陋,但是我相信我可以克服这种艰辛,因为我已经无法也不需要去体验我的前辈们在那些连表格布局都困难重重、CSS甚至都不能正常显示的Netscape3上体验到的艰辛了。

在不久的将来,这篇文章将会如约成为我个人网站的建站序言,而且它的出现将会比HTML5和CSS3普及要更早一些。而我也将继续我的人生旅途,从迈向未来开始。