解读OOCSS

面向对象的 css 已经提出多年,并已经在业内获得了很大的成功,但是你对这种思想了解多少呢?反正我是因为不甚了解才去读了读下stubbornella / oocss 的 FAQ 页面,才疏学浅,希望大家去看项目的地址:https://github.com/stubbornella/oocss/wiki/FAQ

OOCSS中”对象”的意义

我使用了一个 Java 或者 PHP 语言的对象的概念来描述面向对象的理念。(虽然他们在的复杂程度并不一致)

一个css对象由下面四部分构成:

  • HTML,它可能是一个或者多个Dom节点。
  • 关于这些节点的css声明,这些文档节点被包含子一个有样式名的父节点里面。
  • 用于展示背景图片和拼合图片的组件。
  • 和这个对象相关的 Javascript 交互,媒体或者与之相关的其它方法。

这可能会让人迷惑,因为 CSS 样式并不是对象本身所必需的,但是可以拥有一个容器样式属性。

比如:

<div class="mod">
        <div class="inner">
                <div class="hd">Block Head</div>
                <div class="bd">Block Body</div>
                <div class="ft">Block Foot</div>
        </div>
</div>

一个对象就是一个模块,由模块的样式来标示。它包含四部分节点属性(这些不能脱离模块独立存在,包含两个必须的区域,inner 和 body,另两个可选的区域,头部和脚部。)

OOCSS 如何提升性能的?

页面的性能优势的提升可以归纳为两个方面:

  1. 1.高重用率的CSS代码,这样就能减少代码,这也就意味着:
    • 更小的文件,更快的传输速率。
    • 高比例的css代码在大多数站点的页面下重用而可能被浏览器缓存下来。
  2. 对于浏览器来说更少的继承关系,和更少的页面重绘和布局计算。

在一个单独的页面中,如果css 规则重用的越多,浏览器渲染引擎花在计算最终值的时间越少。

我需要使用 ID 来定义内容的样式吗?

这里有两个不使用ID定义内容样式的原因。

  1. 它们有更高的权重,使权重计算变乱了。(这是最主要的原因)
  2. 它们有唯一性,这样组件在一个页面中只能使用一次,无法在重用。

当我们在一个页面中重用对象(如果缓存正常的话整站都可重用),那样子,它就不会有任何的性能开销。通过ID定义样式的话就无法在相同的页面使用两个相同的元素。与看上去更准确描述的ID相比,class 更有效。这里也可能有些情况你希望使用ID定义样式,比如 头部的导航非常特殊。因此在使用ID定义样式前,你必须仔细考虑它比 class 带来的益处是什么。你无法预期在网站的发展过程中,什么人会使用你的样式构建HTML。如果可以选择,那就让其越宽松越好。

我在我的模板中移除了 head,body,和 foot 的id。因为某些人可能会有多重的主内容区域。虽然暂时无法预计有多重的头部和页脚,但是也不能保证某天会有设计师去这么做,因此 id 定义样式的意义就没有了。

另一方面,ID 作为js的hook更好。将其放到HTML的原因并不是为了定义样式。

设计师不能编写OOCSS,是吗?

设计师本能的理解对象,他比我们大多数目前在编写css的人更关注于此,当然也有一些例外(这就像看到一个老妇人吃苍蝇一样难受)。事实上,他们喜欢OOCSS有两个主要的原因。

  1. 当创建高访问量的网站时,通过这种方式能加快产能。他们不必非要搞清具体的结构才开始,他们可以创造合理的组件和基本的逻辑构造。
  2. 学习CSS的过程,他们不必从丑陋的“Hello world” 开始。设计师可以只去关注那些美的东西。如果他们必须从基础学起,他们会很快的感觉受到挫折或者迷惑。OO-css 让他们在每个学习阶段的的作品都很漂亮。

设计师是聪明的。我们必须给其足够的信任。他们可以说出不同于工程师的语言,大多时候工程师说的语言都比较晦涩。我们可以比工程师做的更好。

我是一个前端构架师,我如何将此介绍给我的团队

作为架构师,你应该写结构对象;创造如何设计圆角,定义四个角的呈现方式和其它的特点,并处理浏览器的兼容问题。新手写这些模块的皮肤(边框,颜色,背景图片等)

我通过使用OOCSS的方法创建了一个大规模的网站(1000多个页面,百万计的访问者)。因为处理得当,它的扩展性良好,这就意味着当新手着手一个个性的组件时,它能对其有相对准确的预期。Code review 也相对更容易,因为它们的规则更清晰,通过合适的方法扩展这些对象。这种反馈也让新的开发者的效率更高。

我在 FullSix(一家法国的网络市场机构) 负责一个前端开发团队,这些人是我所遇到一起工作的的最后天赋的同事。从某些方面说我们的成功是我们可以处理更多工作内容。雇佣专家级的前端是很困难的(这里并没有培训这些家伙的学校!)。因此我们开始对那些对代码领域感兴趣的设计师的内部培训internal internship program where designers who were interested in exploring code,这些人以前并没有类似的工作经验,这些人一个月之后成为我们团队中的高级人员。

  1. 第一周:他们了解语义和根据已有的css创建HTML。学习在不增加CSS的情况下创建新的页面,HTML 语法,多重样式,验证,语义化,学会代码审核,等
  2. 第二周:他们用一周的时间创建基本的内容对象(标题,列表,等等)。学习CSS语法,如何让扩展对象,颜色,文字大小等。
  3. 第三周:他们创建皮肤块。边框、颜色、背景图片,基本的定位,图片拼合技术。他们和高级工程师一起工作,这些工程师为他们解答那成吨的问题,这样就大大的降低了学习曲线。高级工程师也能同时带领他们成为一个有才华的代码审核者。
  4. 第四周:他们成为一名我们线上产品工程师中的一员,在生产环境下创建皮肤。

他们的代码在客户的线上网站上,看上去和高级工程师写的一样好,或者说更好,因为他们没有那些坏习惯。

我如何使用那些文件开始我的工作

这里有三个文件,libraries.css(重置和字体来源于YUI),grids.css 和 template.css 是需要准备好的,其它的还不确定。

  1. 下载整个项目通过下载按钮
  2. 打开 tempalte.html 并另存为新文件。
  3. 通过扩展这些对象使列宽适合。对你的网站来说你只需要一个tempalte,即使你有一些页面的列数是不一样的,因为列和其它东西一样也是对象。你可以把它们当成是可选区域,你可能需要0到多列左栏。获得更多信息请查看模板文档说明。
  4. 使用栅格来将内容区域分割成更小的片段。更多信息查看关于栅格的文档说明。
  5. 增加内容,注意,这也是使用OO思想。
  6. 拷贝和粘贴模块和对话框,对其增加内容
  7. 创建新的模块样式基于“mod_skin.css”。

