查看: 12178|回复: 15

HTML5、CSS3 及相关技术

[复制链接]
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
发表于 2013-11-13 21:10 | 显示全部楼层 |阅读模式
[size=0.76em]Web 标准发展和市场
[size=0.76em]现在是成为 Web 开发人员的绝佳机会。经过一段时间的休眠之后,标准机构和浏览器供应商在过去几年中显得异常繁忙,他们正忙于设计各种令人振奋的新兴技术。而开发人员则拼命抓住这次机会,稳步推出各种演示程序和成熟的应用程序。受此趋势影响,一些公司如 Google 和 Apple 推出了符合标准的移动浏览器,而这些浏览器的畅销又推动这些公司采用新技术来推广其产品和服务。还有一些媒体也乘此机会对标准进行大肆炒作,使其超出了普通 Web 开发人员和浏览器供应商的技术范畴。
[size=0.76em]当然,这样的争论也是有好处的。人们关注标准,这对业内每个人都有积极影响。从这个角度来看,持续使用统称,特别是 HTML5,作为 “新兴 Web 技术” 的简称就很有效。这能让不懂技术的人迅速了解(大致地)目前在标准方面开展的激动人心的工作。
[size=0.76em]有趣的是,甚至 W3C 也有所行动,使用 HTML5 及其标志(见 图 1)来宣传 “网络平台” 。

图 1. HTML5 标志

[size=0.76em]而不利的一面是,目前对规范方面所做的工作,加上这种快速而宽松的标记方式,已经在开发人员社区之中造成对规范本身认识的混乱。除非您对这项工作很了解,否则就根本搞不懂这些新出现的缩略词代表什么。
[size=0.76em]本文将为您澄清这些关于现存标准方面的混淆。本文概括了主要的标准,并提供了对技术本身的简易指南。

论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2013-11-13 21:10 | 显示全部楼层
HTML5、“HTML5” 和 HTML:活的标准
关于本规范最重要的一点,毫无疑问,就是对 HTML 的最新版本。无论是好是坏,“HTML5” 已经成了所有新兴技术的统称。JavaScript 开发人员 Peter Paul Koch 在 2010 年 1 月的博客中简要描述了这种现象。“只要是又新又酷的,都叫 “HTML5”。
尽管这句话描述了很多人的想法,而且抓住了这几年以来发展的 HTML5 “品牌” 的本质,但对于构建网站的人来说,需要透过这个总称,深入挖掘炒作背后的实际技术规范。
这里说明一下,Web Hypertext Application Technology Working Group (WHATWG)(目前推动 HTML 标准的工作小组 )已经放弃了 W3C 长期实行的 “快照标准开发流程”。虽然该小组与 W3C 紧密合作创建 HTML5 快照规范,但他自身却主要关注将 HTML 简化为 “活的标准”。
先将语义命名在一边,我们深入看看 HTML5 快照规范中的实际技术。要全面深入了解相关文档,请查阅 参考资料 一节,其中包含本文中提到的所有其他标准文档的链接。对于此规范,由于最近 WHATWG 发布了 Web 开发者专门版本;由此删除了上百页仅供浏览器供应商参考的信息,这使得理解本文档变得更加容易。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2013-11-13 21:10 | 显示全部楼层
HTML5 快照(snapshot)规范中的技术
在深入了解这些内容之前,要知道 WHATWG 将其称为活的标准并非玩笑之言。这是不断变化的目标。有一些技术,如 Canvas 2D API,已经包含在核心规范中,后来又形成自己的文档。
新的语义元素
在此规范的所有新内容中,最快得到采用的大多是新的语义元素,如 Header、Footer、Section 以及 Aside。其中很多是根据一名编辑 Ian Hickson 的网络调查中的通用模式设计出的。这在 Header 和 Footer 中可以清楚看到,它们对应于网络中常见的 id="header" 和 id="footer" 模式。还有另外一些,像 hgroup、aside 和 figure,是现有 HTML 元素的逻辑附注和增强。
尽管具体浏览器对新元素的支持有限(例如,浏览器不会对 header 进行特殊处理),新语义元素的使用正变得越来越普遍。开发人员正在研究使用新元素的最佳实践和通用模式。例如,有些老版本的 Windows® Internet Explorer® 处理未知元素时会有问题,而一些库,如 Modernizr 或 HTML5Shiv 代码就能实现新元素跨浏览器使用。
新的大纲算法
在了解新语义元素之前,先介绍一个新的大纲算法,它能生成更加灵活的文档大纲。除了标准的从 H1 到 H6 的 header 元素,HTML5 还引入了几个新的分段元素,有 section、article、aside、footer、header 和 nav。这些元素将文档大纲分成新的段落。除了熟悉的 header 元素和在页面上添加多个 H1 元素的能力,现在有了更多的选择可以创建语义丰富的结构化文档。
在开发过程中使用如 HTML5 outliner(h5o)书签的工具对于处理新算法会很有帮助。这些新的功能可以让习惯查看大纲的人在整个开发过程中看到大纲形式的文档,从而使问题变得更加清晰。
视频和音频
在浏览器中播放音频和视频非常普通,很容易被人遗忘,在 Web 发展历史中,却没有原生方法来完成这项功能。这时新的 HTML5 音频和视频元素出现了。
从规范角度看,用浏览器本身的 API 来播放音频和视频比较直接,又符合设计。所有熟悉替代元素,如 IMG 的工作方式的人都会知道如何嵌入视频和音频。相应的 API 也很简单,如 清单 1 所示:

