最近,開發人員和設計師們可以在webkit中嘗試使用css區域特性了,我們認為是時候給他們一些開發工具了.最新版本的chrome canary中的web inspector現在已經支援下面這些功能:
譯者注:可以到進一步了解css區域.獲得chrome canary
目前只有最新版本的chrome canary的web inspector支援支援除錯css區域的功能,canary是最新版本的google chrome,它擁有最新的功能 — 其中一些還是試驗性質的.和chrome一樣,canary 也會自動更新,而且它可以和穩定版的google chrome同時安裝甚至同時執行.如果你喜歡嘗試最新的web技術和功能特性,那麼使用canary是乙個好主意.
譯者注:chrome一共有四個發布通道,canary是最新的,相當於firefox nightly,canary的目前版本號為24,dev版為23,大家使用的穩定版為22.開啟web inspector對css區域的支援
安裝canary以後,你必須進行一些操作才能讓瀏覽器完全支援css區域:
找到enable developer tools experiments(譯者注:中文版翻譯成了啟用開發者工具實驗),點選啟用按鈕.
找到enable experimental webkit features,點選啟用按鈕.
點選底部的relaunch now按鈕.
可以通過快捷鍵alt + command/control + i,或者點選選單檢視→開發者→開發者工具來開啟web inspector(譯者注:作者用的是mac上的chrome).
點右下角的設定按鈕,選擇experiments選項卡.
勾選css regions support核取方塊.
注意:在chrome的穩定版完全支援css區域之後,這些步驟將不再需要.
譯者注:可以在這裡檢測你的瀏覽器是否支援css區域,現在你的canary已經完全支援了css區域,是實戰的時候了.如果你沒有乙個使用css區域的頁面,adobe css區域主頁上面有幾個demo可以使用.
可以通過下面的步驟來審查你的css區域:
開啟乙個使用css區域的頁面.
開啟web inspector並啟用elements選項卡.
右擊任意乙個元素,選擇css named flows…
在新彈出的面板左側,你會看到乙個命名流的列表,如下面的截圖所示.注意「secondary」流左邊的小圖示,它表明有部分內容已經被忽略了(意思是需要更多的區域來容納溢位的內容):
點選乙個命名流,會在右邊的面板中開啟它,然後你會看到這個命名流的內容和區域鏈.區域鏈中dom節點左側的小圖示用來表明:這個內容是否合適,是否被忽略,是否是空的.
你還可以把滑鼠移到乙個區域鏈的dom節點上來高亮這個區域:
在除錯css區域時,你會發現web inspector提供給我們的內容和區域鏈的可見性是非常有價值的.而且這只是乙個初步的實現,只提供給設計師和開發人們在審查由css區域格式化的內容時所需的最基本需求,我們未來會新增更多的功能支援.
原文:
譯 NodeJs系列 如何開始乙個Node專案
一般情況下我會使用npm來初始化乙個全新的node專案 npm initnpm會循例問我幾個問題之後便會在本地生成乙個package.json檔案。接下來我開始著手構建專案。首先我會從github倉庫拷貝乙份.gitignore模版檔案。之後 如果我還沒忘記的話 我通常會建立乙個開源協議的檔案。顯然...
django verbose name中文解碼出錯
對於執行在python3.x以上django1.6.x版本而言，由於統一使用了unicode,所以中文顯示的問題大大減少。對於以下 如果顯示unicodeerror錯誤 class book models.model title models.charfield verbose name 出版商 m...
譯 二 開始iOS程式設計之前，你還需要做什麼？
更新 帖子已經重新被更新過，以便能更好的相容xcode 5和ios 7。1.要有一台mac機器 機。2.註冊乙個蘋果開發者賬戶去申請註冊。整個註冊的流程非常的簡單。就好像註冊你的蘋果賬號一樣 如果你還沒有 只要填入你的個人資訊。3.安裝xcode 上面會多乙個xcode資料夾。在我寫這篇文章的時候，...