最近,開發人員和設計師們可以在WebKit中嘗試使用CSS區域特性了,我們認為是時候給他們一些開發工具了.最新版本的Chrome Canary中的web inspector現在已經支持下面這些功能:
- 查找文檔中所有的命名流.
- 顯示每個命名流的內容和區域鏈.
- 高亮頁面中的CSS區域,就像是把鼠標放在web inspector中對應的節點上一樣.
- 顯示不同的標志來表明內容是否適合一個區域,是否忽略了一個區域,以及某個區域是否是空的.
譯者注:可以到http://dev.w3.org/csswg/css3-regions/進一步了解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區域:
- 在地址欄輸入chrome://flags,回車進入Canary的flags頁面. (想要了解更多關於Chrome flags的信息以及如何使用它,請觀看這個視頻短片.)
- 找到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區域,http://adobe.github.com/web-platform/utilities/css-regions-support-matrix/
使用Web Inspector
現在你的Canary已經完全支持了CSS區域,是實戰的時候了.如果你沒有一個使用CSS區域的頁面,Adobe CSS區域主頁上面有幾個Demo可以使用.
可以通過下面的步驟來審查你的CSS區域:
- 打開一個使用CSS區域的頁面.
- 打開web inspector並激活Elements選項卡.
- 右擊任意一個元素,選擇CSS Named Flows…
在新彈出的面板左側,你會看到一個命名流的列表,如下面的截圖所示.注意“secondary”流左邊的小圖標,它表明有部分內容已經被忽略了(意思是需要更多的區域來容納溢出的內容):
點擊一個命名流,會在右邊的面板中打開它,然后你會看到這個命名流的內容和區域鏈.區域鏈中DOM節點左側的小圖標用來表明:這個內容是否合適,是否被忽略,是否是空的.
你還可以把鼠標移到一個區域鏈的DOM節點上來高亮這個區域:
在調試CSS區域時,你會發現web inspector提供給我們的內容和區域鏈的可見性是非常有價值的.而且這只是一個初步的實現,只提供給設計師和開發人們在審查由CSS區域格式化的內容時所需的最基本需求,我們未來會添加更多的功能支持.
原文:https://blogs.adobe.com/webplatform/2012/09/27/web-inspector-support-for-css-regions/