2010»五月»雅虎的用户界面博客（YUIBlog）

在脱机应用程序使用YUI 3

2010年5月27日，在下午01:53亚历山大Kessinger | 开发 | 9评论

作者简介：亚历克斯Kessinger作为前端工程师在雅虎过去的前端工作，他喜欢整个堆栈上工作。 他还花了很多时间阅读，策划，以及对互联网的写作，社交媒体，网站建设。 在他的网站你可以找到它的所有alexkessinger.net 。 您还可以找到他在twitter上@ voidfiles 。

我可以说，HTML5的建设蒸汽，但当时是通过：HTML5是在这里。移动已经是巨大的，WebKit是迅速增长，数量的人都会有他们的电话和/或笔记本电脑上的HTML5的浏览器，在未来几年将创建一个“新常态”在HTML5的能力标准。

在HTML5真棒功能之一是应用程序缓存，使网站告诉浏览器高速缓存文件，并使用缓存的文件浏览器不具备网络连接时的能力。您可以使用应用程序缓存，以确保用户将能够访问至少你的应用程序的一部分，而他是。在手机或片剂（或者甚至是老式的设备，如笔记本电脑）等设备的情况下，这可能意味着您的用户能够在飞机上使用您的应用程序。同时，你要继续与网络技术构建您的应用程序，而不是学习的Objective-C。

除了应用程序缓存中，也有其他的API，在HTML5中，使Web开发人员的工具来创建有用的离线经验。有两个持久化存储API可以用在大多数新的浏览器。其中之一是一个简单的键/值数据存储，称为localStorage 。第二个是一个SQL数据库。既可以利用，而用户是离线的。

有了这些概念，我要去探索常青树“To Do列表”应用程序，使用它作为一个跳板，来看看我们如何能够利用一切我们爱锐后建立一个应用程序，应用程序缓存和持久性存储3，包括锐3画廊。

标记

标记始终是一个伟大的地方开始建立网站有关的任何时。我们的HTML5页面的基本壳：

 <！DOCTYPE HTML> <的HTML <HEAD> <TITLE>锐待办事项</ TITLE> <链接=“样式”HREF =“base.css”类型=“文本/ CSS”媒体=“屏幕”称号=“无标题的“charset =”UTF-8“> </ HEAD> <body class="yui-skin-sam"> <script src="yui-min.js"> </ SCRIPT> <脚本的src =”base.js“ > </ SCRIPT> </ BODY> </ HTML>

虽然我们正在建立一个脱机准备申请，按照刚刚闭幕前body标签的最佳做法，但将在头CSS和JavaScript。即使您的网页将是脱机可用，初始页面加载应该响应。（请注意，我们使用这里赫然简单的HTML5的doctype）。

应用程序需要一些占位符标记：

 <！DOCTYPE HTML> <HTML> <HEAD> <TITLE>锐待办事项</ TITLE> <链接=“样式”HREF =“base.css”类型=“文本/ CSS”媒体=“屏幕”称号=“无标题的“charset =”UTF-8“> </ HEAD> <body class="yui-skin-sam"> <div id="doc3"> <div class="hd"> <H1>待办事项应用程序</ H1 > <A class="callout" href="http://alexkessinger.net"的亚历克斯Kessinger </ A> <div class="item_entry"> <form class="entry_form"> <输入类型=“文本”名称=“todo_item_input”=“todo_item_input”> <p class="toRight"> <a class="addItem" href="#add">添加</ A> </ P> </表格> </ DIV> </ DIV> <div class="bd"> <div class="yui-main"> <div class="yui-b"> <div class="todo_items"> <H2>待办事项</ H2> <UL> <li class="no_items">取回ToDo项目... </ LI> </ UL> </ DIV> </ DIV> </ DIV> </ DIV> <div的id =“调试“> </ DIV> < - 初始化进程/ /  - > <script src="yui-min.js"> </ SCRIPT> <script src="base.js"> </ SCRIPT> </ DIV> </ BODY> </ HTML>

这将让用户知道我们正在计划对他们的一些数据，当他们第一次加载的应用程序。同时还设立了我们的舞台，为我们的JavaScript开始工作与DOM结构。

关于渐进增强的一个注记

有没有应用程序不能建立与逐步提高的原则，仍然为脱机使用的原因。在这种探索中，我省略了额外的复杂性，为了尽可能把重点放在支持脱机所需的技术，将参与体育。也许有人会批评这种做法，我很同情这样的说法。

