使用HTML5 Web存储实现离线工作

摘要:HTML5是一个新的HTML标准,它拥有大量新的功能和布局技术。它完全支持多媒体、CSS3以及使用画布和可缩放矢量图形(Scalable Vector Graphics, SVG)的绘图功能。HTML5供了新的语义元素,还提供了恰当的使用应用程序缓存器、JavaScript worker、新版本的XMLHttpRequest 一种名为Web存储的工具创建HTML Web应用程序的方式。

本文将探讨Web存储的强大功能,以及它成为一种优于cookies的存储方法的原因。通过本文您将了解基本概念、浏览器支持和HTML5 Web存储对象。

概述

Cookies从JavaScript出现之初就一直存在,所以在Web上存储数据并不是个新概念。不过Web存储是数据存储的一种更为强大的版本,可提供更多的安全性、速度和易用性。在Web存储中还可以存储数量巨大的数据。具体的数量则取决于Web浏览器,但通常都在5MB到10MB之间,这对于一个HTML应用程序而言已经足够大。另一个好处是此数据并不会在每次出现服务器请求时都被加载。惟一的限制是不能在浏览器之间分享Web存储, 如果您在Safari中存储了数据,那么该数据在Mozilla Firefox中是无法访问的。

内置到HTML5中的Web存储对象有两种类型:

  • sessionStorage 对象负责存储一个会话的数据。如果用户关闭了页面或浏览器,则会销毁数据。
  • The localStorage 对象负责存储没有到期的数据。当Web页面或浏览器关闭时,仍会保持数据的存储,当然这还取决于为此用户的浏览器设置的存储量。

常用的缩写语

  • API:应用程序编程接口 (Application Programming Interface)
  • CSS:级联样式表 (Cascading Style Sheet)
  • HTML:超文本标记语言 (HyperText Markup Language)
  • JSON:JavaScript Serialized Object Notation

这两种存储对象具有相同的方法和属性。为了获得一致性,本文在所有的示例中使用的都是localStorage对象。

在本文中,我们将了解Web存储的强大功能,以及它成为优于cookies的一种存储方式的原因。本文还将探索基本的Web存储概念、HTML5 Web存储方法和浏览器支持。

您可以下载 本文示例中使用的源代码。

浏览器支持

所有最新的浏览器版本均支持Web存储特性,这些浏览器包括Firefox、Google Chrome、Safari、Opera和Microsoft® Windows® Internet Explorer® 8+。不幸地是,Internet Explorer 7和更早版本不支持Web存储。表 1显示了支持 HTML5 Web存储的每个桌面浏览器版本。

表 1. HTML5 Web存储的桌面浏览器支持

除了Opera Mini之外,其他移动浏览器也提供了对HTML5 Web存储的支持。表 2 显示了支持HTML5 Web存储的每个移动浏览器版本。

表 2. HTML5 Web存储的移动浏览器支持

HTML5 Web存储的浏览器支持十分令人瞩目。但是,较老的浏览器要求在使用之前检查Web存储支持的浏览器。为了了解Web存储支持而对浏览器进行检查非常简单。可以使用一个简单的条件语句来查看HTML5存储对象是否已经定义。如果已经定义,就可以放心进行Web存储脚本编写。如果未定义,而数据存储又是必需的,则需要采用一种备选方法,比如JavaScript cookie。清单 1的例子显示了一种简单的为Storage对象进行浏览器检查的方式。

清单 1.Web存储支持的浏览器检查

如果浏览器不支持Web存储,那么您可以使用JavaScript cookie或一个现有的库(比如 AmplifyJS)来创建一个定制的Web存储对象。AmplifyJS是一组组件,旨在通过一个简单的API解决常见Web应用程序问题,包括某些浏览器中的Web存储支持。AmplifyJS用amplify.store包装程序来处理持久的客户端存储,它支持Internet Explorer 5+、Firefox 2+、Safari 4+、Chrome、Opera 10.5+、iOS 2+ 和 Android 2+。这个库还支持一个持久的API来处理跨浏览器存储;您无需基于具体的浏览器编写不同的代码。如果浏览器支持HTML5 Web存储,那么AmplifyJS就会使用最新的存储技术。如果浏览器不支持HTML5 Web存储,那么AmplifyJS就会降级,以支持没有该功能的存储。请参阅参考资料,更多地了解AmplifyJS以及用于其存储包装程序的API。