我如何对线上已有的项目应用这种方法?

需要注意的是css仍然是在进展中的,根据反馈的信息我可能会做出调整。

我将css文件分割成 grids 和 模板。在真实的网站中你可能需要减少不要的内容来减少HTTP请求,否则网站将会变的很慢。这就意味着你需要将多个CSS文件拼合成一个大文件。我曾经使用嵌入评论,来保持css的组织性。最终上线的时候我会通过压缩/部署流程来移除评论内容。

我能编辑这些文件,或者通过我自己的样式覆盖它们吗?

我不会编辑grids,模板或者库文件,因为有太多的东西和它们有关系。如果你想定制他们,考虑一下使用扩展对象的方法吧extending the basic objects

粉色不是我想要的颜色!对 content.css 我能做什么?

你可能非常希望能编辑 content.css。或者更多的内容如颜色、文字大小、大写等。请记住这个文件更新很快,而且没有文档告诉你什么是对的,我现在正在做这一块。

未完待续

关于像素的是是非非

注:这是一篇两年前的文章,现在看来依然能给大家带来不少启发,作者做预期的方案已经开始广泛实施。文中有些地方翻译的有失准确,见谅。

我现在在研究扩浏览器手机设备的宽高方面搞的我焦头烂额,但是我可以声明这些硬件的变化,99%的和网页开发没有任何关系。

但是剩下的这1%就变得更棘手了,我希望苹果能通过增加一个中间像素层来解决这个问题。(后面John pointed out 指出这个中间层在 Android 系统下早就存在了。)

在我们开始之前我必须做一个说明:因为这些东西对网页开发人员并不是那么重要,因此我大多数情况会忽略掉正式的屏幕尺寸,同时我也没有真正的去研究关于显示、像素密度和其它负责的理念。因此我可能会使用了错误的专业术语,对此先道歉。

网页开发工程师需要啥?

我知道网页开发工程师所关心的,他们需要像素(pixels).也就是说,他们需要“pixels”让他们可以在css声明中使用 如 width: 300px or font-size: 14px.

这些像素值和实际的设备像素密度没有一点关系,甚至和传闻中的中间层也没有任何关系。对网页设计是来说,它们是一个基本的抽象的结构。

如果我们通过缩放来解析这个东西,可能会更容易理解。如果用户放大,一个有 width:300px 的元素将会在屏幕中越来越大。如果我们用设备的(物理的)像素来测量的话,它也会变的越来越大,根据需要通过放大的作用我们可以通过扩展css 像素的大小。

当缩放比例刚好是100%的时候,一个css 像素等于1个设备像素(因此传闻中的中间层的像素值将和替代设备像素值)。下面的图片描述了这种情况,我们看不到多出来的东西,因为css的一个像素刚好覆盖了一个设备像素。


(我必须提醒你的是,放大到100%在web开发中的意义并没有意义。放大级别对我们来说不重要,我们需要的仅仅是我们当前的显示器多少像素最合适。)

下面的两幅图谱阿布描述了用户使用放大功能时的情形。第一幅图像表现当用户缩小时,设备的像素点(深蓝色背景)和CSS像素(半透明的前景)。CSS中定义的像素变的更小,一个设备像素包含多个CSS像素。第二幅图像展示了当用户放大的时候,设备像素和css像素之间的关系。现在一个CSS像素覆盖在多个设备像素上面。

因此,我们用CSS定义的一个宽度为300像素的元素它的宽度任何时候都等于300像素,一个像素等于多少设备像素值取决于我们放大的程度。

(你可以通过使用 screen.width 除以 window.innerWidth 得出这个系数。 目前浏览器的不兼容还是挺普遍的;期待在不久的将来有个相对全面的报告。另外,作为网页开发人员你也不会关心放大系数,而仅仅关心多少像素(设备的或者CSS的)才能适应设备屏幕)。

这套系统并没有改变,否则,所有针对iPhone 优化过的站点将立刻变成没有优化过的,这也是苹果要不惜一切代价避免的。

因此,一个即使是放大到最大程度的网站依然显示980 CSS 像素的原因,我们也不会关注有多少设备的像素和它刚好合适,这对我们并不重要

最棘手的问题

这里有两个棘手的问题:device-width 的媒体查询技术 和 <meta name=”viewport” width=”device-width” >标签。这两个都是基于设备 像素的,而不是 CSS 像素,因为他们报告的是页面的内容,而不是CSS生效的内容。

媒体介质查询

device-width 媒体查询测量的设备宽度使用的是设备本身的像素值。width 的媒体查询技术测量的是页面中CSS定义的页面像素值,在iPhone 上面,这个值最少是980px像素,这个我将在后面给大家解释。

device-width 媒体查询技术的工作流程是下面的样子:


div.sidebar {
width: 300px;
}

@media all and (max-device-width: 320px) {
// styles assigned when device width is smaller than 320px;
div.sidebar {
width: 100px;
}

}

现在边栏(siderbar)的宽度是css定义的300像素,除非设备的宽度等于或小于320像素,在这种情况下它才能变成100 CSS像素宽度。(如果你继续看下去,这个将变得很复杂。)