处理移动设备的附加属性

没有任何特别注意的iPhoneOS和Android浏览器可以处理大多数的网页，但与移动设备的处理时，它是值得探讨的内容是如何被挤压，以适应较小的屏幕上。 quirksmode已不是一个而是两个视口深入的文章，是值得你花时间。

简单地说，有一个meta标签，称为视口。它看起来像这样：

  <meta name="viewport" value="">

视口标签的目的是帮助移动浏览器，找出如何在小屏幕上显示的一个非常大的网页。移动设备需要帮助，因为大多数设备试图挤上300-500px屏幕700-1100px的内容。此外，当我们设置的宽度在100％，浏览器需要其在网页应该有多大的最好的猜测，然后从大内设备的大小，以适应规模它。

为了帮助我们可以设置视此。

  <meta name="viewport" value="width=device-width">

这将告诉我们的页面的宽度设置设备的屏幕宽度的设备。如果我们要确保我们的页面是流体，然后将填补我们的网页上大多数移动设备的屏幕上。这也意味着，如果手机有一个横向模式的页面将扩大，以填补额外的空间。

还有其他的事情我们可以做的视口以及。如果你有移动浏览器的工作，你知道它们允许你放大。如果你正在服用的时间来建立一个网站，以填满整个屏幕，你可能不希望用户能够放大。如果我们把我们的视口是像下面这样，用户将不能够放大或缩小。像iPhone这样的设备上，这可能使感觉更自然。但如果你这样做，确保您的应用程序的内容，使用户没有理由永远要放大（例如，小文），否则，这将是一个令人沮丧的可用性约束。

  <meta name="viewport" value="width=device-width,user-scalable=no">

视口不是一个W3C标准，而且是一种常见的惯例。它目前支持的WebKit浏览器的iPhone和Android操作系统，小狐，Mozilla的移动浏览器，也可能会支持本公约。

的CSS

以往任何时候都更然后使用CSS的能力，是液体和动态是重要的。当寻找在手机，平板电脑和其他小屏幕的范围广泛，应用开发商需要意识到，我们的应用程序将要使用过多的设备上。即使是没有魔杖，我们可以挥动，使一切工作，对于大多数应用，我们可能并不需要每个设备上完美的像素。只是以下最佳做法可以把我们的方式来支持大多数设备。

开始我们的应用程序的宽度设置在％的基础，是一个伟大的开端。使用EM的设置字体大小也是有帮助的，因为EMS计算的基础上呈现的网页。另一件事，有助于确保你基于百分比列的宽度以及。即使列排水沟可以在EM的设置。

一个伟大的地方开始，而不必做了很多工作，是一个CSS框架。锐2网格CSS自然是我们的最爱之一，它有助于我们认为我们的页面的比例，而不是静态宽度块。

所以建立2 YUI的CSS的网格，这里是我的应用程序的CSS。

 。todo_items {填充，顶部：1EM;} todo_items的UL认证。{填充：0;保证金：0;} todo_items UL李{保证金：.125 EM EM 0 0 .5;填充：.125 EM 0 0 0;边界：1px的固体＃CCC;列表样式：无;显示：块;字的总结：断字的文字包装。抑制;} toRight {文本对齐：权利;} yui3控制台文本对齐：左;保证金左：10px;} H1 {字体大小：200％;}身体H2 {字体大小：150％;}

JAVASCRIPT

接下来是我们的离线应用程序做的JavaScript。首先下载yui_min.js，您的文档根目录，并把它添加标记，就像我们在上面有。然后把你的base.js文件：

  YUI的（）。使用（'节点'，功能（Y）{
     y.one（“todo_items H2”）。使用setContent（“我飞”）。;
 }）;

除了节点外，我还打算包括YUI 3的CSS复位和YUI的CSS网格。我要包括从模块锐3廊，瑞安Grove的优秀存储精简版，将包装在一个简单的，使用的API，所有可能的本地数据存储方法。

 使用锐（）（“cssreset”，“yui2网格”，“画廊存储精简版'，'节点'，函数（y）{

   / /-DO LIST应用程序代码

 }）;

注：我不打算潜入到待办事项代码，也把一些我使用的技术，使其更容易调试这种移动设备上的项目。你可以找到所有github上： yui3-TODO 。里面base.js你会发现整个应用程序。你还可以看到应用程序和运行http://html5.alexkessinger.net/yui/ytodo/ 。在这里，我要集中必要的步骤，以加强这个简单的应用程序脱机功能。