清单 1. 一个简单的视频样例
                               
<-- the HTML -->
<figure>
<video src="_assets/video/sample.webm" controls autoplay
        width="400"
        height="300"
        id="video-sample"
        data-description="sample web video">
        your browser does not support the video tag </video>
<legend>This is a nice, sample web video</legend>
</figure>
//the JavaScript
var video = document.getElementById("video-sample"),
        toggle = document.getElementById("video-toggle");
toggle.onclick = function() {
        if (video.paused) {
                video.play();
                toggle.className="playing"
        } else {
                video.pause();
                toggle.className="paused"
        }
};

不幸的是,使用以上代码在所有主要浏览器中播放同一段视频目前还很困难。浏览器供应商面对的是两方不同的代码,实际情况就变得复杂很多。目前的情况是 Apple 和 Microsoft 坚定支持有专利担保的 h.264,而 Google、Opera 和 Mozilla 则拥护免费开放无版税的视频格式,如 WebM,网络上的视频格式比过去只有 Adobe® Flash® 一家的时代复杂多了。
表单元素和输入类型
HTML5 提供了几个新的 form 元素来更好地支持常见的输入任务。像 Email 和 URL 这样的格式能够在浏览器中正常使用。全新的表单输入元素有 range(用于滑块)、date (用于日期选取器)和 color (用于颜色选取器)。
不幸的是,根据 Peter Paul Koch 的调查报告显示,除了 Opera 和 Research in Motion,其他浏览器供应商采用这些技术的行动缓慢。这很遗憾!
尽管有些元素,如画布,很华丽而且很 “酷”,但很多网站利润还是来自表单。对他们而言,好的表单代表好的网站。对用户见到的内容进行增强,会获得实际收益。
离线 Web 应用程序
离线 Web 应用程序定义了一个应用程序缓存声明,它允许网站或应用程序开发人员设置一组文件,可以在不连网的情况下运行应用程序。此规范与网络存储规范的数据存储功能相结合,能够提供强大的离线功能。
内联(inline)内容编辑
HTML5 定义了新的 API 以简化内容编辑。尽管已经有熟知的 JavaScript 实现,但本地 API 能提供连续的有效的用户体验。
拖放
新的拖放 API 可以通过从桌面拖放到 Web 的方式上传文件。此功能的实际示例可在 Google Gmail 产品中看到,在 Mozilla Firefox 和 Google Chrome 中都可以实现。
历史 API
Ajax 时代就有可用性一致的问题,富含 Ajax 的应用程序会破坏标准历史栈。尽管现在有基于脚本的解决方案和通用模式来处理动态状态,但 HTML5 历史 API 与这些临时方案相比,却是可喜的改进。HTML5 在以上功能的基础上还增加了导航历史的功能,它包含了一个方法,可以将条目添加到历史中,并在用户点击后退按钮时作出适当响应。
微数据(Microdata)
HTML5 定义了一个标准化方法来标记 HTML 文档主体的元数据。对于使用过微格式(如 hCard 和 hCalendar) 的人来说,对微数据会很熟悉,但其中还有一些重要的不同之处。最重要的是,微数据将相关信息从此前微格式控制的类移到了新的 itemprop 属性中。
另外,此标准添加了其他能精确定义微数据格式的属性,以及一个可以直接通过程序访问微数据的方法:
itemscope 设置微数据段的范围。
itemtype 提供了定义可用的具体数据格式的 URL。
document.getItems() 提供对顶层微数据条目的访问;此方法会返回一个 NodeList,其中包含对应于可选参数 itemType 的条目,如果没有参数,则返回所有类型。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2013-11-13 21:10 | 显示全部楼层
HTML5 快照(snapshot)规范中的技术
在深入了解这些内容之前,要知道 WHATWG 将其称为活的标准并非玩笑之言。这是不断变化的目标。有一些技术,如 Canvas 2D API,已经包含在核心规范中,后来又形成自己的文档。
新的语义元素
在此规范的所有新内容中,最快得到采用的大多是新的语义元素,如 Header、Footer、Section 以及 Aside。其中很多是根据一名编辑 Ian Hickson 的网络调查中的通用模式设计出的。这在 Header 和 Footer 中可以清楚看到,它们对应于网络中常见的 id="header" 和 id="footer" 模式。还有另外一些,像 hgroup、aside 和 figure,是现有 HTML 元素的逻辑附注和增强。
尽管具体浏览器对新元素的支持有限(例如,浏览器不会对 header 进行特殊处理),新语义元素的使用正变得越来越普遍。开发人员正在研究使用新元素的最佳实践和通用模式。例如,有些老版本的 Windows® Internet Explorer® 处理未知元素时会有问题,而一些库,如 Modernizr 或 HTML5Shiv 代码就能实现新元素跨浏览器使用。
新的大纲算法
在了解新语义元素之前,先介绍一个新的大纲算法,它能生成更加灵活的文档大纲。除了标准的从 H1 到 H6 的 header 元素,HTML5 还引入了几个新的分段元素,有 section、article、aside、footer、header 和 nav。这些元素将文档大纲分成新的段落。除了熟悉的 header 元素和在页面上添加多个 H1 元素的能力,现在有了更多的选择可以创建语义丰富的结构化文档。
在开发过程中使用如 HTML5 outliner(h5o)书签的工具对于处理新算法会很有帮助。这些新的功能可以让习惯查看大纲的人在整个开发过程中看到大纲形式的文档,从而使问题变得更加清晰。
视频和音频
在浏览器中播放音频和视频非常普通,很容易被人遗忘,在 Web 发展历史中,却没有原生方法来完成这项功能。这时新的 HTML5 音频和视频元素出现了。
从规范角度看,用浏览器本身的 API 来播放音频和视频比较直接,又符合设计。所有熟悉替代元素,如 IMG 的工作方式的人都会知道如何嵌入视频和音频。相应的 API 也很简单,如 清单 1 所示:

清单 1. 一个简单的视频样例
                               
<-- the HTML -->
<figure>
<video src="_assets/video/sample.webm" controls autoplay
        width="400"
        height="300"
        id="video-sample"
        data-description="sample web video">
        your browser does not support the video tag </video>
<legend>This is a nice, sample web video</legend>
</figure>
//the JavaScript
var video = document.getElementById("video-sample"),
        toggle = document.getElementById("video-toggle");
toggle.onclick = function() {
        if (video.paused) {
                video.play();
                toggle.className="playing"
        } else {
                video.pause();
                toggle.className="paused"
        }
};

不幸的是,使用以上代码在所有主要浏览器中播放同一段视频目前还很困难。浏览器供应商面对的是两方不同的代码,实际情况就变得复杂很多。目前的情况是 Apple 和 Microsoft 坚定支持有专利担保的 h.264,而 Google、Opera 和 Mozilla 则拥护免费开放无版税的视频格式,如 WebM,网络上的视频格式比过去只有 Adobe® Flash® 一家的时代复杂多了。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2013-11-13 21:11 | 显示全部楼层
表单元素和输入类型
HTML5 提供了几个新的 form 元素来更好地支持常见的输入任务。像 Email 和 URL 这样的格式能够在浏览器中正常使用。全新的表单输入元素有 range(用于滑块)、date (用于日期选取器)和 color (用于颜色选取器)。
不幸的是,根据 Peter Paul Koch 的调查报告显示,除了 Opera 和 Research in Motion,其他浏览器供应商采用这些技术的行动缓慢。这很遗憾!
尽管有些元素,如画布,很华丽而且很 “酷”,但很多网站利润还是来自表单。对他们而言,好的表单代表好的网站。对用户见到的内容进行增强,会获得实际收益。
离线 Web 应用程序
离线 Web 应用程序定义了一个应用程序缓存声明,它允许网站或应用程序开发人员设置一组文件,可以在不连网的情况下运行应用程序。此规范与网络存储规范的数据存储功能相结合,能够提供强大的离线功能。
内联(inline)内容编辑
HTML5 定义了新的 API 以简化内容编辑。尽管已经有熟知的 JavaScript 实现,但本地 API 能提供连续的有效的用户体验。
拖放
新的拖放 API 可以通过从桌面拖放到 Web 的方式上传文件。此功能的实际示例可在 Google Gmail 产品中看到,在 Mozilla Firefox 和 Google Chrome 中都可以实现。
历史 API
Ajax 时代就有可用性一致的问题,富含 Ajax 的应用程序会破坏标准历史栈。尽管现在有基于脚本的解决方案和通用模式来处理动态状态,但 HTML5 历史 API 与这些临时方案相比,却是可喜的改进。HTML5 在以上功能的基础上还增加了导航历史的功能,它包含了一个方法,可以将条目添加到历史中,并在用户点击后退按钮时作出适当响应。
微数据(Microdata)
HTML5 定义了一个标准化方法来标记 HTML 文档主体的元数据。对于使用过微格式(如 hCard 和 hCalendar) 的人来说,对微数据会很熟悉,但其中还有一些重要的不同之处。最重要的是,微数据将相关信息从此前微格式控制的类移到了新的 itemprop 属性中。
另外,此标准添加了其他能精确定义微数据格式的属性,以及一个可以直接通过程序访问微数据的方法:
itemscope 设置微数据段的范围。
itemtype 提供了定义可用的具体数据格式的 URL。
document.getItems() 提供对顶层微数据条目的访问;此方法会返回一个 NodeList,其中包含对应于可选参数 itemType 的条目,如果没有参数,则返回所有类型。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2013-11-13 21:11 | 显示全部楼层
HTML5 中属于单独的规范和工作组的技术
多项技术已经成熟,脱离了 HTML5 规范,形成自己的文档。还有其他一些,也从 HTML 脱离出来,归类为 “Web 平台”。
SVG
也许归类到 HTML5 大杂烩中最奇怪的技术就要算 Scalable Vector Graphics (SVG) 了。SVG 是用 XML 定义的矢量图形语法。自从 1999 年起,就由 W3C 开始开发 SVG,因此将它作为 “新” 内容或 HTML5 一部分的一个延伸。
但依然值得为重新发掘 SVG 而感到高兴,因为它实际推动了标准。主要浏览器的最新版本都提供或多或少的支持,而有些库,如 Raphael.js 中还有支持旧版本 Internet Explorer 的 API。
Canvas 2D 环境
HTML5 时代早期的明星,Canvas 元素和相关 API,作为 Apple 中对 HTML 的扩展,又有了活力。如前所述,它一开始作为主要的 HTML5 规范的一部分。在 W3C 中,它在单独文档中。
Canvas 2D 环境提供了可在浏览器中绘制二维图像和位图的脚本化接口。目前的应用已非常广泛,从图形库到游戏引擎,它已经成为用来发布用户前台的流行系统,甚至成为过程编程语言转换成 JavaScript 的转接口。由于目前对探索 Canvas 的关注,ExplorerCanvas 库已支持旧版 Internet Explorer。
地理位置
Geolocation API 是检索设备地理位置的标准接口。它提供了一个 window.geolocation 对象,此对象中又提供了通过使用地址信息服务器来找到设备位置的方法。位置信息可以从很多数据源获取,包括 IP 地址、设备 GPS、Wi-Fi 和 Bluetooth MAC 地址、无线射频 ID(RFID) 和 Wi-Fi 连接位置。
Web 存储
Web Storage 规范定义了一个 API,可对 Web 浏览器的中的键-值进行连续存储。 此规范与 cookies 的功能类似,但有了很大的改进。
存储有两种形式:sessionStorage 与 localStorage。每一个都提供了类似的方法来管理条目(setItem()、removeItem() 和 getItem()) 和清除整个存储(clear())。Session 存储是用来保存当前浏览器会话。Local 存储用来对网站收藏或其他用户数据进行长期存储。还可以监听存储事件,以便监控存储活动并对存储活动作出响应。
对于现在就想体验此功能的用户,Persist.js 库提供了完善的跨浏览器解决方案可在所有主要浏览器中使用 Web 存储或等效的功能。
还有另外两个规范可与 Web Storage 同时使用:
IndexedDB 是一个相关的绿色规范,它提供了更强大的在浏览器中长期存储数据的功能,其中包括查询数据库,更重要是,能够保存复杂对象而不仅是简单的字符串。
Web Workers 是功能超强的规范,它定义了能在主页运行 JavaScript 同时让用户在底层运行脚本的 API。此功能可以让开发人员将时间较长的处理任务卸载到底层进程,从而释放浏览器,可在主要环境中进行持续交互。
文件 API
此规范提供了操作 Web 应用程序中文件的 API。加上其他一些新兴和成熟技术,如 XMLHttpRequest、拖放和 Web Workers,File API 能够提供比目前可用技术更强大的 Web 和桌面交互功能。 与简单文件上传输入元素将文件传递给 Web 服务器进行处理或复杂的 Flash 界面不同的是,File API 允许直接访问浏览器文件数据。
WebSocket
WebSocket API 可以通过一个 TCP 端口在 Web 浏览器和 Web 服务器之间同时双向通讯。在实现方面,WebSocket 还可以走得更远一些,它支持最新版本 Firefox、Opera、Chrome 和 Apple Safari,但已发现的安全漏洞使得它在 Firefox 和 Opera 中默认禁用。
服务器发送的事件
此规范定义了一个 API,可以打开一个 HTTP 连接,以 DOM 事件形式接收来自服务器的推送通知。本规范改变了目前在固定时间间隔轮询服务器进行更新的模式,节约了大量不需要的请求和相关的处理器时间和带宽。
WebGL
Web-based Graphics Library (WebGL) 增强了JavaScript,它具有在浏览器中创建三维交互图形的功能。WebGL 是 canvas HTML 元素的上下文。此规范与 2011 年 3 月推出 1.0 版,由非营利的 Khronos Group 管理。
XMLHttpRequest Level 2
XMLHttpRequest Level 2 规范通过一些新特性增强了核心 XMLHttpRequest 对象。其中最有趣的大概就是 Cross-Origin Resource Sharing 了,它一种绕过同源安全策略的安全方式,可以实现 XMLHttpRequest 与第三方服务器交互。目前,XMLHttpRequest 只能与相同协议的服务器通讯。
随着 JSON 和 JSONP 的流行,跨源共享的需要不再像以前一样紧迫,但这会在网站和 mash-up 架构方面显现以前受限于同源策略的机会。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2013-11-13 21:11 | 显示全部楼层
CSS3 的模块化方法
对于最新版本的 CSS,工作小组决定不再使用单独的整体规范,而是将其分为单独的文档,称为模块。每个模块都在 CSS,Version 2(CSS2) 中加入了新功能或扩展了一些特性。
有些模块已经很成熟,已经开发了 5 至 10 年(也可能更多年)。在 W3C 的完整性层级中有 推荐建议 或 候选建议。这表示已经基本完成。我们再看一些更有趣、更重要的模块。
选择器
CSS 不能没有选择器。选择器用于对 HTML 中的元素进行风格设置。
此模块包含 CSS, Version 1 (CSS1) 和 CSS2 中现有的选择器,并扩展了一些新特性。添加的内容主要是一些结构化伪类,如 E:empty,它匹配空元素,还有 E::nth-child(n) ,它匹配某个元素的第 n 个子节点。还有其他新的选择器包含否定伪类,如 E:not(s),它否定一个简单选择器,UI 元素声明伪类,如 E:enabled 和 E:disabled,它们匹配启用或禁用的元素。
流行 JavaScript 库如 jQuery、Dojo 和 YUI 的用户会熟悉新的 CSS, Version 3 (CSS3) 选择器,因为他们以前就包含在库的 CSS 选择器引擎中了。
颜色
颜色设置了 CSS 中与颜色相关的方面,包括透明度及颜色值记号。新的颜色值包括红、绿、蓝 + 一个 Alpha 通道 (RGBA) 以及色相、饱和度、亮度 + 一个 Alpha 通道 (HSLA)。
背景和边框
背景和边框定义了背景属性,如 background-color 和 background-image,以及定义了边框的风格。此模块中的新功能包括拉伸背景图片、边框图片、方框阴影,还有在 Web 历史上需求最多的功能,设置方框圆角。
多列布局
多列布局允许开发人员将内容放入灵活定义的列中。
媒体查询
媒体查询是对 CSS 中 @media 规则和 HTML 中 media 属性的增强,它添加了一些参数,如显示大小、颜色深度和长宽比。 此模块可以让开发人员更具体地将内容设置成不同大小,以及设置一个类中各个设备的功能。
媒体查询在 Ethan Marcotte 的 Responsive Web Design 中有着重要作用,这是流行文章 A List Apart 及后续书籍的主题 。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2013-11-13 21:11 | 显示全部楼层
新的仍在开发的模块
CSS 中有着让人激动的、特别实用的成熟模块,但更多的是目前还处于设想阶段的模块。以下是一些非常值得关注的样例。
CSS Fonts Module Level 3
Fonts Level 3 是 CSS 中原有的字体属性的扩展。Level 3 包括流行的 @font-face 规则,它能通过使用 CSS 规则直接将用户字体嵌入文档来更大程度控制 Web 类型。
CSS 2D Transforms Module Level 3
2D Transformations 模块引入一个新的属性,可以对方框进行旋转、平移、缩放和其他变换。
CSS 2D Transforms Module Level 3
3D Transforms是与 SVG 联合开发,它扩展了 2D Transforms 模块,增加了透视变换。
CSS Animations Module Level 3 和 CSS Transitions Module Level 3
Animations 模块可以将动画指定为元素,设置动画属性、动画时间,以及动画过程中变化的单元。Transitions 模块定义了伪类之间转换的动画属性。一个转换的例子就是元素进入或离开 :hover 状态。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2013-11-22 21:45 | 显示全部楼层
import di._
50
import db._
51