顺便提一下,从理论上来说你可以通过厘米或者英尺来应用媒体查询技术(@media all and (max-device-width: 9cm)。但是不幸的是好像并不被完全的支持,甚至是iPhone 设备。原因是物理单位类似于英尺一般会被转换成(css)像素,我在所有浏览器上测试,绝大多数情况 width:1in 等于96像素。因此这些媒体查询并不可靠。

<tag>标签

通常情况下,<meta name=”viewport” width=”device-width”>更有用。这个属性,最初是苹果设备的专用属性,但是现在被越来越多的浏览器所支持,使视窗布局和设备完全匹配。

那么什么是视窗布局呢?这是一个区域(使用CSS像素),浏览器通过使用百分比的方式计算元素的尺寸,比如 div.siderbaer{width:20%}.一般情况下在iPhone设备上会比设备的屏幕980像素大一些,Opera 850像素,Android 800 像素,等。


如果你增加了 <a name=”viewport” width=”device-width”>,视窗的布局将会被限制在设备像素宽度内;在iPhone 设备下是320像素。

如果你的页面足够窄来适应屏幕。将页面CSS中的 width 声明全部去掉和不使用 <meta> 标签。这样就能将内容延伸到适应整个视窗宽度的页面。

这可能并不是你要的结果。你期望文本能完美的适应屏幕,那这就是 <meta name=”viewport” width=”device-width”> 了。当你把它加进去的时候,页面的视窗布局就会伸缩(在iPhone下到 320px),这样子文本就能适应了。


苹果的改变

当苹果分辨率变化时会对 device-width 媒体查询 和 meta 标签产生影响吗?当然我还不能确定,但是我希望对页面开发没有任何变化。

meta 标签

meta 标签方面最容易解释。Apple 专门发明它,为了让用户在iPhone 上的内容呈现更精准,并不遗余力的推广给开发者。这也意味着通过 <meta> 标签读出的设备宽度不会改变。

事实上, Nexus One 是Apple的开路先锋。它的官方屏幕宽度(在竖屏下)是480px,但是当你部署 <meta>时,它会吧屏幕宽度定义为 320px,是官方宽度的 2/3。

如果我理解的正确,这就是 John Gruber 讨论的talking about Nexus 的显示和它会丢失额外的一像素,这就导致了比实际像素数少了 1/3.这样子就使 Nexus 得到的<meta>准确。

从基本上说 Google 已经增加了一个被称为dips的层;device-independent pixels。这个层来自于官方,被称为屏幕尺寸和网站开发者使用的CSS像素。

应此我希望新的iPhone也使用 Nexus 的方法,当我们使用<meta>标签媒体查询将屏幕尺寸汇报为320px(也就说是正式分辨率的一半)。它将是一半而不是2/3,因为新iPhone的像素密度比Nexus 高更多。

媒体查询

这样就剩下 dveice-width 媒体查询成了一个唯一的问题区域。当Nexus使用480px作为屏幕宽度的时候,事实也证明320像素可能更合适。我们将会看看Apple在这方面怎么做。

另一个重要的问题是,是否把中间层(dips)也作为媒体查询的一个条件。总体上我希望是这样,事实的设备宽度对网页开发人员来说并不重要,我们希望知道我们能在屏幕上呈现多少内容,dips 中间层看起来更能适应这个要求。

不幸的是,Nexus 现在并不支持,目前媒体查询技术还仅仅关注 device-width 仍然是480px,而不是 320px。但是可能 Apple 能为网页开发者解决这个问题。

因此现在的情况对普通网站和使用 <meta>就比较明朗了;当使用媒体查询的时候,问题就变的复杂了。

让我们拭目以待。

中文原文:关于像素的是是非非
英文原文:A pixel is not a pixel is not a pixel
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

使用CSS3媒体查询技术创造响应式设计

显示器的分辨率的范围越来越宽泛了,从苹果的 320px(iphone)到 2560px(大显示器其)甚至更大。用户浏览网页的的设备也不仅仅是桌面电脑了。现在用户使用手机,上网本,平板电脑设备如iPad 或者 Playbook 等来登录网站。因此传统的固定宽度的设计的方法将不再适用。网页设计需要更广的适应性。布局需要能自动适应的分辨率和解析设备。下面的教程将会大家展示如何通过HTML5和 css3 的媒体介质查询技术 创建跨浏览器的响应式设计,

View Demo Responsive Design

Download Demo ZIP

看效果先

在我们开始之前,先让我们看看最终的效果final demo。缩放你的浏览器来看其布局的基于视窗的变化。

overview

更多的例子

If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr.

概要

页面容器的宽度为980px,这样的宽度对分辨率大于1024px的设备来说是比较合适的。媒体介质查询技术将会检测视窗是不是小于980像素的宽度,然后布局将会从固定宽度的布局转换成流动布局(fluid width)。当视窗小于650px时,将会扩展内容容器和边栏为全部宽度时期成为单独一列布局。

overview

HTML 代码

在这里我就不赘述HTML代码了。下面就是主要的布局结构。这里有一个 “pagewrap” 容器,包含 “header”,“content”,“siderbar”和“footer”。

<div id="pagewrap">

	<header id="header">

		<hgroup>
			<h1 id="site-logo">Demo</h1>
			<h2 id="site-description">Site Description</h2>
		</hgroup>

		<nav>
			<ul id="main-nav">
				<li><a href="#">Home</a></li>
			</ul>
		</nav>

		<form id="searchform">
			<input type="search">
		</form>

	</header>
	
	<div id="content">

		<article class="post">
			blog post
		</article>

	</div>
	
	<aside id="sidebar">

		<section class="widget">
			 widget
		</section>
						
	</aside>

	<footer id="footer">
		footer
	</footer>
	
</div>

HTML5.js

请注意我在例子中使用了html5标签。IE9一下的浏览器将不支持这些标签元素,比如<header;><article;><footer;><figure;>等等。包含 html5.js 文件将会是这些浏览器明白这些新元素。

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS

将新HTML5元素初始化为块元素

下面的css代码将会初始化HTML5元素为块元素(article, aside, figure, header, footer, etc.)。

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

主结构CSS

和上面一样,这里就不再赘述css的细节了。主“pagewrap”容器的宽度是980px,头部设置一个固定的高度160px。“content”容器设置为600px并且左浮动,“sidebar”容器280px宽右浮动。

#pagewrap {
	width: 980px;
	margin: 0 auto;
}

#header {
	height: 160px;
}

#content {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#footer {
	clear: both;
}

Demo

下面就是设计的例子。请注意媒体查询技术还没有被使用。当你缩放浏览器窗口是,你将看不到布局的缩放。

css3 媒体查询那些事

下面就到了最有意思的地方-媒体介质查询media queries

引入媒体查询javascript库

IE8和更老的浏览器不支持css3的媒体查询。你可以通过加入css3-mediaqueries.js 让其在这些低版本的浏览器中生效。

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

加入媒体查询

为媒体查询创建一个新的样式表文件。请查看我的上一篇教程,了解如何使用媒体查询技术media queries

<link href="media-queries.css" rel="stylesheet" type="text/css">

小于980px的视窗是使用流布局(Fluid Layout)

小于980px的视窗时,下面的规则生效:

  • pagewrap = reset width to 95%
  • content = reset width to 60%
  • sidebar = reset width to 30%

技巧:使用百分比的值,让其容器自适应。

@media screen and (max-width: 980px) {

	#pagewrap {
		width: 95%;
	}

	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

}

视窗小于650px时(一列布局)

接下来,我们创建另一个css文件,应用于视窗小于650px的时候。

  • header = 将高度重置为 auto
  • searchform = 重新定位搜索表单,将其放在距顶5像素的位置。
  • main-nav = 将其位置重置为static
  • site-logo = 将其位置重置为static
  • site-description = 将其位置重置为static
  • content = 将其宽度重置为auto (这样可以将其容器扩展到整个宽度) 并且去掉浮动
  • sidebar = 将宽度重置为100%并且清除浮动。
@media screen and (max-width: 650px) {

	#header {
		height: auto;
	}

	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
	}

	#main-nav {
		position: static;
	}

	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#sidebar {
		width: 100%;
		float: none;
		margin: 0;
	}

}

视窗小于480px时

