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>
     <link rel="stylesheet" href="base.css" type="text/css" media="screen" title="no title" charset="utf-8">
 </ HEAD>
 <body class="yui-skin-sam">
     <script src="yui-min.js"> </ SCRIPT>
     <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;
 }
 UL李todo_items的{
    保證金：.125 EM EM 0 0 .5;
    填充：.125 EM 0 0 0;
    邊界的頂部：1px固體＃CCC;
    列表樣式：無;
    顯示：塊;
    字總結：斷字;
    文字換行：壓制;
 }

 。toRight {
     文本對齊：權利;
 }

控制台。yui3 {
     文本對齊：左;
     保證金左：10px;
 }

身體H1 {FONT-SIZE：200％;}
身體H2 {FONT-SIZE：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 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>

Wrap up

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#
加入屏幕共享會話（會提示你安裝的Adobe Connect插件，如果這是您第一次使用）

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:

Wrap up

Further readings

Implications

Demos and testcases

hasLayout articles

YUI庫在Twitter

翻譯

辛迪加

最近的帖子

YUI庫

檔案：

網志串連

評論政策

成為一個Yahoo!

元：