缓存清单

以一个Web应用程序脱机的第一步是应用程序缓存。应用程序缓存可以告诉你的浏览器，你想要什么样的文件下载并保持离线。在这个例子中，我知道我想继续我的JavaScript和我的CSS脱机，以及主要的HTML页面应用程序。考虑到这一点，我的缓存清单将看起来像这样：

 缓存的MANIFEST

 index.html的
 base.css
 yui_min.js
 base.js

有些事情需要注意的缓存清单。

它必须开始与行CACHE MANIFEST 。
你必须为它的Content-Type头文字/缓存清单

如果你在Apache，你可以添加下面的代码片段.htaccess以得到正确的内容类型。

  AddType文本/高速缓存清单清单。

在地方，任何带有后缀的文件.manifest将送达的text/cache-manifest Content-Type头。

下一步，我们需要告知浏览器的缓存清单，为此，我们将属性添加到我们的HTML标记：

  <html manifest="todo.manifest">

现在，如果你走在您的网页浏览器，支持离线应用程序，你可能会看到一个通知，指出这个网页请求脱机访问。

离线/在线

我们已经准备好与地方告诉我们的浏览器高速缓存的资源清单，想想什么发生在联机模式与脱机模式。现在有两个“启动序列”，首先是完整的在线序列，我们已经（和在此期间，资源脱机使用缓存）。这网上的序列使用雅虎的CDN加载的文件，这些文件是组合处理，所以我们只有几个HTTP请求。

但是，我们也建立离线启动过程。我们需要的是能够探测到一个事实，即浏览器是脱机，然后正确地初始化锐从缓存资源。

  VAR在线=（navigator.onLine）？ 真：假的;

现在，我们只需要选择配置对象的基础上，离线或在线。

  VAR YUI_ONLINE_CONF = {}，
     YUI_OFFLINE_CONF = {
        基地：“yui3/build /”
        结合：0
        组：{
            画廊：{
                基地：“yui3-gallery/build /'
                模式：{“画廊”：{}}
             }，
             yui2：{
                基地：：'2 in3/dist/2.8.0/build /，
                模式：{
                     “yui2”：{
                         configFn：功能（我）{
                             （/皮肤|复位|字体|格|基地/ .test的（me.name））{
                                 me.type ='CSS';
                                 me.path = me.path.replace（/ \ JS /，“CSS”）;
                                 me.path = me.path.replace（/ \ / yui2-皮肤/ / assets/skins/sam/yui2-skin'）;
                             }
                         }
                     }
                 }
             }
         }
      }，
     在线=（navigator.online）？ 真：假的;
      CURRENT_CONF =（网上）？  YUI_ONLINE_CONF：YUI_OFFLINE_CONF;

锐（CURRENT_CONF）。使用（cssreset'，'yui2网格“，”画廊存储精简版“，”节点“功能（Y）{
     ...
 }）;

YUI_OFFLINE_CONF配置可能需要一些解释。首先，我改变基地+ yui3/build/我的文档根。我已经发布了3 YUI的全分布到我的服务器作为一个结果，我不能因为W3C规范指出，脱机缓存有着严格的单一起源的政策。 所有缓存的资源必须来自同一域清单。雅虎或谷歌或其他任何CDN服务我的文件 - 它们都必须是从我的服务器缓存的依赖。

在下一部分中， combine:0 ，告诉YUI装载机不会自动组合的文件，因为我没有自己的服务器上安装一个组合的处理程序。

最后，我想提一提groups的配置。组是在YUI的3.1.1的新功能，允许你定义整个群体的文件，从同一个地方。你还可以配置，他们从源头combo'd的。我成立了YUI 3画廊画廊yui3库GitHub上有一个本地副本，我这里载入。

当我们网上，我们可以从雅虎的CDN的引导，但我们需要脱机文件的本地副本。这是很容易做到。您可以下载该文件需要在一个大的zip文件到您的目录：

  CD的docroot;
 wget的http://yuilibrary.com/downloads/yui3/yui_3.1.0.zip;
解压yui_3.1.0.zip;
压锐yui3;
 wget的http://download.github.com/yui-yui3-gallery-gallery-2010.05.19-19-08-0-g2a49f06.zip;
解压YUI-yui3画廊画廊2010.05.19-19-08-0-g2a49f06.zip的;
 YUI MV-yui3画廊2a49f06 yui3的画廊;
 wget的http://download.github.com/yui-2in3-yui-2in3.3-0-gdf09025.zip;
 YUI-2立方英寸MV-YUI-2in3.3-0-gdf090252立方英寸;