入门

有几种简单易用的方法可提供HTML5 Web存储功能。这些方法支持设置一个键/值对,提供了两个基于键来检索某个值的选项,同时清除所有的键/值对,并删除了某个特定的键/值对。表3显示了可用的HTML5 Web存储方法。

表 3.HTML5 Web存储方法

 

在创建并将键/值对添加到此Web存储对象时,可以使用任何类型作为键/值对中的值(字符串、数值、数组、对象等)。要存储一个数组或对象,则必须使用JSON对象通过JSON.stringify 方法将数据转换为一个字符串。在检索此数据时,可以使用JSON.parse 进行检索,它会返回原始状态的对象或数据。还有两种向Web存储对象添加键/值对的不同方式。第一种方式是使用setItem方法,如清单 2所示。

清单 2.使用setItem方法向Web存储对象添加键/值对

向Web存储对象添加键/值对的第二种方法是使用带dot参数的Web存储对象来直接设置此键的值,如清单 3所示。

清单 3.直接向Web存储对象添加键/值对

检索所存储的值同样十分简单,也有两种方式。第一种方式是使用getItem方法,它接受键作为参数并返回相应的值(如果存在)。清单 4显示了一个示例。

清单 4.使用getItem从Web存储对象中检索键/值对

从Web存储对象中检索键/值对的第二个方法是使用dot参数直接访问它,如清单5所示。该示例返回了在之前的例子中设置的 \’myValue\’字符串值。

清单 5.直接从Web存储对象中检索键/值对

有两种方法可以删除所存储的数据。可以同时删除所有项,也可以一次删除个别项。要同时从Web存储对象中删除所有项,可以使用clear方法,如清单6所示。

清单 6.从Web存储对象中删除所有键/值对

要从Web存储对象中删除单个键/值对,需要使用removeItem方法。清单7显示了removeItem方法的一个示例,它接受一个键作为参数,并确定哪个键/值对要从此存储对象删除。

清单 7.从Web存储对象中删除单个键/值对

清单 8显示了一个如何使用JSON对象通过JSON.stringify方法将一个数组存储为字符串的示例。可以采用相同的方法处理对象。

清单 8.在HTML5 Web存储中将一个数组存储为字符串

要从Web存储检索数组的字符串版本,并将它转换回一个可用的JavaScript数组,只需使用JSON.parse方法,如清单9所示。

清单 9.从HTML5 Web存储中检索数组的字符串版本并将它转换成一个可用的JavaScript数组

Internet Explorer 8+、Opera 10.5+、Firefox 3.5+、Safari 4+ 和 Chrome 均包括了一个本地的JSON对象,可以使用该对象来支持之前例子中的那些代码。如果您使用的是版本较早的浏览器,那么可以下载json2.js 文件(请参阅 参考资料)。

到目前为止,Web存储看起来很容易使用。但是,在开始使用之前,您应该意识到在共享的机器上会存在安全性问题。Web存储并不比cookies安全。所以不要在客户端存储敏感信息,比如密码或信用卡信息。

工作中的Web存储

介绍完基础知识后,现在是时候将HTML5 Web存储付诸于使用了。假设在您的网站上,您想要为一个Web表单提供离线支持。如果用户提交了表单,并且在网站恢复在线时让此表单与服务器同步,那岂不是很不错。HTML5可以实现此目标。

创建一个简单的Web表单,其中包含姓名、电子邮件地址和提交按钮,如清单10所示。

清单 10.使用HTML5 Web存储来存储数据的一个简单Web表单

此表单包含了一个ID,可使用JavaScript检索表单post和值。此外,它还提供了CSS,以创建具有表单元素的基本布局。标签和输入上的display:block 将每个元素置于一个新行。margin-bottom属性在条目之间创建空间,让页面看起来不会太乱。

