前阵通过T楼送出了几个腾讯微博邀请码,这次再送个东西,不过次送的不是网络上虚拟的东西了,而一本书,相信搞网站和被网站搞的人都听说过这本书,就是《精通CSS——高级Web标准解决方案》,英文原版名叫CSS Mastery –Advanced Web Standards Solutions,这本书是所有有志于Web标准的人的必备工具书。我就是通过这本书学到了很多东西,很多Web标准和网站重构的知识,理论知识有了较大的提高,无论你现在是在什么层次,这本书是学习CSS的最佳选择之一,差点进入百度工作有它很大的功劳,在这里也顺便向大家推荐一下这本书。
由于dudo的电脑上已经很长时间没有IE6的影子了,习惯了使用多快好省的Chrome和功能齐全的Firefox,偶尔登录ZF网站或者网银一类的用下IE8,虽然公司的所有系统都是IE only,但是我也还是把办公室的电脑升级到了IE8,所以在制作博客皮肤的时候没有考虑(实际上懒得考虑)IE6用户们的需求。直到某一天我在别人的电脑上上我的博客的时候,发现侧边栏下沉了,不过不影响阅读,内容还是能看的…… 后来有一位朋友留言提出了这个问题,看来还是有人很在乎的。
我的博客前期文章中有不少关于CSS方面的文章,特别是在关于CSS3的文章中都提到了通配符的使用(如果你对CSS3中的选择符使用感兴趣可以参考我翻译的详解CSS3中的属性选择符)。里面讲到了CSS3中多种通过符的使用方法,如星号(*)、脱字符(^)和美元符号($)等。而由于星号(*)在CSS2.x中已经得到多数浏览器的支持,所以其使用范围最广。然而它的使用过程中会产生某问题,那么星号(*)通配符是不是就不能用,或者越少用越好呢?当然不是!不过要坚持这样的原则:不要在在深层次的页面结构中使用它;不要在页面的根节点使用它;不要在距离目标节点较远的节点上使用它。最好在父级元素中使用。这样效果和性能可以兼得。
很久前就发现百度存在一个背景设置上的缺陷,不过到现在它还没有更正。而现在这个问题则更加普遍:几乎所有的辨网站都在强制用户使用“宋体”来浏览他们的网页。我不知道他们这样的设置是出于什么目的,但是包括百度、新浪、搜狐、网易、腾讯、凤凰网都是如此,在我常去的几个网站都只有Google例外。很奇怪不是吗?不知道是那些年老的是设计师们从Win98时代遗留下来的习惯还是他们对“宋体”情有独钟,抑或是他们现在还在使用CRT显示器吧。
我们来看看这些网站是怎么强制用户使用宋体显示的:首先,看看腾讯的页面中,直接在CSS定义了用户必须使用宋体显示:
最近,W3C的一项公告称,在W3C与XHTML2的合同于今年年底到期后将不会续签。这意味着W3C停止了对XHTML2的开发,转而大力支持HTML5的规则制定上。
有如我在前面的文章据说的那样“HTML5倍受青睐,XHTML2处境尴尬 ”。XHTML2和HTML5的同时存在让很多Web开发者感到迷惑,因为两种标准是不兼容的,也就意味着你选择了一个就不能使用另外一个,而他们居然都是Web标准!在一种标准的情况下,光web跨浏览器的问题就已经让web开发者们头疼不已,就连语言也出现两种,实在让人无法接受。
数周前,3月20日,W3C放出了其官方网站新界面的Beta版。实际上,这不仅仅是在视觉效果上焕然一新,在网站内容和架构上都发生了不小的变化。
现在你可以通过beta.w3.org访问该页面。你还可以通过关于W3C网站的重构(About the W3C Site Redesign)和视频“重构概览”来了解更多更详细介绍。
你可以分别通过“Web内容可访问性指南2.0(Web Content Accessibility Guidelines (WCAG) 2.0 )”和HTML4.01两个网站体验新版的标准界面。
W3C验证并不是要求你的网站一定要通过,但是它能告诉你你的网站HTML标记语言中的错误。验证器中指出的错误和警告是提示你的XHTML代码还不够完美的重要信号,虽然在不同的浏览器中会看起来并不太一致。下面列出了10常见的错误并附带了解决办法供开发者参考。
在文章开始之前,先给大家几条不错的建议供大家实践。
忽略警告信息。如果验证器显示你的页面中有12处错误83处警告,那么你只需考虑其中的错误项目即可依次修复错误。
按照从下到下的顺序修复其中的错误,因为浏览器在读取HTML代码时是按照从上到下的顺序的,所以你按照两样的方式修复错误最省事。
每修复一项错误即重新验证一次。经常出现的现象是前面的一个错误往往引起下面一系列的问题。同样,有时候,如果方式得当修复一个错误可以修复后面的好几处错误。每次修改之后重新验证可以保证你完全修复页面中的错误。
上面的几条小技巧后,让我们看看我们的网站不能通过W3C验证的10个常见原因。
译者按:CSS2的出现让web顿时丰富起来,特别是web2.0时代CSS成为每个web页面都必不可少的元素。但是随着web技术的发展,CSS2已经不能满足web开发的需求,例如属性选择、AJAX出现后与JS的交互等,因此对下一代的CSS需求越来越明显。目前CSS3还处于草稿阶段,但是其某些特征已经让人兴奋不已。目前主流浏览器Firefox、IE7/8、Webkit等都已经部分地支持CSS3。因此提前了解CSS3是十分必要的。下面提供的20个学习资源中,多数是单篇的文章和访谈记录等,可见这方面的资源还是比较少的,作为一个真正的CSS开发者,走在别人的前面提前了解、运用、研究CSS3也是十分必要的。
Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解,他是这个领域杰出的专家,曾写过不少 CSS 方面的书,是 An Event Apart 的合伙创始人,A List Apart 团队成员,还是 Complex Spiral Consulting 的创始人。另外, Eric Meyer 7年来一直是 CSS Working Group 资格深获邀专家,他们负责维护和开发 CSS。
不用说,如果要找个人请教一些 CSS 方面的问题,Eric Meyer 就是那个人。本文作者日前向 Eric Meyer 提问了7个与 CSS3 有关的问题,以下是 Eric Meyer 对这些问题的解答。
早在今年的4月27日我就写过一篇“百度和Google的差别就在这里”,找出了在Web设计过程中几个常犯的错误中,百度存在忘记设置页面背景颜色的问题。今天在Jeffrey Zeldman的博客中的11月的一篇文章Is your (website’s) underwear showing?,对此456bereastreet对目前Web设计中被普遍忽视的问题做出了说明Remember to specify a background colour。
其实我们知道,作为一个web开发者,他面对的用户使用的操作平台、浏览器等存在千差万别,所以不是想当然地认为天下所有的人都会把页面的默认颜色设置为白色。例如上文中提到的,上个世纪90年代Mac系统上运行的Netscape就是使用灰色作为默认颜色的。
页面中header部分一般位于最上端(有时根据需要也会位于某一侧,不管它在页面中的位置如何,在XHTML代码中它总是优于其它元素先加载),内容主要包括网站名称(Logo,次级标题可能是网站的一句口号等)和网站的导航部分。在推行Web标准的现代网络中,Web中对于header的代码结构似乎已经趋于稳定化。下面是一个典型的header代码结构:
<div id="header">
突然发现自己对Web前端技术掌握得很少很少,就是自己最感兴趣的XHTML+CSS部分知道也不算多。在XHTML 1.1规定的诸多元素中,我平时能用到的只有那么几个,有一半吧,其余得很少在设计中用到。这并不是说没有可以使用的地方,而是自己对他们的使用缺乏了解,即便他们的使用范围本来就很窄,但是他们能从HTML过度XHTML中,说明他们有不可替代的地方。在不断追求Web标准的今天,前端开发者们应该让每个XHTML标签都有用武之地,否则更不用谈什么Web2.0了。
在Web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式。一旦一个标准的XHTML代码写完之后,那么CSS可以实现其实百变面孔。其实XHTML是一个演员,CSS是编剧,XHTML演什么角色,都由CSS来决定的。这听起来似乎有点理想主义,实现起来似乎就没有那么容易了。不过我还是想通过一个简单的例子来说问题。
前面的文章,主要讲到如何使用无序列表ul元素来实现复杂柱状图,但是在Web标准中,除了注重表现外,更加注重语意,所谓的语意就是样式和内容的相关程序。在前面举到例子中,要实现销售记录一览,使用ul或者dd dt dl虽然可以实现想要的效果,但是如果不过表现,只看HTML代码的话,很明显,这堆代码基本上语意比较差,或者说单看HTML代码看不出你想要表达什么样的效果。在Web标准中,列举数据元素时,最好使用table元素来实现,这才是table的用武之地。在这一节里,我们就尝试使用table来实现复杂的柱状图效果。不过已经有人早就尝试过这个试验了(CSS Vertical Bar Graphs),为了和本节形成比照,前面的例子也是按照这个效果制作的。
在前面的文章中,我分别介绍了基于列表元素柱状图和基于表格元素柱状图的实现方法,虽然方法比较简单,但是它却包含了基本的实现原理。在仔细研究了上面的图形之后,我们发现,大体可以把这个柱状图分为以下几个部分,首先按季度分为四个组,然后再按区域划分两组,也是先分大组再分小组,组内分组。有了这样的印象之后,我们就可以开始构建页面元素。在选择页面元素时,不但要考虑代码片断最优还是考虑代码的语意和可读性。很显然,使用div来实现这样的总局可能不够简洁,因为是组内再分组的情况,而div没有子元素,所以会产生多层div嵌套的情况,因此不能作为首先。综合上面的考虑,我们可以使用列表元素来实现,首先,列表元素有子元素,而且从语意上说也比使用div更符合要求。这里我选择了使用无序列表
在第一部分中,我们主要讲解了一下如何用列表元素来实现柱状图效果。其中需要特别注意的就是相对定位和绝对定位的的使用。在本节中,将来讨论一下使用表格元素
来创建一个柱状图的过程,这其中用到的关键技术还是相对定位和绝对定位的知识。
在开始之前,我们要先确定一下列表元素和表格元素到底有哪些不同。如果去除他们在浏览器的表现来说的话,他们基本上没有差别——都是有嵌套的(x)html标签而已。他们的不同主要是体现在在浏览器中的表现样式上,但是我们要实现的柱状图效果,无论采用了哪类方式实现,最终还是要具有差不多的外观。所以我们可以抛开细节不去管,不管