或者你可以从github克隆直接Git是您的计算机上安装的git库：

  CD的docroot;
混帐克隆的git :/ / github.com/yui/yui3.git yui3;
 git的克隆混帐:/ / github.com/yui/yui3-gallery.git的yui3画廊;
混帐克隆的git :/ / github.com/yui/2in3.git2立方英寸;

出于测试的目的。我有时会设置ONLINE = false和检查我的网站是如何加载。如果你这样做，然后在一个正常的浏览器访问您的应用程序，你可以看到每个文件需要单独列入。要正确填写我们的缓存清单，你需要采取被拉在每个文件的说明，使用类似Firebug的东西。然后你会在你的缓存清单列出每个文件逐个。它看起来会像这样。

 缓存的MANIFEST
 ＃注释
 index.html的
 base.css
 base.js
 YUI-min.js
 yui3/build/loader/loader-min.js
 yui3/build/widget/assets/skins/sam/widget.css
 yui3/build/console/assets/skins/sam/console.css
 yui3/build/oop/oop-min.js
 yui3/build/event-custom/event-custom-min.js
 yui3/build/intl/intl-min.js
 yui3/build/console/lang/console.js
 yui3/build/attribute/attribute-min.js
 yui3/build/event/event-base-min.js
 yui3/build/pluginhost/pluginhost-min.js
 yui3/build/dom/dom-min.js
 yui3/build/node/node-min.js
 yui3/build/event/event-delegate-min.js
 yui3/build/event/event-focus-min.js
 yui3/build/base/base-min.js
 yui3/build/classnamemanager/classnamemanager-min.js
 yui3/build/widget/widget-min.js
 yui3/build/substitute/substitute-min.js
 yui3/build/console/console-min.js
 yui3/build/cssreset/reset-min.css
 2in3/dist/2.8.0/build/yui2-grids/yui2-grids-min.css
 yui3-gallery/build/gallery-storage-lite/gallery-storage-lite-min.js
 yui3/build/json/json-min.js
 startup.png
的icon.png

在这一点上，我们可以去所有的方式脱机。如果你有一个iPhone操作系统或Android设备（或任何支持HTML5的浏览器），您现在可以访问你的网页，让完成加载，然后重新禁用设备的互联网接入的页面。

iPhone的具体超值服务

的iPhone让该Web应用程序开发的能力，给你的应用程序，就像所有其他的应用程序的主屏幕上的一些空间。你甚至可以有光泽的图标，启动画面，你必须用“本土”应用程序。首先，你需要按照规范的图标和启动画面。然后你可以添加下面meta标签：

  <meta name="apple-mobile-web-app-capable" content="yes"
 <meta name="apple-mobile-web-app-status-bar-style" content="white"
 <link rel="apple-touch-icon" href="icon.png"/>
 <link rel="apple-touch-startup-image" href="startup.png"

前两个标签告诉您的网页是一个湾，顶部状态栏的颜色是白色的HTML5 Web应用程序和移动Safari。这也将删除所有浏览器窗口周围的导航铬。第二两个标记指向你想使用你的图标，启动画面文件。

下一步是什么

HTML5规范仍然是一个移动的目标。随时留意新的发展。这就是说，即使在今天，在现代浏览器中有奇妙的新功能。正如你可以看到从本教程中，不难采取一个web应用程序脱机，大大提高了它的潜在用途。而且，当您离线时，不要毫不犹豫地采取3 YUI的你，以及你习惯于从YUI 3画廊和锐2部件家庭的所有电源。

共享和扩展：书签del.icio.us Digg它！ | reddit！

作为雅虎开放战略（达索）工程队的一部分，与YUI的工作

| 前端工程工作，2010年5月20日下午2:06由罗希特杜贝雅虎 | 评论关闭

雅虎开放战略（达索）团队建设的下一代开放式平台。 - 连接 - 我们即将推出的产品之一，是针对第三方的发行商和开发商。连接允许第三方轻松整合与雅虎在其网站上删除几行Javascript代码。此外，连接使用户登录到第三方网站，使用Yahoo!奇摩帐号和广播他们的朋友和追随者的更新。

Connect使用包括几个雅虎YQL的技术和锐。特别是，连接利用YUI3（节点，IO，自定义事件）和widget的基础设施，以提供一致的API和跨浏览器的经验的核心库。一旦完全开发，连接将被部署在成千上万的网络站点，并可见数以百万计的消费者。这是一个激动人心的机会，参与到一个项目，将有出色的消费范围和具有挑战性的可扩展性的要求。