当用户提交表单时,代码首先会检索web-storage-form ID并使用jQuery捕获默认张贴,以阻止此张贴操作的发生。当张贴表单时,就可以收集表单值以及此表单动作的URL,以便将它们存储在变量中。在作为Asynchronous JavaScript + XML (Ajax) post发送表单值,或将它们存储于Web存储中时,您还需要序列化这些Web表单值。在提交表单之前,应该使用navigator.onLine属性查看用户当前是否在线。

如果用户在线,则使用jQuery.post函数,这是一个简略的Ajax函数,用于发送数据并从服务器接收数据。这个函数接受四个参数:数据被发送到的url、正在发送的data(序列化后的表单值)、请求成功便会触发的callback函数以及dataType。在本例中,并未包括dataType,所以会使用默认参数。

如果用户不在线,那么就可以让Web存储一展身手了。首先也是很重要的一点是,使用 清单1中创建的条件语句来查看浏览器是否支持Web存储。如果浏览器不支持 Web 存储,则使用一个定制键将表单值直接存储到localStorage 对象中。本例使用了formValues定制键。localStorage值的已经保存,现在可以检查当用户恢复在线时这些值是否存在,做法是通过添加一个if语句来检查localStorage.formValues是否有一个值。如果有一个值,则表明这个表单之前已经提交到 localStorage,并可以使用先前设置好的jQuery.post方法安全地向服务器发送数据。在提交值之后,应该从Web存储中将它们删除,以防止意外地重复提交它们。清单11显示了从使用Ajax的表单张贴到localStorage期间所需代码。

清单 11. 离线时将表单数据存储于localStorage,在线时将其提交到服务器

为了创建一个完整的例子,使用post.php 文件充当表单张贴的结尾,用以接收和响应表单请求。这个文件只简单接收表单张贴并通过打印键/值对进行响应,如清单12所示。当jQuery.post收到响应后,就可以将来自响应的数据写入控制台了。

清单 12.可响应表单请求的PHP文件

当然,您还可以让这个例子更为健壮。比如,您可以在服务器端上提供数据库存储,并使用一个间隔来检查localStorage,以便随时监视用户的计算机是否恢复在线,从而提交表单数据。

结束语

HTML5提供了一组强大的新功能,并迅速获得了主要Web浏览器的最新版本的支持。Web存储是HTML5众多引人注目的特性中的一个。但是,务必巧妙使用它。对于cookie,用户可以关闭Web存储。始终都要有一个备案,以便支持那些不想使用此新功能的用户。

来自:IBM社区中文站

把Flash转成Javascript/HTML5

SmokeScreen是 这样一个开源软件,它可以把Flash的swf文件转成Javascript/HTML5,它的口号是:Flash without plugin。为什么要这样做呢?它说主要是因主Apple的iPhone/iPod/iPad不支持flash,而且看似Steve Jobs也不愿意在以后支持flash。所以,他们搞了这样一个玩意。目前,这个开源软件还在开发阶段,在其主页上,你可以看到一些Demo,在Chrome上看上去很不错,虽然还有一些小问题,不过已经很不错了。