下面的样式将会应用于视窗最大为480时,这个宽度刚好是Iphone竖屏时的宽度。

  • html = 取消文字大小调整功能。通常,iPhone将会将文字变大,以便于更方便阅读。你可以将这个属性关闭通过增加-webkit-text-size-adjust: none 的方法.
  • main-nav = 将其文字的大小调整为90%
@media screen and (max-width: 480px) {

	html {
		-webkit-text-size-adjust: none;
	}

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

}

灵活的图像

为了使图片更灵活,我们可以简单的增加 max-width:100% 和 height:auto 属性。图像 max-width:100% 和 height:auto 在IE7中能很好的工作,但是在IE8中却不可以(这确实是IE的Bug)。为了修复这个问题,你可能需要增加 width:auto\9 来针对IE8 hack。

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

灵活的嵌入视频

为了让嵌入的视频更灵活,我们也会使用上面的技巧。因为未知的原因,max-width:100%(针对嵌入的元素)并不被Safari所支持。在这方面我们可以用 width:100% 来替代。

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

初始化meta标签

通常,iPhone Safari 浏览器会缩放HTML页面来适应iPhone的屏幕。下面的 meta 标签将会告诉iPhone Safari 浏览器去使用设备的宽度来作为视窗的宽度,而不去初始的缩放。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

最终效果

final demo

查看最终效果,然后缩放你的浏览器看效果。别忘记在iPhone,iPad,Blackberry上面查看效果,使用 Android 手机查看移动版本。

总结

1.媒体查询技术的向后兼容

css3-mediaqueries.js 能够使不支持媒体查询技术的浏览器支持这种技术。

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

媒体介质查询技术

通过使用css根据视窗宽度来覆盖布局结构,创造出响应式设计的技巧。

@media screen and (max-width: 560px) {

	#content {
		width: auto;
		float: none;
	}

	#sidebar {
		width: 100%;
		float: none;
	}

}

灵活的图片

使用 max-width:100% 和 height:auto 来使图片更灵活。

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

灵活的嵌入媒体

使用 width:100% 和 height:auto 使嵌入的视频更灵活。

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

Webkit 浏览器文本缩放:

使用 -webkit-text-size-adjust:none 禁用iPhone 浏览器的文本缩放功能。

html {
	-webkit-text-size-adjust: none;
}
重置 iPhone 视窗 和 初始缩放

下面的meta标签将会在iPhone重置视窗和初始缩放:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

中文原文:使用CSS3媒体查询技术创造响应式设计
英文原文:Responsive Design with CSS3 Media Queries
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

再谈css媒体介质查询技术

以前谈论过的东东:CSS3 媒体查询 视频教程

css3 增强了媒体样式表的支持,让样式表更精准。一个媒体介质查询有媒体类型和至少一个媒体特点表达式组成,比如宽、高、和颜色等。媒体介质查询可以在不改变内容的前提下,根据输出设备的范围,精准的呈现。

语法

媒体查询有媒体类型和一个或多个表达式组成,包括媒体特性,这样就组成了一个 真 或 假 的表达式。如果媒体查询语句中的媒体类型和媒体特性都匹配的话,结果及为真。

如果媒体查询的结果为真,形影的样本规则生效。

如果媒体查询中 既没有使用 not 也没有使用 only, 媒体类型也是可选的,这样将会被认为是 all.

逻辑操作符

你可以通过使用逻辑操作符,包括 notandonly 组成复杂的媒体查询。

同时,你可以使用多重媒体查询,将其用逗号分隔,组成一个媒体查询表,如果在一组查询中,有一个查询的结果为真,那么相关联的样式表就会生效。这相当于逻辑操作符or

关键字 not 将会与媒体查询结果相反;比如,“all and (not color)” 因为媒体类型其将只在黑白的访问设备上显示。

我们可以使用 only 关键字来针对不支持媒体查询技术的老浏览器隐藏相应的样式:

		<link rel="stylesheet" media="only screen and (color)" href="example.css" />
		

操作符优先级

操作符 not的优先级很低。比如,在下面的代码中,not会被最后计算:

		@media not all and (-moz-windows-compositor) { ... }
		

这就意味着,这条查询语句的结果和下面一样:

		@media not (all and (-moz-windows-compositor)) { ... }
		

或者这样:

			@media (not all) and (-moz-windows-compositor) { ... }
			

像另一个例子,请看下面的查询语句:

		@media not screen and (color), print and (color)
		[/css]
		</p>
		<p>
		它等于下面的语句:
		
		@media (not (screen and (color))), print and (color)
		

Pseudo-BNF(你喜欢的那些事情)

		media_query_list:  [,  ]*
		media_query: [[only | not]?  [ and  ]*]
		  |  [ and  ]*
		expression: (  [: ]? )
		media_type: all | aural | braille | handheld | print |
		  projection | screen | tty | tv | embossed
		media_feature: width | min-width | max-width
		  | height | min-height | max-height
		  | device-width | min-device-width | max-device-width
		  | device-height | min-device-height | max-device-height
		  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
		  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
		  | color | min-color | max-color
		  | color-index | min-color-index | max-color-index
		  | monochrome | min-monochrome | max-monochrome
		  | resolution | min-resolution | max-resolution
		  | scan | grid
		  

需要注意的是,媒体查询语句对大小写是敏感的,如果使用了未知的媒体类型,这个查询的结果将总是假。

注意,媒体查询的表达式必须用括号;否则将会产生错误。

媒体特点

大多数媒体特点将会加上一个前缀“min-” 或者 "max-" 来表示“大于或等于” 或者 “小于或等于”的限制条件。这里禁止使用 ">" 或者 "<" 符合,因为这样将会和 html 或者 XML 文档相冲突。如果你的媒体特点没有定义值,如果媒体特点的值非零,那么这个表达式的结果将会是真。

注意:如果媒体特点在设备运行的浏览器上不支持,表达式的结果总是假。例如,媒体查询的款高比率在盲人设备上结果总是假。

颜色

Value:
<color>
Media:
visual
Accepts min/max prefixes:
yes

表示输出设备的每种色彩的位数。如果设备不是彩色的设备,那么这个值将总是0.

如果出处设备的每种颜色组成的位数不同,将会使用最小的值。例如,如果蓝色使用5位,绿色使用6位,那么设备将会使用5位。如果设备使用索引色,每种颜色的在颜色表中的最小位数将会被使用。

例子

对所有彩色设备使用样式表:

@media all and (color) { ... }

针对最少4位颜色的设备使用样式表:

			@media all and (min-color: 4) { ... }
			

颜色索引

Value: <integer>
Media: visual
Accepts min/max prefixes: yes

根据设备输出的颜色表来匹配。

例子