理想的候选人将有5年以上大型网站开发经验，包括熟悉浏览器端的客户端技术如Javascript，HTML和CSS，跨浏览器兼容性问题，优化技术，以及国际化。 PHP和JavaScript库 - 如锐 - 知识是必需的。

有兴趣吗？见描述http://careers.yahoo.com/jdescription.php?oid=29752和接触罗希特杜贝（rdube雅虎-inc.com）在充分就业。

共享和扩展：书签del.icio.us Digg它！ | reddit！

锐剧院-瑞安达尔：“简介到NodeJS”的（58分）

艾伦拉比诺维奇在发展，2010年5月20日下午01:26 ， YUI剧院 | 14评论

两个星期前，雅虎举办了BayJax Meetup网站专门到NodeJS （Meetup网站，因为正值五月五日节，我们把它命名为“辛科节点”）。瑞安达尔的NodeJS的创造者，介绍了该项目上的谈话，并且是非常那种让我们记录他介绍YUI的剧院。

PS视频打开辛科在雅虎梅奥庆祝活动，与30秒的一瞥

如果下面嵌入视频不会出现在你的RSS读者选择正确，请务必通过点击观看视频锐剧院的高分辨率版本。

其他最近的锐剧院视频：

以利亚因苏亚：jsdom：DOM的CommonJS的实现 -以利亚因苏亚介绍了2010年5月BayJax Meetup网站雅虎在服务器端执行的JavaScript DOM。
尼古拉斯Zakas，斯托扬STEFANOV，罗斯Harmes，朱利安勒孔特，马特·斯威尼：高性能的JavaScript - O'Reilly的高性能JavaScript的讨论先进的JavaScript和DOM脚本在2010年4月BayJax Meetup网站雅虎优化五大贡献者。
道格拉斯克罗克福德：国家和JavaScript的未来 -雅虎JavaScript的建筑师道格拉斯·克罗克福德讨论最近ECMA5发展过程中，努力提高在未来的语言。
DAV玻璃：YUI - YUI的工程师DAV玻璃向您介绍YUI的画廊，并通过锐项目作出贡献的过程中的步骤。

共享和扩展：书签del.icio.us Digg它！ | reddit！

锐剧院-利亚因苏亚：“jsdom：DOM的CommonJS的执行情况”（18分钟）

5月20日，在下午01:24 2010年由艾伦拉比诺维奇，在发展中， YUI剧院 | 评论？

从明星开发商Arc90 ，以利亚的因苏亚，提出他对工作的jsdom在雅虎辛科的节点BayJax事件。以利亚是从布鲁克林提出通过Skype（所以请原谅低于理想的视频和音频质量），并慷慨地让我们捕捉到他的谈话为锐剧院。

如果下面嵌入视频不会出现在你的RSS读者选择正确，请务必通过点击观看视频锐剧院的高分辨率版本。

其他最近的锐剧院视频：

瑞安达尔：介绍到NodeJS -瑞安达尔的NodeJS的创造者，介绍了有关性能的改进和新的建筑项目和会谈。谈话发生在2010年5月BayJax Meetup网站雅虎的地方。
尼古拉斯Zakas，斯托扬STEFANOV，罗斯Harmes，朱利安勒孔特，马特·斯威尼：高性能的JavaScript - O'Reilly的高性能JavaScript的讨论先进的JavaScript和DOM脚本在2010年4月BayJax Meetup网站雅虎优化五大贡献者。
基督教海尔曼：YQL的和YUI：积木，快速应用 -雅虎开发者网络的国际传道基督教海尔曼讨论他的哲学思想，为建立快速，功能强大，有吸引力的应用，使用雅虎查询语言（YQL），和雅虎的用户界面库（锐）。
卢克·史密斯：事件演进 -锐工程师卢克·史密斯提供了一个深入的介绍了YUI 3事件系统，包括支持DOM事件，事件的代表团，合成的事件，自定义事件。

共享和扩展：书签del.icio.us Digg它！ | reddit！

实施重点：Phanfare媒体主办

2010年5月19日，由埃里克·米拉利亚1:51 PM | | 1条评论在野生环境中， YUI实现

科里从明茨 Phanfare写在上周告诉我们有关他们的最新产品的推出，这在很大程度上基于YUI的2.8.0。