HTML5几乎颠覆了原来的HTML,其可以让你用HTML不单单只是做网页布局,而且还让你可以开发更强的东西,比如:WebSockets,使用这项技术,已经有人在搞Web版的Quake 2了(http://code.google.com/p/quake2-gwt-port/),还有Google的3D Javascript API,所以,把swf完美地转成Javscript/HTML5可能也只是一个时间问题。

虽然,HTML5还在draft阶段,而且很多东西都和flash重复了。所以,加上iPhone的推波助澜,发生这样的事情也不奇怪,不知道adobe会怎么想?也许adobe目前对其AIR或是Actionscript还抱有希望,虽然有这样一篇文章力 挺Flash,但未来真的不好说,adobe会使用HTML5/Javascript来作为其flash的引擎吗?如果不这样的话,我相信总有一天,会有 人开发出HTML5/Javascript的IDE。而且,有理由相信,一旦在未来所有的浏览全面支持HTML5,那么我们可以想像,这个世界可能几乎所 有的桌面应用都会被Web所取代,这个进程可能会越来越快。让我们拭目以待。

40个很不错的CSS技术

1. A CSS styled table version 2

 
 

2. A CSS-based Form Template

 
 

3. A Stripe of List Style Inspiration

 
 

4. Accessible expanding and collapsing menu

 
 

5. Advanced CSS Menu Trick

 
 

6. Animated Rollover Arrow

 
 

7. Animations

 
 

8. Background Size

 
 

9. Better Ordered Lists (Using Simple PHP and CSS)

 
 

10. Box Shadow

 
 

11. Creating a table with dynamically highlighted columns

 
 

12. Creating bulletproof graphic link buttons with CSS | 456 Berea Street

 
 

13. Creative and Cool Uses of the CSS Border Property

 
 

14. Creative Use of PNG Transparency in Web Design

 
 

15. Cross Browser CSS SlideShow

 
 

16. Cross Browser Multi-Page Photograph Gallery

 
 

17. CSS Bar Graphs: Examples

 
 

18. CSS Based Navigation

 
 

19. CSS Curves

 
 

20. CSS Dock Menu

 
 

21. CSS Double Lists

 
 

22. CSS-Based Tables: Technique

 
 

23. CSS Gradient Text Effect

 
 

24. CSS List Boxes

 
 

25. CSS Map Pop

 
 

26. CSS Pricing Matrix

 
 

27. CSS Production Notes

 
 

28. CSS Pull Quotes

 
 

29. CSS Rounded Corners Roundup (Nifty Corners)

 
 

30. CSS SiteMap

 
 

31. CSS Speech Bubbles

 
 

32. CSS Stacked Bar Graphs

 
 

33. CSS Step Menu

 
 

34. CSS Tabs

 
 

35. CSS Teaser Box

 
 

36. CSS Zooming

 
 

37. CSS: Menu Descriptions

 
 

38. CSS-Based Forms: Techniques

 
 

39. Date Display Technique with Sprites

 
 

40. Displaying Percentages with CSS

 
 

文章来源:http://technologytosoftware.com/best-css-techniques-you-shouldt-miss-for-effective-coding.html

关于text-overflow和white-space

两者都是CSS文本属性,首先说明一下:

※ text-overflow:clip | ellipsis
版本:IE6+专有属性
取值:clip 默认值。不显示省略标记(…),而是简单的裁切;
ellipsis 当对象内文本溢出时显示省略标记(…) 。
说明:设置或检索是否使用一个省略标记(…) 标示对象内文本的溢出。
这个属性仅仅作用于水平内联方向的,普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。

※ white-space:normal | pre | nowrap | inherit
版本:未知
取值:normal 默认值。文本自然换行。如果超过元素宽度,内容自然换到下一行;
nowrap 不允许换行;
inherit 浏览器自动选择;
pre 保留换行和空白。这个值只有当你声明了!DOCTYPE,且 IE 6 以上版本才支持。
说明:用来处理空白,适用于所有块类型的元素 (block elments)。
在 HTML文件里,空白,比如换行符 (line breaks)、 空格 (spaces)、 制表符 (tabs),都被自动截去。HTML会自动截去多余的空格。不管你加多少空格,都被看做一个空格。为了在网页中增加空格,你可以使用 &nbsp; 表示空格。你也可以用<br>强制换行。

要强制溢出发生并且应用ellipsis 值,必须设置对象的white-space 属性值为nowrap 。
假如没有换行机会(例如,对象容器的宽度是狭窄的,而内有很长的没有合理断行的文本),没有应用 nowrap 也有可能溢出。
为了使 ellipsis 值被应用,此属性必须被设置到具有不可视区域的对象。最好的选择是设置overflow 属性为 hidden 。设置overflow 属性为scroll 或者auto 时,此属性也会应用。但是会有滚动条出现。
通过选择省略标记,隐藏的文本可以被选择。当选择发生时,省略标记会隐藏而被文本替换。
此属性为在DHTML中制作省略标记提供了高效的方法。
此属性对于currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为textOverflow 。
示例:
div {overflow: hidden; text-overflow:ellipsis; }

在百度空间中,为了节约空间,我们可结合二者,将好友最新文章的摘要换作一行显示(也可以用于其他模块)。鄙人已编辑的CSS如下,效果见本空间主页:

#mod_friblog div.item a.cnt{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html>body #mod_friblog div.item a.cnt{-moz-text-overflow:ellipsis;} /*此句为了兼容firefox*/

使用基于CSS导航菜单的4个理由

  导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素。
  虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的关键,但视觉效果也不能影响到网站可用性。最理想的设计是网站的导航既能比其他网站的导航外观更吸引人,又不会夺走网站内容的焦点。
 
  不幸的是,目前还有很多网站在使用过时的导航菜单方式,这样使网站可用性大打折扣。如果导航菜单过分的依赖图片那会失去一定的用户,比如那些网速慢或浏览器设置关闭读取网页图片功能。但是,并不意味着导航一定要朴素简单才能提高访问性及网站可用性。
现在暴风彬彬归纳一下CSS导航菜单的4点好处:
 
1.减少代码量
  结合CSS和XHTML来制作导航菜单会比使用Javascript或图片来实现同样效果更加节省代码(CSS可以结合一些图片来制作导航而且代码量很小,而完全使用图片的导航代码量也要多很多)。代码量晓得网站会更有益于搜索引擎的索引排名,而且读取速度会快很多。
 
2.亲和力
  基于CSS的导航菜单对用户来说不但更有可用性,而且更有亲和力。如果用户关闭读取图片和(或)CSS的功能,网站仍然可以以简洁的方式浏览,内容结构及网站可用性不会受到影响。有极少数用户使用的旧浏览器虽然不支持CSS,但网站导航菜单却仍然能够访问。
 
3.无限的设计方案
  使用CSS来设计导航菜单并不会限制你的设计。事实上,CSS会提供更加灵活的导航设计方案,当用CSS来设置背景图时也能实现各种视觉效果。
 
4.大量的脚本资源
  如果你不想自己从头开始设计基于CSS的导航菜单,那么有大量的免费脚本资源可以拿来使用。但暴风彬彬并不提倡使用这些脚本资源,因为这样的话你会和其它成百上千的网站使用同样的导航菜单。不过有一些菜单可以自定义样式(颜色、字体、尺寸及背景图)来符合你自己的网站风格。下面暴风彬彬推荐几个国外的资源,它们的导航菜单脚本可以算是最棒的:
 

你应当了解的5个CSS3新技术

 
CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果,但了解它们还是必须且很有趣味性的。暴风彬彬将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。
 
1:基本标记
css3-教程
 
在我们开始这个教程之前,先来创建整个教程都要使用的基本标记。
我们的xHTML需要一下div元素:
  • #round, 使用CSS3代码实现圆角.
  • #indie, 应用个别的几个圆角.
  • #opacity, 展示新的CSS3实现不透明度的方式.
  • #shadow,展示不使用Photoshop的情况下,使用CSS3来实现阴影效果.
  • #resize, 展示如何使用某种CSS来实现重设大小的效果.
综上所述,我们的xHTML应该是这样的:
 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”round”> </div>
<div id=”indie”> </div>
<div id=”opacity”> </div>
<div id=”shadow”> </div>
<div id=”resize”>
<img src=”image.jpg” alt=”resizable image” width=”200″ height=”200″>
</div>
</div>
</body>
</html>
下面来创建基本CSS文件:
 
body    {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
正如你上面看到的,我们给每个div元素300px的宽和高,并让它们向左浮动,整个页面的div都留给我们在后面的工作中添加样式。

 

2:圆角
css3-特性
 
目前而言,创建圆角的方法有很多,但都很麻烦。最常用的方法:首先,你要创建圆角的图片;然后,你要创建很多html元素并使用背景图像的方式显示圆角。具体流程你我都很清楚。
这个问题将在CSS3中很简单的解决掉,那就是叫做“border-radius”的属性。我们先创建一个黑色的div元素并给他设置黑色的边框。边框就是要实现“border-radius”属性效果的前提。
像这样:
 
#round {
background-color: #000;
border: 1px solid #000;
}
现在你已经创建了div元素,它看起来和你预期的样子一样,300px款和高有楞有角且是黑色的。下面我们来添加实现圆角的代码,它是如此的简洁,仅仅需要两行代码。
 
#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
在这里,我们添加了两行类似的代码,-moz-适用于Firefox浏览器,而-webkit-则是用于Safari/Chrome浏览器。
注:目前为止IE浏览器不支持border-radius属性,所以如果想让IE也有圆角效果,那么就要单独添加圆角了。
border-radius这个属性直译过来是边框半径的意思,就如同Photoshop一样,它的值越大,圆角也就越大。

 

3:个别的圆角
css3-技巧
 
如果按照过去的习惯做法,会浪费你很多时间,现在CSS3能快速解决!
我们现在只想让div的右上和右下是圆角,那么仅需稍作修改:
 
#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
试想一下这种做法会用在网页中的什么元素呢?对!就是标签式的导航按钮!

 

4:以CSS3的方式修改不透明度
css3-教程
 
现在你可以按惯例编写几行代码来实现不透明度的效果(hack)。不过CSS3简化了这个流程。
这行代码很好记,仅仅是 “opacity: value;”:
 
#opacity {
background-color: #000;
opacity: 0.3;
}