对所有彩色设备使用样式表:

@media all and (color-index) { ... }

针对至少有256索引色的设备使用下面的样式表:

		<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
		

宽高比

Value: <ratio>
Media: visual , tactile
Accepts min/max prefixes: yes

用来描述输出设备的目标显示区域的宽高比。这个值由两个正值,并通过“/”分开。这将会表现水平(第一个值)和垂直(第二个值)的比率。

		@media screen and (min-aspect-ratio: 1/1) { ... }
		

这样将会在比率大于1:1的显示区域中应用样式。

设备宽高比

Value: <ratio>
Media: visual , tactile
Accepts min/max prefixes: yes

用来描述输出设备的款高比。这个值由两个正值,并通过“/”分开。这将会表现水平(第一个值)和垂直(第二个值)的比率。

例子

下面的语句将会针对宽屏显示器显示:

		@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
		

上面的语句将会在比率为 19:9 或者 16:10 的设备中使用相应的样式。

设备高度

Value: <length<
Media: visual , tactile
Accepts min/max prefixes: yes

描述输出设备的高度(整个屏幕或者页面,而不仅仅是渲染的区域,类似于整个文档窗口)。

例子

当屏幕的宽度小于800像素是,应用样式:

		<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
		

设备宽度(device-width)

Value: <length<
Media: visual , tactile
Accepts min/max prefixes: yes

描述输出设备的宽度(整个屏幕或者页面,而不仅仅是渲染的区域,类似于整个文档窗口)。

grid

Value: <integer>
Media: all
Accepts min/max prefixes: no

检索输出设备是否为网格设备(grid device)或者位图装置(bitmap device),如果是基于栅格的设备,(如 TTY 终端 或者只有一种字体的手机),这个属性值将会是1,否则为0;

例子

下面的代码将在只能显示15个字或者更少的手持设备上显示:

		@media handheld and (grid) and (max-width: 15em) { ... }
		

注意:“em”单位对栅格设备有特殊的意义;因为“em”不可能被定义为绝对的宽度,1em 被假设为横向宽度/纵向高度为一个单元的格子。

高度(height)

Value: <length>
Media: visual , tactile
Accepts min/max prefixes: yes

height媒体特点描述了输出设备的可视区域(及页面的可视区域或者分页介质的高度)。

注意:当用户改变窗口大小时,firefox会基于媒体介质查询,通过高度和宽度的特点,来转换相应的样式表。

单色显示(monochrome)

Value: <integer>
Media: visual
Accepts min/max prefixes: yes

该属性表示每个像素的bit数。如果设备不是单色,那这个设备的属性值是0.

例子

下面的样式将会被应用到所有单色设备

		@media all and (monochrome) { ... }
		

将样式表运用在至少每个像素点有8bits 的单色设备上:

		@media all and (min-monochrome: 8) { ... }
		

方向(orientation)

Value: landscape | portrait
Media: visual
Accepts min/max prefixes: no

用来确定设备的显示模式是横屏(显示的宽度大于高度)还是竖屏(显示的高度大于宽度)

例子

针对竖屏显示的样式表:

@media all and (orientation: portrait) { ... }

分辨率(resolution)

Value: <resolution>
Media: bitmap
Accepts min/max prefixes: yes

用来表示输出设备的分辨率(像素密度)。像素可能会被定义为一英尺有多少个点(dpi)或者一厘米有多少个点(dpcm)。

例子

下面的代码表示将会对分辨率大于每英尺大于300点的设备应用样式:

		@media print and (min-resolution: 300dpi) { ... }
		

扫描(scan)

Value: progressive | interlace
Media: tv
Accepts min/max prefixes: no

用来定义电视输出设备的扫描方式。

例子

下面的代码将会被用在隔行扫描的电视设备上面:

		@media tv and (scan: progressive) { ... }
		

宽度(width)

Value: <length>
Media: visual , tactile
Accepts min/max prefixes: yes
width媒体夜店用来描述输出设备的渲染的区域(如文档窗口的宽度,或者打印机的页面宽度)。

注意:当用户改变窗口大小时,firefox会基于媒体介质查询,通过高度和宽度的特点,来转换相应的样式表。

例子

如果你想针对手持设备或者显设备的宽度大于20em时,你可以使用下面的语句:

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

下面的媒体查询语句将针对打印媒体的宽度大于8.5英尺时使用:

		<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" />
		

下面的样式表将在可视区域的宽度介于500 和 800 像素之间时使用:

		@media screen and (min-width: 500px) and (max-width: 800px) { ... }
		

Mozilla 定义的媒体特点

Value: <number>
Media: visual
Accepts min/max prefixes: yes

每个css像素在设备中占用的像素点。

注意:这个媒体特点在 webkit 的浏览器中也有对应 -webkit-device-pixel-ratio.在 Gecko 浏览器中,最大最小值被用下面的方式命名 min--moz-device-pixel-ratio 和 max--moz-device-pixel-ratio ,但是在 webkkit 内核中,是下面的样子 -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio

此处请阅读原文,我们仅仅介绍一下 -moz-device-pixel-ratio

-moz-device-pixel-ratio

浏览器兼容性

桌面设备

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 3.5 (1.9.1) 9.0 9.5 4
grid ? -- (grid media type is not supported) ? ? ?
resolution ? 3.5 (1.9.1)
supports <integer>
values;
8.0 (8.0)
supports <number>
values, as per the spec.
? ? ?
scan ? -- (tv media type is not supported) ? ? ?

移动设备

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) ? (Yes) (Yes)

原文地址:CSS media queries

关于iPad3 和媒体查询技术的几点看法

移动和非移动的设备间的界限越来越模糊了,我们有平板电脑和上网本,他们介于手机和桌面电脑之间,甚至我们使用其他的设备,比如游戏机来浏览网页,这些设备有不同的屏幕尺寸,分辨率和像素密度.现在Ipad3 来了,在这块 9.7 英尺的的屏幕上,拥有比大多数桌面显示器更高的像素点。在这么多屏幕尺寸不同的设备上显示网站而不去为移动版本写单独样式的方法就是使用css媒体介质查询技术,特别是 min-device-width and max-device-width 查询技术。

尽管如此,min-device-width and max-device-width 无法分辨ipad2 和Ipad3,因为Ipad3和Ipad2给出的分辨率依旧是 1024X768, 就像在iPhone4中使用的媒体查询技术一样得到的结果和iPhone 3GS 一样。产生这样的结果的原因是比较容易理解的,因为他们的屏幕尺寸是一样的。如果Ipad3报出了准确的分辨率,网站针对 Ipad2作出的优化将会把Ipad 3当成台式电脑的处理器来处理。此外,如果没有可以宽展的样式来讲特定的尺寸加倍,大多数网站将不可阅读。来将其与其他设备分辩开来的方案就是使用媒体介质查询的 -webkit-device-pixel-ratio,如果属性值为 2 ,将被使用在视网膜显示技术的设备上,也就是 iPad3 或者 iPhone4+.如果值是1,将会被认为是普通屏幕,因为只有某些webkit浏览器支持此属性,你可以认为2将会覆盖默认的属性1.