我们刚刚发布我们的新网站主办单位昨天......这是作为一个Web应用程序构建一个完整的照片和视频的组织者，大约每2 YUI的组件使用。我们认为这真的模糊了桌面和网络软件之间的线。
一些显着的特点是：
使用提，我们让人们整理和编辑他们的照片，因为他们上传。
拖放和菜单的帮助下，的缩略图电网所有操作系统的文件浏览器的行为。你可以拖动选择，拖动和拖放重新排序，多选使用Ctrl和Shift，缩略图之间的箭头，等等。
的动态加载的TreeView ，让我们懒负载专辑100S的用户帐户，因为他们是分层（年- >相册- >部分）。这使得一个非常大的帐户页面加载速度就像一个小帐户。

我爱干净专业的网站，并在UI细节格外引人关注。随意参观网站 - 试用账户是免费的，来填充样品专辑什么网站上有提供给你一个感觉。 Cory和团队为这样一个梦幻般的发射表示祝贺。

共享和扩展：书签del.icio.us Digg它！ | reddit！

CSS的101块格式化上下文

5月19日，二零一零年在由蒂埃里Koblentz上午11:46 | 发展 | 10评论

作者简介：蒂埃里Koblentz是在雅虎前端工程师
他拥有TJK设计， EZ-css.org和CSS-101.org 。 你可以按照在Twitter蒂埃里@ thierrykoblentz 。

块格式上下文是一个盒子，至少满足下列之一：

“浮动”的价值是不是“无”，
“溢出”的值是不是“看得见”，
“显示”的值是“细胞表”，“表标题”或“内联块”
“位置”的价值是既不是“静态”的，也不是“相对”。

当它涉及到的可视化格式模型（这是用户代理是如何处理的文档树，视觉媒体），块格式化上下文是大牌球员。因此它是至关重要的CSS作者流，花车，清晰，和利润率与他们的关系有坚实的理解。

规范说什么...

如何阻止格式化背景流

块格式化上下文所属的定位方案，是正常的流动。因此，“块”块格式上下文被定位在页面流中块框，内嵌内嵌盒的格式，相对定位块或内联盒如你所期望，定位运行箱。简而言之，他们是页面流的一部分。

什么触发块格式化上下文

9.4.1节说，下面将建立新的块格式化上下文：

花车，
绝对定位的元素，
内联块，
表细胞，
表的标题，
“溢出”（比“看得见”的其他任何值）风格的元素

但根据CSS 3级规范，块格式化内容（“流根”在CSS3点讲）时创建符合下列条件：

“价值立场 “，既不是”静态“的，也不是”相对“（见[CSS3POS] ）。

这个定义意味着position:fixed建立一个新的块格式化的背景下，太。这是不是在9.4.1节的思念，虽然固定的定位是绝对定位（9.6.1），并在规范中引用绝对定位的元素（或包装盒），意味着该元素的“ 位置 “属性的子类值“绝对”或“固定”。

请注意， display:table不建立本身的块格式化上下文。但是，因为它可以生成匿名箱，其中之一（ display:table-cell ）建立一个新的块格式化内容。换句话说，触发是匿名框，不display:table 。这是作者应该牢记，因为即使两种风格建立新的块格式化上下文（或明或暗地）， clear不使用相同的display:table ，因为它确实display:table-cell 。

最后一个触发fieldset元素。奇怪的是，有没有对这种行为，直到上www.w3.org信息HTML5的规范。有浏览器的bug（ Webkit的， Mozilla的）提到这一点，但没有“官方”。事实上，即使在大多数浏览器中建立新的块格式上下文字段集，每节3.2（UA一致性），作者并没有认为这是理所当然的事：

CSS 2.1的不定义属性适用于形成控制和帧，或者如何将CSS风格他们可以用来。用户代理可申请到这些元素的CSS属性。作者建议把这种支持作为实验。未来的CSS水平可能进一步指定此。

块格式的背景下做

块格式化上下文包含的花车，因为他们的流动方式，每节9.4.1，防止崩溃的边缘，不重叠的彩车：

在一个块格式的情况下，盒子被解雇后，垂直，一个包含块的顶部开始。两兄弟框的垂直距离是确定的“保证金”的属性。在块格式化方面的相邻块盒之间的垂直崩溃的边缘。
在一个块格式的情况下，每个方块的左外缘接触的包含块的左边缘（从右到左的格式，触摸右边缘）。这是真实的，甚至在花车的存在（虽然一个盒子的线箱可能缩小由于彩车），除非框建立一个新的块格式化的情况下（在这种情况下，框本身可能变得更窄由于彩车）。