5:阴影效果

css3-教程
 
实现阴影也有很多方法,最常用的就是使用Photoshop制作成阴影图片,然后应用到背景属性中。但CSS3让你的工作更有效率,不幸的是,目前只有Safari和Chrome支持这个新特性。
仅仅需要一行代码,不过它有4个不同的值:
 
-webkit-box-shadow: 3px 5px 10px #ccc;
下面我来解释一下这四个值都代表什么,第一个3px是指定阴影与div元素之间的水平(横向)距离,第二个5px指的是阴影与div之间的垂直(纵向)距离,第三个10px指的是阴影的模糊度(类似于photoshop中的羽化),值越大越细腻。最后的值不说大家也知道,就是阴影的颜色。
我们最终阴影效果代码;
 
#shadow {
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;
}
正如你看到的,我们个这个div设置了白色的背景,黑色的边框和亮灰色的阴影。

 

6:调整大小
css3-教程
 
在最新版本的CSS中,调整元素的尺寸已经成为可能(不过目前仅Safari支持)
使用这个代码以后,我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。代码依然很简单,可以说仅需要一行代码,当然你还可以配合使用一些曾经使用过的属性,比如”max-width”, “max-height”, “min-width”和 “min-height”.
 
#resize {
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}
在这里主要说一下resize和overflow属性,resize:both;的意思就是所有边都可以调整尺寸,它的值还有horizontalvertical,顾名思义,就是横向和纵向。而overflow是为了配合resize工作的,在这里使用auto.

 

