8月11日,dudo博客搞了一个 T楼,送一本《精通CSS(CSS Mastery)》的活动,活动符合规则的第51楼网友将获得dudo赠送的《精通CSS(CSS Mastery)》书籍一本。到今天,规例条件的第51楼已经产生了……
我的博客前期文章中有不少关于CSS方面的文章,特别是在关于CSS3的文章中都提到了通配符的使用(如果你对CSS3中的选择符使用感兴趣可以参考我翻译的详解CSS3中的属性选择符)。里面讲到了CSS3中多种通过符的使用方法,如星号(*)、脱字符(^)和美元符号($)等。而由于星号(*)在CSS2.x中已经得到多数浏览器的支持,所以其使用范围最广。然而它的使用过程中会产生某问题,那么星号(*)通配符是不是就不能用,或者越少用越好呢?当然不是!不过要坚持这样的原则:不要在在深层次的页面结构中使用它;不要在页面的根节点使用它;不要在距离目标节点较远的节点上使用它。最好在父级元素中使用。这样效果和性能可以兼得。
最近,W3C的一项公告称,在W3C与XHTML2的合同于今年年底到期后将不会续签。这意味着W3C停止了对XHTML2的开发,转而大力支持HTML5的规则制定上。
有如我在前面的文章据说的那样“HTML5倍受青睐,XHTML2处境尴尬 ”。XHTML2和HTML5的同时存在让很多Web开发者感到迷惑,因为两种标准是不兼容的,也就意味着你选择了一个就不能使用另外一个,而他们居然都是Web标准!在一种标准的情况下,光web跨浏览器的问题就已经让web开发者们头疼不已,就连语言也出现两种,实在让人无法接受。
自HTML 5 和 XHTML 2规范草稿公布以来,一直存在很大的争议。HTML 5是由包括Google、Mirosoft、Mozilla、Opera、Apple在内多家浏览器厂商共同起草的下一代web规范。而XHTML 2则是由W3C工作小组起草提交的。HTML 5 和 XHTML 2最终都被W3C接受成为候选方案,从此HTML 5 和 XHTML 2便成了相互竞争的两种标准。不过最近浏览器厂商们对HTML 5表现出了前所未有的热情,让XHTML 2的处境略显尴尬。
前不久结束的Google I/O大会上,Google演示了一系列基于HTML 5技术之上的web应该,其中包括离线存储、用户交互、2D绘画等,并表示将来在Adroid和Chrome中加大对HTML 5的支持。微软也表示在下一的浏览器中逐渐加入对HTML 5的支持。网上对HTML 5 和 XHTML 2的比较有不少很好的文章,都值得参考,这里我不想说太多技术上的东西,只谈谈自己对于HTML 5 和 XHTML 2两种标准的理解。
即使页面上只有一个元素它也是一个矩形的盒模型。其大小、位置、行为都可以通过CSS来控制。这里的行为是指当盒模型内部以及周围的内容发生变化时的表现。例如,如果你没有给一个盒模型指定一个高度,那么它就会随着内容的增加变得越来越高。但是如果当你为盒模型指定一个高度、而其内部的内容不能与其完全匹配时又会怎么样呢?这时就要用到CSS中的overflow属性了,它允许你来设定如何处理多余的内容。
overflow有四个属性:visible(默认属性)、hidden、scroll和auto。此外它还有两个姊妹属性:overflow-x和overflow-y,这两个使用的相对较少。
今天突然发现一个很奇怪的问题,一些专注于CSS和XHTML、Web 2.0和Web标准的网站都在探讨如何去掉当鼠标点击时超级链接周围的虚线框(outline)如,outline:none 或者 outline:0。可能有时候默认出现虚线框(outline)会影响美观,但是它的存在必然有它的道理:那就是提高网站的易用性,特别是给使用键盘导航的人带来极大的便利。我们在讨论语义化,易用性的同时却总在做与其背道而驰的事情。
一、虚线框(outline)给键盘导航带来便利
我在阅读文章的时候有个习惯:极少使用鼠标,基本上全部靠键盘。而使用最多的就是Tab键、PageUp、PageDown、Entern还有四个方向键。Tab键用来导航超级链接,可以在不同超级链接之间切换,选中某链接之后直接按Enter进入(现在你就可以使用Tab键在本页上看看效果)。当Tab键聚焦(focus)某链接时这个链接的周围就会出现一个虚线框(outline),代表这个链接已经处于焦点状态,确定即可访问。当然很多人可能会说,使用鼠标多么方便啊,干吗用键盘?在这里我想说几个理由。
首先感谢aw5186网友在本站的留言,是他的留言让我意识到了这个误区。
长久以来,我们都口口相传Internet Explorer 6是不支持CSS中的!important属性的,这不仅体验在从一些高手那里传授过来的经验,网络上的教程中,甚至在某些经典教程中都存在这样的认识误区。包括在CSS Matery (作者:Andy Budd等)也没有提及CSS中的!important在Internet Explorer 6中的问题。此书中讲到的CSS Hack技术也使用了我前面那篇文章中的说法。不过,按照我的(或者说是大多数人的)习惯,基本上都不会发现CSS 中的!important会存在问题。
浏览器对于CSS的支持问题落后于CSS的发展,以占有市场绝对份额的Internet Explorer来说,直到其前不久发布的第8个版本才刚刚完成对CSS 2.1的完整支持,而CSS的最新进展是CSS 3规范的制定已经行了一大半。但是这并不妨碍我们使用CSS中的新技术。虽然我们不能像使用CSS中的通用技术那样随心所欲地应用他们,但是却可以在特定浏览器中达到更加生动的效果。在适当的地方使用这些新技术,不但可以让你站在CSS技术的最前沿,更可以使你的作品给人耳目一新的感觉。
数周前,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两个网站体验新版的标准界面。
译者注:我在前几天的博客中翻译了一篇《20个对学习CSS3大有裨益的资源》的文章,其中推荐了Get started with CSS 3,本文为其中文译本,转载请注明。
本文在发表时,Firefox 3.1还没有问世,现在其版本已经更新到了3.5,Opera也已经更新到9.6。当时还没有Google的浏览器Chrome,而现在Chrome已经升级到了2.0版本。不过Chrome和Safari都属于webkit系浏览器,因此在CSS 3的支持上差异不大。Internet Explorer也已经更新到了8.0,但是可惜的是它仍然不支持border-radius属性。
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也是十分必要的。
在浏览几个网页时,发现有几个网站在显示时间时存在问题,比如今天是2009年1月4日,但是有的网站上却赫然写着今天是109年1月4日(这里有个例子就是中国银行的网站首页)。这是一个奇怪的问题,可看这些网站的代码,大致如下:
var today;
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就是使用灰色作为默认颜色的。
今天下午打开邮箱的时候,发现收到了来自Google的一封试用Google Friend Connect的邮件,经过一段时间的测试并且参考一篇Google Friend Connect试用报告,其实总结来说,Google Friend Connect就是让“一些非社区网站也希望拥有社区功能”,Google早在今年5月份就透露了这个项目的存在,Google表示,这一功能能够为任意网站添加社区功能,帮助网站增加流量。
什么是网站的社区功能?