不够用的规格，这意味着在现实世界中吗？

像任何块框块格式化上下文或多或少，除了这些重要的例外：

块格式化上下文防止保证金倒塌
相邻的块框的垂直崩溃的边缘，但只有当他们是在同一个块格式化的内容。换句话说，如果相邻的框不属于同一个块格式化的内容，其保证金将不会崩溃。
例如：
这是第一个DIV里面一个蓝色的背景与风格， margin:20px 。
这是第一个DIV里面一个蓝色的背景与风格， margin:20px 。
这是一个蓝色背景的DIV内的段，它与样式margin:20px ，父DIV的样式与overflow:hidden;zoom:1 。
上述两者之间的首次蓝框，底部和顶部段落崩溃（差距等于20像素，40像素）的保证金，但由于过去DIV创建一个新的块格式化内容，第三段的利润率不崩溃，因此他们不“粘”段的容器，而该块框的一部分。
注：在IE6中，没有明确的利润率的DIV将无法附上的边缘。
当涉及到崩溃的边缘，创建一个新的块格式化内容为适用相同的border或padding的元素的行为。
块格式化上下文包含彩车
我相信你已经听说过的一句话，“ 花车始终包含浮 ”，或者听到FNE（几乎所有浮动）方法。但是，在此基础上是浮动块格式化的背景，所以制定一个更好的办法是说，“ 块格式上下文始终包含花车 ”。
例如：
这一段是一个蓝色背景的DIV内浮动，它的样式与margin:20px
这一段是一个蓝色背景的DIV内浮动，这是风格与margin:20px 。父DIV的样式与overflow:hidden;zoom:1 。
The first paragraph is a float so it is removed from the flow and its container collapses , hence the background of this container does not show.
The second paragraph is also a float, but it is contained inside a DIV that creates a new block formatting context, hence that container encloses the child's “margin box”. You should also note that, unlike with the first paragraph, there is no need to clear the previous box. This is often referred to as “self-clearing”, which makes lot of sense considering that block formatting contexts are a normal part of the flow.
Note : clear only clears floats within the same block formatting context .
Block formatting contexts do not overlap floats
This one is my favorite . According to the spec, the border-box of a block formatting context must not overlap the margin-box of floats in the same block formatting context as the element itself. What this means is that browsers create implicit margins on block formatting contexts to prevent them from overlapping the margin-box of floats. For this very reason, negative margins should have no effect when applied to a block formatting context next to floats (WebKit and IE6 have a problem with this though – see test case ).
例如：
```
 .sideBar { background: skyBlue; float: left; width: 180px; } 
```
```
 .sideBar { background: yellow; float: right; width: 180px; } 
```
```
 #main { background: pink; overflow: hidden; zoom: 1; border: 5px solid teal; } 
```
Because this behavior is attached to the “border box” (not the “margin box”), to create space (eg, a 20px gap) between the pink box and its siblings, authors would need to either:
- Set a 20px margin on the floats
- Set margin values on the pink box greater than the width of the floats (ie, margin:0 220px )
Yes, you'd use 220px , not 20px . Because it is the border-box that tries to fit between the floats, not the margin-box. And if I say it tries it is because that container would drop if there was not enough room for it between the two floats.
In other words, if the pink box was given a 400 pixels width, that box should drop when the parent container is narrower than 770 pixels (180px + 180px + 400px + 10px). As a side note, in a few instances, this behavior appears to be broken in Firefox (at least in v.3.5.9) (ie, when the above construct is the first child of body – see test case ).
Note : the space that shows in IE6 between the pink box and the two floats is due to the three pixel jog bug .

hasLayout versus block formatting context

As you may have noticed, all previous examples are styled using overflow:hidden;zoom:1 . The former declaration establishes a new block formatting context in modern browsers while the latter triggers hasLayout in Internet Explorer (IE 5.5/6/7). This is because these renderings are very close ( similarities with the CSS specs ). Like block formatting contexts, elements that are given a layout appear to prevent collapsing margins, to contain floats, and to not overlap floats.

Properties/declarations that give elements a layout

The lists below show that the properties that establish a new block formatting context also trigger hasLayout, at least the ones supported by the browser, with the exception of overflow in IE < 7.