52

53
trait CxnProvider {
54
  def apply[A](f: Reader[Cxn, A]): A
55
}
56

57
object CxnProvider {
58
  def apply(driver: String, url: String) =
59
    new CxnProvider {
60
      def apply[A](f: Reader[Cxn, A]): A = f(Cxn(driver, url))
61
    }
62
}
63

64

65
trait MyBusinessLogic extends Db_API {
66

67
  // Monad comprehension
68
  def changePwd(userid: String, oldPwd: String, newPwd: String): Reader[Cxn, Boolean] = {
69
    for {
70
      pwd <- getUserPwd(userid)
71
      eq <- if (pwd == oldPwd) for {_ <- setUserPwd(userid, newPwd)} yield true
72
      else pure[Cxn, Boolean](false)
73
    } yield eq
74
  }
75

76

77
  def businessApplication(userid: String, oldPwd: String, newPwd: String): CxnProvider => Unit =
78
    r => {
79
      r(changePwd(userid, oldPwd, newPwd))
80
    }
81
}

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2013-11-22 21:46 | 显示全部楼层
To encode nested columns, Parquet uses the Dremel encoding with definition and repetition levels. Definition levels specify how many optional fields in the path for the column are defined. Repetition levels specify at what repeated field in the path has the value repeated. The max definition and repetition levels can be computed from the schema (i.e. how much nesting there is). This defines the maximum number of bits required to store the levels (levels are defined for all values in the column).

Two encodings for the levels are supported in the initial version.

Bit-packed (Deprecated) (BIT_PACKED = 4)

The first is a bit-packed only encoding, which is deprecated and will be replaced by the run length ecoding / bit backing hybrid in the next section. Each value is encoded back to back using a fixed width. There is no padding between values (except for the last byte) which is padded with 0s. For example, if the max repetition level was 3 (2 bits) and the max definition level as 3 (2 bits), to encode 30 values, we would have 30 * 2 = 60 bits = 8 bytes.

This implementation is deprecated because the RLE / bit-packing hybrid below is a superset of this implementation. For compatibility reasons, this implementation packs values from the most significant bit to the least significant bit, which is not the same as the RLE / bit-packing hybrid below.

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

TOP技术积分榜 社区积分榜 徽章 团队 统计 知识索引树 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 
京ICP备09055130号-4  北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表