总结
css3-教程
 
怎么样,你在这篇文章中有没有什么收获呢?虽然现在仅有很少数的浏览器支持CSS3,但不可否认的是CSS3的确会为我们的工作节省更多的时间。如果你对渐进增强有所了解和认识的话,我想你会欣然接受CSS3这个强大的新版本的。不要再把你的时间都花在IE6上了,那样你只能会是过时的前端开发工程师。

960 Grid System 基本原理及使用方法

960-网格系统
 
由于一些读者对于960 Grid System CSS Framework的原理和使用方法比较感兴趣,暴风彬彬今天将和大家一同分享这篇关于960 grid CSS Framework的基本原理和简单的使用方法。
关于CSS框架其实一直是一个比较热门且很有争议的话题,的确,国内的一些前端er们越来越关注CSS框架,并都开始尝试使用,觉得CSS框架能够节省更多的开发时间,显著提高工作效率。当然,还有很多人持相反意见,认为CSS并没有这么高级以至于要涉及到框架!我记得在cnBeta上曾经有位程序员讽刺道:”这年头,连CSS都有框架了?!”。今天暴风彬彬并不是要向大家介绍什么是CSS框架,也不会介绍各种CSS框架的优缺点。只是要讲解一下目前在国外很热门的一个框架,严格讲是网格系统,那就是960 Grid System。通过这篇教程你会知道使用960框架之后,你的开发工作会更快的开展。

 

