HTML5技术

HTML5、CSS3 及相关技术(3)

字号+ 作者:H5之家 来源:H5之家 2015-09-09 09:00 我要评论( )

此模块包含 CSS, Version 1 (CSS1) 和 CSS2 中现有的选择器,并扩展了一些新特性。添加的内容主要是一些结构化伪类,如 E:empty,它匹配空元素,还有 E::nth-child(n) ,它匹配某个元素的第 n 个子节点。还有其他新

此模块包含 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 及后续书籍的主题 。

新的仍在开发的模块

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 状态。

放眼未来图 2. 我已经看到了未来。

I've seen the future. It's in my broweser.

Web 标准世界现状将会结束。这确实是个激动人心的时刻,尤其是目前技术飞速发展,有着众多的演示及产品代码可用。开发人员还在忙于将新技术特性文档化和创建库来支持老的浏览器,大量机会已经在首次体验这些新技术的过程中产生。这些第一手体验毫无疑问是触摸 Web 未来的最好方式。所以,如果您想知道未来如何发展,就该仔细了解现在发生了什么。

参考资料 学习

  • HTML5 标志:阅读有关 Web 平台的内容,下载 HTML5 标志。
  • “HTML5 means whatever you want it to mean”(QuirksBlog,2010 年 1 月):Peter-Paul Koch 讨论关于 HTML5 规范究竟是什么的困惑。
  • “HTML is the new HTML5”(WHATWG 博客,2011 年 1 月):这条博客讨论了 “HTML5” 的新开发模式,其中技术未版本化,但含有不断演化的技术定义文件。
  • “HTML5 specification for Web developers”(WHATWG,2011 年 2 月):本规范关注的重点是可读性和易访问性。与完整的 HTML 规范不同,“Web 开发人员版本” 删除了只有浏览器供应商需要了解的信息。
  • “The new input types”(QuirksBlog,2011 年 3 月):阅读新输入类型兼容性表。
  • “HTML Canvas 2D Context”(W3C ,2011 年 2 月):了解更多关于 HTML canvas 元素的 2D Context 的内容。
  • cufón:了解 cufón 提供的用户字体。
  • “Web Storage”(W3C,2011 年 4 月):了解更多关于此 API 用于 Web 客户端键值对数据的持续性数据存储的内容。
  • “Web Workers”(Apple Computer,Inc.,Mozilla Foundation, and Opera Software ASA,2011 年 4 月):阅读此 API 能让 Web 应用程序作者能在主页运行程序的同时在后台运行脚本的内容。可以进行类似线程的操作,同时以消息传递作为协同机制。
  • “File API”(W3C,2010 年 10 月):了解更多关于此 API 在 Web 应用程序中表现文件对象,以及以编程方式进行选择和访问数据的内容。
  • “The WebSocket API”(W3C,2011 年 4 月):了解更多关于此 API 的内容,它能让 Web 页面使用 WebSocket 协议与远程主机进行双向通信。
  • “Experiment comparing Upgrade and CONNECT handshakes”(IETF,2010 年 11 月):阅读会对 WebSockets 造成有限支持的安全问题。Chromium Code Reviews 提供了更多关于安全问题的细节信息。
  • “Server-Sent Events”(W3C,2011 年 4 月):了解更多关于此 API 的内容,它可以打开一个 HTTP 连接,以 DOM 事件形式接收来自服务器的推送信息。
  • “WebGL Specification”(Khronos Group,2011 年 2 月):此规范描述了额外的呈现环境以及对 HTML5 画布元素 [CANVAS] 的支持对象。此环境可以使用一个完全符合 OpenGL ES 2.0 API 的 API 来呈现。
  • “XMLHttpRequest Level 2”(W3C,2011 年 3 月):XMLHttpRequest Level 2 规范通过一些新特性,如跨源请求、进程事件以及对发送和接收字节流的处理增强了 XMLHttpRequest 对象。
  • “Selectors Level 3”(W3C,2009 年 12 月):了解更多 CSS1 和 CSS2 中已有的选择器, 以及 CSS3 和其他语言中的新选择器的内容,您可能会用得到。
  • “CSS Backgrounds and Borders Module Level 3”(W3C,2011 年 2 月):阅读 CSS level 3 中关于边框和背景的内容。
  • “CSS Multi-column Layout Module”(W3C,2011 年 4 月):此规范描述了 Web 样式表语言 CSS 中的多列布局。 通过使用此规范中描述的功能,可以将内容通过空挡和规则分隔成多列。
  • “Media Queries”(W3C,2010 年 7 月):了解媒体查询如何通更精确地标记样式表来扩展媒体类型的功能。
  • “Responsive Web Design”(A List Apart,2010 年 5 月):设计师曾经对精确布局的打印效果感到不满,为 Web 上不同的用户环境破坏其设计效果感到遗憾。Ethan Marcotte 主张我们转变设计思想,适应这些限制:使用流动网格、可调图像和媒体查询,他向我们展示如何通过反应性 Web 设计来拥抱这些 “变化莫测的情况”。
  • “CSS Color Module Level 3”(W3C,2010 年 10 月):此规范描述了前景色和成组透明度的颜色值和属性。其中包含 CSS level 2 中的属性和值,还有一些新的值。
  • “CSS Fonts Module Level 3”(W3C,2011 年 3 月):此 CSS3 模块描述了如何设置字体属性以及如何动态加载字体资源。
  • “CSS 2D Transforms Module Level 3”(W3C,2009 年 12 月):理解 CSS 2D Transforms 如何将元素通过 CSS 呈现并转换到二维空间。
  • “CSS 3D Transforms Module Level 3”(W3C ,2009 年 3 月):了解 CSS 3D Transforms 如何扩展CSS Transforms,让元素通过 CSS 呈现并转换到三维空间。
  • “CSS Animations Module Level 3”(W3C,2009 年 3 月):理解 CSS Animations 如何使作者能让 CSS 随时间变化。
  • “CSS Transitions Module Level 3”(W3C,2009 年 12 月):了解 CSS Transitions 如何让 CSS 属性值在指定时间段内平稳变化。
  • “Geolocation API Specification”(W3C,2010 年 9 月):本规范定义了一个提供对与托管设备相关地理位置信息进行校本化访问的 API。
  • HTML5 Cross Browser Polyfills:现在就了解能帮助您使用新标准的库和代码。
  • “Session history and navigation”(WHATWG,2011 年 4 月):了解更多关于新的 History API 的内容。
  • Twitter 上的 WHATWG:在 Twitter 关注 WHATWG。
  • Twitter 上的 W3C:在 Twitter 关注 W3C。
  • Twitter 上的 Rob Larsen :在 Twitter 上关注作者 Rob Larsen。
  • Twitter 上的 developerWorks :在 Twitter 关注 developerWorks。
  • developerWorks 的 developerWorks 中国网站 Web 开发专区 专门提供关于各种 Web 解决方案的文章。
  • 随时关注 developerWorks 上的 developerWorksLive! 技术讲座。
  • developerWorks 演示中心:观看包含面向初学者的产品安装和设置,以及为经验丰富的开发人员提供的高级功能的演示。
  • 查看 HTML5 专题,了解更多和 HTML5 相关的知识和动向。
  • 获得产品和技术
  • Processing.js:下载 Processing.js,它是流行的专门用于 Web 的 Processing 可视化编程语言的姊妹项目。
  • Explorer Canvas:使用 Explorer Canvis 为 Internet Explorer 添加 Canvas 支持。
  • PersistJS:下载 PersistJS,他是客户端 JavaScript 一致性存储库。
  • Modernizr:了解更多关于 Modernizr 的内容,并下载 Modernizr。Modernizr 可以向 HTML 元素添加类,从而可以针对您的样式表中特定的浏览器功能。
  • HTML5Shiv:下载 HTML5Shiv。
  • HTML5 outliner (h5o):下载 HTML5 outliner 书签。目前的 HTML5 草案定义了一个非常精确的算法,可以生成 HTML 文档的大纲。
  • Raphael.js:下载 Raphaël,它是一个小的 JavaScript 库,可以简化关于 Web 上图形向量方面的工作。
  • 讨论
  • “Scalable Vector Graphics”(W3C,2010 年 7 月):本规范定义了 Scalable Vector Graphics (SVG) 的特性和语法,SVG 是描述 XML 中二维向量和混合向量/光栅图形的模块化语言。
  • 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基,并与其他 developerWorks 用户交流。
  • 条评论

    developerWorks: 登录

    标有星(*)号的字段是必填字段。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

      HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

      2017-05-02 11:02

    • HTML5 进阶系列:indexedDB 数据库 - _林鑫

      HTML5 进阶系列:indexedDB 数据库 - _林鑫

      2017-04-27 14:02

    • HTML5 高级系列:web Storage - _林鑫

      HTML5 高级系列:web Storage - _林鑫

      2017-04-27 14:01

    • CSS3 选择器 - Glunefish

      CSS3 选择器 - Glunefish

      2017-04-22 09:00

    网友点评