关注前端开发/网页设计/网站可用性/用户体验
导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素。
虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的关键,但视觉效果也不能影响到网站可用性。最理想的设计是网站的导航既能比其他网站的导航外观更吸引人,又不会夺走网站内容的焦点。
大多数网站都很注重自己网站的站内搜索这项服务,在网站首页放置搜索表单以提高网站可用性已经成为网站设计的重要环节。但令人惊讶的是一些网站未能实现在页面读取出来以后自动将光标放在搜索框内,这是的网站用户如果来到网站的第一个动作是搜索,他们需要用鼠标单击搜索框或按下tab键将光标移到搜索框,甚至有少数网站连表单的tab按键索引都没有设置。
任何东西只要跟Google有关就总能给我们带来点儿惊喜,2008年9月2日发布的Google Chrome浏览器也不例外。Google Chrome在发布之初就以它的全新特色和完美的运行速度给大多数用户留下了很好的印象。虽然目前已经有很多关于Google Chrome运行速度的测试,比如暴风彬彬之前介绍过的《Google Chrome速度完胜Firefox、IE、Safari》,但现在暴风彬彬要介绍的是国外另一位牛人进行的更全面的CSS选择器速度测试和对比,他将时下流行的所有浏览器的都进行了相关测试,最终比较测试结果,下面就来看看测试结果吧:
在设计网页时,没有比页面的外观更重要的了。所以,如果发现设计人员十分关注字体及字体大小,我并不感到惊奇。使用CSS来编辑字体有各种各样的方法,每位设计师都会有自己偏爱的设计习惯,但必须选择更能提高用户体验的方法。今天暴风彬彬将集中讨论字体大小的控制来体现更多的用户体验。
现在国内绝大多数的站点都用CSS把字体大小设定为12px,像素虽然也是相对尺寸单位,但只是相对于屏幕的分辨率 ,当屏幕的分辨率一定时,如果你 感到字太小,阅读有困难,在非标准浏览器中就无能为力了,从而降低了用户体验。所以说,如果把单位改成em,那么就可以用CTRL+鼠标滚动把字放大,或者用菜单上的查 看>文字大小来改变字的大小。
以下CSS Hack适用于Google Chrome及Safari3.1浏览器,经过下面的代码定义,只有Google Chrome及Safari3.1浏览器中的段落文字才会显示为红色,因为:
1.网页仅仅有一个bady元素
2.仅仅这两个浏览器支持伪类nth-of-type()
3.body:nth-of-type(1) 将匹配唯一的那个body元素.
body:nth-of-type(1) p {
color: #333333;
}
关于Chrome对CSS的支持情况,请看这里

确切的讲它应该是最好的之一,因为还有一个浏览器也同样支持CSS选择器相当全面,那就是Apple的Safari3.1。虽然Google Chrome才发布三天,而且评价褒贬不一,但是他的技术、内核以及现在谈论的CSS支持确实是其他浏览器所无法比拟的,至少它的速度还没有多少人质疑过!
Google Chrome使用的是safari正在使用的引擎AppleWebKit,版本是525.13,而Safari3.1使用的是最新的版本525.18,具体有什么差别我也不太清楚。至少它们都支持CSS3选择器。
下面是 Engage 公司的前端开发工程师Estelle 测试整理的Google Chrome对CSS选择器的支持情况,并与其它浏览器进行了对比:
FF3出来有一段时间了,本站对此版本的FF也发布了几篇相关文章。针对FF3的CSS HACK好不容易找到。
MOZILLA 已经对FF所有 3.0一下版本实行了 更新3.0的推送。
大部分都是3.0了,以前的HACK又失效了。
下面的代码是最新的FF3的HACK。只有 FF3支持。呵呵
#hack, x:-moz-any-link, x:default {
/* Firefox 3 style here */
}