960 Grid System 基本原理
首先,你需要学习关于”如何让框架工作”。你可以通过自己的尝试来学习,不过我仍然会在这里为大家进行讲解,那就开始吧。
 
不要编辑960.css
先说一点需要注意的:不要编辑960.css文件,如果你修改了它,那么你今后将无法更新这个框架。
 
读取网格
在我们使用外部文件中的CSS代码之前,首先要在我们的HTML文件中调用它们。像这样调用:
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/960.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css” />
当我们调用好它们以后,我们要调用自己的CSS文件了。例如,你也许会将你的CSS文件命名为style.css或site.css或者其它什么的。这样调用它:
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/style.css” />

 

Containers(容器)
在960框架中,你可以选择两种类名为.container_12 和 .container_16的容器。这两种容器都是960px的宽度(这就是为什么叫做960 grid),但他们的不同之处是它们包含不同数量的列。顾名思义,.container_12的容器被分为12列,而 .container_16被分为16列。这两种960px宽的容器都是水平居中的。

 

Grids (网格)/ Columns(列)
你可以选择很多种不同的列宽组合,不过在这两种容器中是有所不同的。你可以通过打开960.css来了解这些宽度,但这对于设计一个网站并没有什么必要。在这里暴风彬彬将一个很有用的技巧让你使用框架更加容易。
例如:如果你想在你的容器中仅使用两列(分别是主内容区/侧边栏),你可以这样做:
<div class=”container_12″>
<div class=”grid_4″>sidebar</div>
<div class=”grid_8″>main content</div>
</div>
看到上面的代码你也许已经明白,不过我还是要讲一下。也就是说你在container_12这个容器中使用了grid_4和grid_8两列,4+8恰好等于12!明白了吗?使用网格系统的好处之一就是你不用去计算没列的宽度到底是多少,省去了很多运算。
下面让我们看看如何编写四列布局:
<div class=”container_12″>
<div class=”grid_2″>sidebar</div>
<div class=”grid_6″>main content</div>
<div class=”grid_2″>photo’s</div>
<div class=”grid_2″>advertisement</div>
</div>
正如你看到的,这个系统工作得很好。如果你尝试使用你的浏览器读取他的话,你会发现有一些不对劲的地方。不过不要紧,那正是我们下一个话题要讨论的。

 

Margins
默认情况下,每列之间都会存在一些margin。每个grid_(这里插入数值)类都有10px的左margin和右margin。也就是说两列之间的margin值是20px。
20px的margin能让布局保持应有的留白并看上去更平滑,这也是我喜欢960 grid System的原因之一。
在上面的例子中,我们将它使用浏览器读取时出现了一些问题,现在我们来修复它。
问题在于每个列都包含左margin和右margin,但是最左面的列不应该有左margin,最右面的列不应该有右margin。(够罗嗦!)下面是解决方法:
<div class=”container_12″>
<div class=”grid_2 alpha”>sidebar</div>
<div class=”grid_6″>main content</div>
<div class=”grid_2″>photo’s</div>
<div class=”grid_2 omega”>advertisement</div>
</div>
你仅需添加alpha类来去除左margin,添加omega类去除右margin。好了,现在我们的布局已经可以完美在浏览器中对齐了。(是的,包括IE6)

 

Styling(添加样式)
事实上,你已经掌握了如何使用960框架创建基本的网格布局了。不过你也许还想为自己的布局添加一些样式。
<div class=”container_12″>
<div id=”sidebar” class=”grid_2 alpha”>sidebar</div>
<div id=”content” class=”grid_6″>main content</div>
<div id=”photos” class=”grid_2″>photo’s</div>
<div id=”advertisements” class=”grid_2 omega”>advertisement</div>
</div>
由于CSS使用优先级的形式来觉得如何解释样式,而id要比class的优先级高。这样我们就可以在我们的独立CSS文件中以id选择符创建个性化的样式了。如果凑巧有的样式属性与960相同但值又不同,浏览器会优先选择你的CSS文件中的样式。当然,如果您感兴趣,也可以看看上面的实例添加样式后的实际效果

 

