最近,开发人员和设计师们可以在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/