In Internet Explorer 5 and 6: position:absolute; position:fixed; float (any value other than ” none “); display:inline-block; width (any value other than ” auto “); height (any value other than ” auto “); zoom (any value other than ” normal “); writing-mode:tb-rl; -ms-writing-mode:tb-rl
In Internet Explorer 7: min-width (any value); min-height (any value); max-width (any value other than none ); max-height (any value other than none ); elements styled with overflow (any value other than visible ); overflow-x and overflow-y (any value other than visible )

Things to consider

zoom and writing-mode are proprietary properties and do not validate.
IE 5.0 does not support zoom
width and height trigger hasLayout on inline elements only when these properties apply to these elements (ie, IE6 in quirks mode).
overflow-x and overflow-y are part of the CSS3 box model module
hasLayout is also triggered when the layout-flow is different from the parent layout flow (ie, rtl to ltr )

In Quirks Mode and IE7 Mode (All Versions)

When overflow is set to something other than visible, table-cell elements do not establish new block formatting contexts.
When overflow is set to visible, table-cell elements establish a new block formatting context.

HTML elements that always have a layout:

In Internet Explorer, these elements have - by default – a layout.

<body> (as well as <html> in Strict mode)
<table> , <tr> , <th> , <td>
<img>
<hr>
<input> , <button> , <select> , <textarea> , <fieldset> , <legend>
<iframe> , <embed> , <object> , <applet>
<marquee>

收官

To reduce the risk of issues between modern browsers and Internet Explorer ( < 8), authors may choose to give a layout to boxes that establish new block formatting contexts. This way the flow is identical, elements escape floats the same way, clear clears the same floats, and margins collapse where expected. Also, authors must pay attention when styling boxes using hasLayout triggers (ie, width ) as such styling may require making that element a new block formatting context as well.

YUI: Open Hours, Fri May 21st

May 19, 2010 at 10:30 am by Luke Smith | In Development | 2 Comments

It's a new week, and time for another YUI: Open Hours !

This week, we'll be joined by the inimitable Dav Glass , author of (among other things) YUI's Rich Text Editor and Drag and Drop utility , and the primary architect behind yuilibrary.com and the Gallery itself. He'll be discussing the YUI 3 Gallery project — where it's going, how to contribute — and answer any questions about it, about the site, or really about anything else while we have him on the line.

After that, we'll jump into our main event, which will be a “Gallery widget sampler”. We have a number of module authors joining us this week, including

Iliyan Peychev ( Accordion )
Andrew Bialecki ( Lightbox )
Matt Snider ( Radial Menu )
Jacob Fogg ( Sliding Sidebar )
and hopefully more

They'll introduce their module, give an example or two, go over their API, and discuss their experience creating it. Besides just being a nice introduction to additional components available to YUI 3 users, it should provide a good platform to talk about widget API best practices and help give a sense of some of the decisions that are made during widget creation.

Thanks again to Caridy Patiño for joining us last week and reviewing his Accordion Node plugin and Dispatcher modules. We'll have more topics in the future about creating Node plugins and the reasons why the plugin approach or the widget approach might be a better fit for your needs. And thanks to Matt Sweeney (author of YUI's Node class and selector engine) for dropping in as a surprise guest as well.

The time will be the same as before, 10am – 12pm PDT and the connection details are also the same:

Dial in to 1-888-371-8922 (non-US participants, email me for a local number)
Enter the attendee code 4718 8953#
Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

And as always, you can keep up to date with the upcoming schedule and topics by following @yuilibrary on Twitter or subscribing to the YUI Event Calendar .

希望看到你！

共享和扩展：书签del.icio.us Digg它！ | reddit！

支持WordPress的关于雅虎虚拟主机。

标记

关于渐进增强的一个注记

处理移动设备的附加属性

的CSS

JAVASCRIPT

缓存清单

离线/在线

iPhone的具体超值服务

下一步是什么

其他最近的锐剧院视频：

其他最近的锐剧院视频：

规范说什么...

如何阻止格式化背景流

什么触发块格式化上下文

块格式的背景下做

不够用的规格，这意味着在现实世界中吗？

块格式化上下文防止保证金倒塌

块格式化上下文包含彩车

Block formatting contexts do not overlap floats

hasLayout versus block formatting context

Properties/declarations that give elements a layout

Things to consider

HTML elements that always have a layout:

收官

Further readings

Implications

Demos and testcases

hasLayout articles

YUI库在Twitter

翻译

辛迪加

最近的帖子

YUI库

档案：

网志串连

评论政策

成为一个Yahoo!

元：