我们做到了
这是这样!你已经掌握的如何使用960网格系统来创建兼容所有浏览器的布局。当你完全掌握熟练960系统之后,你会发现它为你节省了很多很多编写CSS的时间。

 

我想请问你
你在之前是否使用过960网格系统?或其它CSS框架?你是否认为CSS框架能够改善你的代码?欢迎留下你的观点

浅析网页Transitional和Strict的文档声明的区别

在推广Web标准的今天,那些崇尚Web标准的人经常说XHTML比HTML更加严格,当然从某种意义上说是的,比如它要求所有的标签关闭并且所有的属性都用引号。但其实XHTML 1.0还分两种(加上Frameset DOCTYPE的话算三种,本文不讨论),Transitional(过渡型)和Strict(严格)DOCTYPEs。并且HTML 4.01也有同样的文档声明。

从字面上就可以看出来意思:Transitional DOCTYPEs只是为了实现从旧时代到新时代的过渡,而且Strict DOCTYPEs是默认的文档声明, 对构造HTML 4.01和XHTML 1.0都适用。

使用Transitional DOCTYPE一般是由于代码中含有过多陈旧的写法,并且一下子很难完全转换到Strict DOCTYPE来。但是Strict DOCTYPE才应该是你的目标。它鼓励甚至有时是强迫你把结构与表现区分开来,把表现层的代码都写在CSS里。HTML 4 Document Type Definition
本HTML 4.01 Strict DTD不包括表现层属性和标签,W3C将逐渐淘汰这些属性和标签,您完全可以使用样式表来实现。您应该使用Strict DTD,如需获得表现层属性和标签的支持,请使用Transitional DTD。
用Strict DOCTYPE还有一个好处,即可以让浏览器使用它们最严格、(一定程度上)最符合标准的模式来渲染页面。
Tommy Olsson在Web Standards Group的Ten questions for Tommy Olsson一文中很好的阐述了使用Strict的好处:
我觉得,使用Strict DTD,无论是HTML 4.01 Strict还是XHTML 1.0 Strict,远比讨论是用HTML还是XHTML重要的多。它代表了未来互联网的质量。它将结构和表现分开,使得维护一个站点非常容易。
对于刚开始接触web standards和正确的、语义化的结构的人,认清Transitional和Strict DOCTYPEs的区别非常重要。更多详细列表请参考:XHTML: Differences between Strict & TransitionalComparison of Strict and Transitional XHTMLXHTML1.0 Element Attributes by DTD
对于准备向Strict进发的人来说,两者的有些区别很可能会使开发者犯错误,接下来我将会谈到。

 

在Strict DOCTYPEs下不支持的标签
  • center
  • font
  • iframe
  • srike
  • u


在Strict DOCTYPEs下不支持的属性
  • align (表格相关的支持:col, colgroup, tbody, td, tfoot, th, thead, and tr)
  • language
  • background
  • bgcolor
  • border (table支持)
  • height (img和object支持)
  • hspace
  • name (在HTML 4.01 Strict中支持,XHTML 1.0 Strict中的form和img不支持)
  • noshade
  • nowrap
  • target
  • text, link, vlink, 和alink
  • vspace
  • width (img, object, table, col, 和 colgroup都支持)


内容模型的区别
元素类型的内容模型描述了什么样的元素类型实例可以被包含。这一点上,两种文档声明的最大区别在于blockquote, body, 和form元素仅能够包含块级元素,如:
  • 文本和图像不允许直接包含在body中,必须被p或者div等块级元素包含
  • input元素不能直接是form元素的下一层
  • blockquote元素内的文本,必须被p或者div等块级元素包含


将所有的表现都交给CSS,恪守Strict标准
在向Strict DOCTYPEs过渡的过程中,了解每个元素是做什么的比知道每个元素长啥样有效的多。
首先考虑结构和语义,然后再担心表现。

获取页面元素位置

在Web编程中,常常会使用某个元素的位置,即相对于整个屏幕左上方的位置。

这里有一个较好的方法实现。