绝大多数桌面显示器我们都假设为 72ppi(每英尺的像素点),也就是说一个288像素宽的图片将会占据屏幕4英尺的空间。但是在 iPad3 原生的解析度(264ppi),相同的图片仅仅是1英尺的宽度。因此,除非我们特别告知,视网膜显示屏技术将会使呈现的像素点数量增加一倍,这将会使文字非常的清晰和锐利,因为它使用了两倍的像素点。但是在图片方面,视网膜显示技术的优势如果仅仅是将分辨率提高一倍的话就没有了。如果将你的图片在iPad3上的的尺寸提高一倍,你的图片也会像文字一样锐利和清晰。缺点是你现在你的图片使用了四倍的像素(两倍的高和宽),图片也会更大,使用更长时间的加载时间。更优的质量和更快的速度之间你要做一个权衡。

在某些情况下,你有必要为移动版本单独开发做开发。是否需要做这些取决于你和每个项目的特点。但是另一方面,必须明白的将开发分为移动版本和非移动版本是局限的。iPad(包括其他平板电脑)拥有移动设备的特点,但是它们的屏幕尺寸相比手机能适应更多的网站。除了移动版本和非移动版本之外,你还需要考虑是不是需要一个专门给平板电脑访问的特殊版本。通过使用媒体查询技术,你可以适应这些不同的屏幕分辨率,同时这也很有前瞻性。

我认为大多数网站都是单一的一个可以快速访问的版本,媒体介质查查询技术使其可以在不同的平台良好的工作。但是我们也必须意识到它并不是唯一的技术。基于媒体介质查询使用轻量级的js库同样可以应对多重图像分辨率的问题,或者通过background-image属性为小屏幕的提供不同的图像,防止加载的过大的图像。必须要注意一些设备,特别是iPhone,对隐藏的元素也加载背景图片,因此隐藏元素的方法来阻值加载背景图片是无效的。事实上,定义一个默认的背景图片,然后通过媒体介质查询技术将其默认的图像覆盖,但这将会导致加载两次图像。产生不同背景的两个背景图像的方法也是使用媒体产介质查询技术。一个使用 max-device-width 另一个使用 min-device-width。

如果你的网站使用单一的版本来适应所有的设备,那你肯定能够不想重复加载,特别是针对那些小设备。如果我们从一个较小的版本开始,然后渐进增强将是一个很好的方法。如果处理得当,我们的而外好住那就是如果不支持媒体产讯的设备将会得到一个较小的版本。像前面提到的需要关注图片的问题一样,其它用到的资源你也必须记住。比如,你有一个比较大的js库来处理一些高级的技术,但是这些高级技术你并不希望在显示给手机端用户,那么加载这个大而没有效果的js库是没意义的,那就需要使用一个小的javascript解决方案,用它来判断是不是需要加载这些大的库。甚至额外的HTML也会导致页面膨胀,如果你的网站有很大比例的内容内容是对移动端用户隐藏的,你就需要将其分成多个版本,或者使用aJax技术只在桌面端显示这些部分。对于这些小屏幕的用户,除了要考虑他们的屏幕因素外,这些设备通常在处理器和内存方面的处理能力也有限,更经常会有一些连接上的局限。为他们提供服务时也需要把这些因素考虑在内。

中文原文:关于iPad3 和媒体查询技术的几点看法
英文原文:Thoughts on Media Queries and the iPad 3
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

details 和 summary 元素

曾几何时,我们创建可以显示/隐藏一些内容的小组件时,我们不得不使用Javascript.有时候你可能不得不为这个小功能,下载一个完整的 JS 库才能达到这个功能效果.为下面的时刻欢呼吧!HTML5提供了创建这种拖拽特点的方法,我们仅仅需要简单的几行html代码就能获得这种效果(从目前而言,这种效果还依赖于使用的浏览器,当然,在不久的将来,这可能不是问题).下面让我们一起来看看 <detail>元素.

下面就是规范中的描述

The details element represents a disclosure widget from which the user can obtain additional information or controls.

理论上我们可以用它创建那种折叠的小组件,用户可以有打开和关闭的交互.在<details>我们可以放入我们任何想放入的内容.

浏览器的支持情况

在我们开始之前,实际一点,让我们看看目前浏览器的支持情况,目前只有chrome支持 <details > 元素.Opera很快就会支持Opera will support it soon,让我们来用chrome演示这种效果吧.

<details 的使用方法

这里有两个相关的元素:<details>和可选的see this in action over at jsbin.这是一个简单的例子但是可以将效果完美展现的代码,没有任何Javascript.

OPen 属性

在上面的例子中,在页面加载的时候内容是隐藏的。我们可以将<detail>默认的视觉属性通过布尔值作修改,让其当我们加载页面的时候是展开的:

<details open>
  <summary>Show/Hide me</summary>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details>

注意,这里并没有 closed 属性,因为只要你移除 open 属性,执行的就是 closed 属性效果。

<summary>元素
我们已经简要的看了

的作用。因为它是短语内容,我们可以使用内联 (inline)标签 <span;>。我们为什么会有这种想法呢?也许这样子能更方便的通过而外样式控制显示效果或者像 spec 建议的那样:为一个表单元素增加一个 <label>标签。如果他能生效的话,至少能让我很顺手:

<details>
  <summary><label for="name">Name:</label></summary>
  <input type="text" id="name" name="name" />
</details>

常理看,我们点击 summary 的任何位置都应该展开 <detail>元素的内容。但是在这个例子中,我们点击<summary>并没有展开内容,因为你点击的是<label>他会将焦点放到 <input>标签-即使那部分内容被隐藏在<details>标签。
很明显,在这点需要更好的声明,你认为这个地方应该发生什么事情呢?可能某个浏览器生产商能看一下这个效果。

<details>元素多层嵌套

你可以在<details>中嵌套<details>,可以完美的案例查看这个效果:

<details>
  <summary>Question 1</summary>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  <details>
    <summary>Related documents</summary>
    <ul>
      <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>
      <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>
    </ul>
  </details>
</details>

使用案例

在哪些情况时会用到 <details>?FAQ表可能是我们最先涌现的想法。大家经常使用手风琴效果是用在FAQ列表,所以 <details> 是这一效果的最佳效果。
考虑到这一系列内容,它可能被固定在某一区域,当我们滚动内容的时候。像这样子?
你也可以使用<details>来操作博客的评论内容,用户简介,下载列表,复杂的表单,或者像规范中描述下面的应用:

An example of the <details> element from the spec

实际上,只要你看看我写的wordpress,会发现有大量的使用 <details>的机会。让我们在评论中了解一下你的观点和想法。

样式格式化

你如何对这个定义样式?同时,在webkit浏览器中我们可以使用伪类样式 ::-webkit-details-marker。你可以看到这个小的案例:

details summary::-webkit-details-marker {
  background: red;
  color: #fff;
  font-size: 500%;
}

我们也可以将这个小组件定位。这里是向右浮动的这就是我们初始化效果。
我们如何将默认的组件Icon自定义呢?那就是用 属性选择器 (attribute selector),你可以用来检测 <details>元素是打开的还是关闭的,然后为其定义一个合适的背景图片。我们咋下面的例子中作了一个类似的效果,使用 :after pseudo-element元素定义成我们喜欢的背景图片:

summary::-webkit-details-marker {
  display: none
}
summary:after {
  background: red; 
  border-radius: 5px; 
  content: "+"; 
  color: #fff; 
  float: left; 
  font-size: 1.5em; 
  font-weight: bold; 
  margin: -5px 10px 0 0; 
  padding: 0; 
  text-align: center; 
  width: 20px;
}
details[open] summary:after {
  content: "-";
}

在上面的例子中,我们使用文本 “+”和“-”来定义这个组件的状态,根据你的设计需要,你可能希望使用 :before来代替 :after,这两个为类元素都可以使用 image.
details的[open]属性选择器能创造很多有意思的可能性。因为我们是好医生,下面是我们装饰后的效果,下面是截屏效果:

Details element in Chrome
Styled <details> element in Chrome

如果我们可以用过css的动画效果来修饰打开和关闭时的状态,这样设计就更完美了,但是目前为止我们还没有办法做到这点。

可访问性

不幸的是在我们写这篇文章的时候,<details>h还无法通过键盘访问,Steve Faulkner 写到

Bottom line is, currently no keyboard support and no usable information exposed to assistive technology.

自己试一下,如果你使用鼠标打开 <details> 元素,你可以使用键盘到达内容部分,但是你无法使用键盘打开和关闭区域。所以目前这并不是理想状态,不过我们相信这个小国很快会被改进。

向后兼容

在我们抱怨其在IE6中无法生效之前,感谢这些聪明的人们,我们可以提供优雅的像狗兼容。这些效果也被列在下面的网站very handy collection of cross-browser polyfills,这两个都需要 jQuery:

<script>
  if (!('open' in document.createElement('details'))) {
    alert("No details");
  }
</script>

更新:感谢的评论。上面的代码并不是100%可靠,因为他在某些chrome版本下会失败。你可以使用this Modernizr snippet

我们为何使用这种类型的交互?

言归正传,为什么会有这个效果在HTML5中?就像其它HTML5的效果,使用这种效果能够更简单。比如时间选择,Date pickers, sliders, progress indicators, 现在这种手风琴效果就可以在不使用JavaScript的情况下更方便实施。谁能想到下一个是什么?如果是 tabs 标签那就好了。

总结

在这篇文章中,我们阐述了如何去使用<details>和<summary>元素。<details>是一个新元素,通过和<summary>元素通过浏览器可以创造手风琴的交互效果。

目前,<details>只能在 Chrome 工作,不过我们期待这会在不久的将来有所改变。这里只有一个css trick我们可以使用 ::-webkit-details-marker,但是我们拥有很多的其它css。让我们在评论中知道关于<details>元素你在这方面的经验和想法。

中文原文:details 和 summary 元素
英文原文:The details and summary elements
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

用丰富网页摘要和结构化标记(RDFa)告诉搜索引擎更多信息

众所周知,搜索引擎(Google Baidu)是众多互联网服务商必争之地。无论是电子商务商,内容提供商他们都看十分重这个战场。通过SEO SEM各种手段,来获得浏览者的一次点击。那么就用户体验来说,我们能在搜索引擎端做点什么文章呢?也许很多都觉得除了 标题(Title) 描述(description) 关键字(keywords),我们不能再做些什么帮助搜索引擎来了解我的这个页面了。其实,你错了。Google给了我们一个机会,让你的用户在搜索的时候更快速的看到你页面中那些让人感兴趣的有用信息。

那怎么办到的呢?引入了正题:

丰富网页摘要(微数据、微格式和 RDFa)

这个规范似乎非常抽象,而且绕嘴。英文的原意为Rich snippets (microdata, microformats, and RDFa),似乎还稍微的好理解一些。那么关于丰富网页摘要和结构化数据,其实就是前端工程师,通过使用微数据、微格式和 RDFa (microdata, microformats, and RDFa)标记方法编辑HTML源代码,将一些有用的信息第一时间传递给搜索引擎(Google),帮助 Google 更准确地理解和呈现您的网页信息。

光用文字描述似乎有些抽象难以理解,下面我们看个例子,你就会恍然大悟,^皿^:

豆瓣使用RDFa提供给Google抓取《1988 我想和这个世界谈谈》
豆瓣使用RDFa提供给Google抓取《1988 我想和这个世界谈谈》

我们看到的是google在抓取豆瓣提供的页面的时候,得到的信息,在标题下面那一行评分 打分次数便是RDFa再发挥作用~~~

那么豆瓣们是怎么办到的呢,他们是怎么和Google这个大佬谈谈的呢,而作为一个草根站长是不是也可以和这个老大谈谈呢?答案是肯定的。当然目前,Google 只支持以下信息类型:评论、用户个人资料、商品、商家信息、食谱和活动。

下面就介绍三种方式,把你页面的秘密告诉Google。

使用微数据(microdata)标记内容,将信息讲给Google

Microdata 实际上是 HTML5 提出的规范,是一种标记内容以描述特定类型的信息。微数据使用 HTML 标记(常为 <span>或 <div>)中的简单属性为项和属性指定简要的描述性名称。

下面是一个简单内容的HTML结构:

<div>
My name is Bob Smith but people call me Smithy. Here is my home page:
<a href="http://www.example.com">www.example.com</a>
I live in Albuquerque, NM and work as an engineer at ACME Corp.
</div>

用Microdata进行标记后的HTML:

<div itemscope itemtype="http://data-vocabulary.org/Person">
  My name is <span itemprop="name">Bob Smith</span>
  but people call me <span itemprop="nickname">Smithy</span>.
  Here is my home page:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  I live in Albuquerque, NM and work as an <span itemprop="title">engineer</span>
  at <span itemprop="affiliation">ACME Corp</span>.
</div>

Microdata Person Demo
Google抓取到信息:

Google抓取到微数据提供的信息图例
Google抓取到微数据提供的信息图例

当你使用微数据时,你要注意引用规范集 也就是 itemtype=”http://data-vocabulary.org/Person”,当然当你的页面描述其他信息的时候

  • Reviews (itemtype=”http://data-vocabulary.org/Reviews”)
  • People(itemtype=”http://data-vocabulary.org/Person”)
  • Products(itemtype=”http://data-vocabulary.org/Products”)
  • Businesses and organizations(itemtype=”http://data-vocabulary.org/Organizations”)
  • Recipes(itemtype=”http://data-vocabulary.org/Recipes”)
  • Events (itemtype=”http://data-vocabulary.org/Events”)
  • Video 这个比较特殊稍后再谈

使用微数据(microformats)标记内容 将信息讲给Google

微格式是网页上使用的简单规范(称为实体),用于描述特定的信息类型。通常情况下,微格式使用 HTML 标记(常为 <span><div>)中的 class 属性为实体及其属性分配简要的描述性名称。

下面是一个简单内容的HTML结构:

<div>
   <img src="www.example.com/bobsmith.jpg" />
   <strong>Bob Smith</strong>
   Senior editor at ACME Reviews
   200 Main St
   Desertville, AZ 12345
</div>

用Microformats进行标记后的HTML

<div class="vcard">
   <img class="photo" src="www.example.com/bobsmith.jpg" />
   <strong class="fn">Bob Smith</strong>
   <span class="title">Senior editor</span> at <span class="org">ACME Reviews</span>
   <span class="adr">
      <span class="street-address">200 Main St</span>
      <span class="locality">Desertville</span>, <span class="region">AZ</span>
      <span class="postal-code">12345</span>
   </span>
</div>

Microformats Person Demo

Google抓取到的信息:

Google抓取到微格式提供的信息图例
Google抓取到微格式提供的信息图例

当使用微格式Microformats作为结构化描述的时候,我们应该注意class=” ” ,Google是通过这个类标记来获得结构信息的:

  • Reviews (class=”hreview”)
  • People(class=”vcard”)
  • Products()
  • Businesses and organizations(class=”vcard” class=”fn org”)
  • Recipes(class=”hrecipe”)
  • Events ( class=”vevent”)
  • Video 这个比较特殊稍后再谈

使用RDFa标记内容 将信息讲给Google

RDFa 是标记内容的一种方式,用于描述特定的信息类型,通常情况下,RDFa 使用 XHTML 标记(常为 <span><div>)中的简单属性为实体和属性分配简要的描述性名称。

下面是一个简单内容的HTML结构:

<div>
My name is Bob Smith but people call me Smithy. Here is my home page:
<a href="http://www.example.com">www.example.com</a>.
I live in Albuquerque, NM and work as an engineer at ACME Corp.
</div>

用RDFa进行标记后的HTML

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person" >
  My name is <span property="v:name">Bob Smith</span>,
  but people call me <span property="v:nickname">Smithy</span>.
  Here is my homepage:
  <a href="http://www.example.com" rel="v:url" >www.example.com</a>.
  I live in Albuquerque, NM and work as an <span property="v:title">engineer</span>
  at <span property="v:affiliation" >ACME Corp</span>.
</div>

RDFa Demo

Google抓取到RDFa提供的信息图例
Google抓取到RDFa提供的信息图例

使用RDFa进行标记,要注意的是开头使用 xmlns 的命名空间声明。在结构开始使用xmlns:v=”http://rdf.data-vocabulary.org/#” 命名空间声明,然后选择不同的类型进行描述。比如上例里面的 type=”v:Person” 注意在调用声明的时候一定要使用结尾斜线和 #

  • Reviews (typeof=”v:Review-aggregate” )
  • People(typeof=”v:Person”)
  • Products()
  • Businesses and organizations(typeof=”v:Organization”)
  • Recipes(typeof=”v:Recipe”)
  • Events (typeof=”v:Event”)
  • Video 这个比较特殊稍后再谈

以上对三种结构化标记进行了简单的介绍,当然每一种 丰富内容结构化标记 都有针对不同实体属性的描述方式。这些内容,以后我会更详细的分别介绍。

via 用户体验志

关于css sprites

css sprites的利弊

关于这项技术,最大的好处有下面几个:

1,减少网页加载时的http请求数。这种情况貌似只适用于“初次加载”之类需要重新从服务器端获取资源的情况。但无论怎样,对于一个流量较大或者频繁被“重新加载”的网页,还是很有用的。

2,给链接做背景图时,可以防止a:hover 时再载入背景图片而导致的背景“闪烁”。个人觉得这一点在提升用户体验具有一定的意义。

3,图片易于管理。前提是拼合的图片有一定的规律。如下图,就是一张“网站全部使用的按钮背景”的图片。这样可以很直观的看到网站中所有的按钮样式。(我个人喜欢按照图片的一定“属性”来拼图片,一张图片都是icon或者都是btn背景…这样就可以顺便管理图片,且有一定规律可循的图片,比较容易排列在一起。当然,有些时候,也会选择按照“模块”来拼合一张图片,这样在模块化的结构中,就产生了一个简单的逻辑:调用一个模块,则调用上面的背景图。否则,这张图片就不被调用。可以有效的防止只用了一个小小的图标,就调用了整个大图片的问题。)

按钮sprite图片

css sprites 适用范围:

1,需要通过降低http请求数完成网页加速。

2,网页中含有大量小图标。或者,某些图标通用性很强。

3,网页中有需要预载的图片。主要是a与a:hover背景图这种关系的。如果a与a:hover的背景图分别加载,那么,就会出现用户鼠标移到某个按钮上,按钮的背景突然消失再出来,产生“闪烁”,如果按钮文字色与大背景相同或相近,就更囧了,有可能让人产生按钮“消失”了的错觉。

需要满足的条件

在网页中,通过这项技术拼合在一起的图片最好有一项规律。定宽或者定高。最好是宽高都能定下来。需要平铺的图片,显然不适合sprite。

如上图的buttons,就属于定宽定高的情况。

定宽情况下,则可平行排列若干小图片。定高,则纵向排列小图片。

若背景既不定宽,也不定高情况下强行使用css sprites技术,则容易产生“不应该出现的图片出现在页面上”的状态。若是“强行定高”,也将非常不利于日后的维护。

总结

这项技术好与不好并不能一概而论的。要视网站的具体情况而定。分析时首先决定自己“是否需要”,还要综合开发成本,维护成本等问题。找到一个适合实际情况的方案再做定夺。及时要用sprites,建议也不要极端的将各种尺寸,各种对齐方式,各种用途图片放在一起去维护。这样的极端或许不能再减少几个http请求数,反而为日后的维护埋下隐患。