Now that developers and designers can start using CSS regions in WebKit, we decided it was time to give them some developer tools. The web inspector in the latest version of Chrome Canary now has support for:
- Finding all the named flows in a document.
- Displaying the content and the region chain for each named flow.
- Highlighting regions in your web page as you mouse over the DOM node in the web inspector.
- Visual cues corresponding to whether content fits within a region, oversets a region, or whether the region is empty.
Getting Chrome Canary
Web inspector support for CSS regions is currently only available in Chrome Canary. Canary is a version of Google Chrome that contains the latest browser features — some of which may be experimental. Like Chrome, Canary updates automatically, and it can be run side-by-side with the stable version of Google Chrome. If you want a preview of the newest features and capabilities coming to the web, it’s a good idea to have Canary installed.
Enabling Web Inspector Support for CSS Regions
Once you have Canary installed, you have to go through a few steps to fully enable CSS regions support:
- Access Canary’s flags by typing chrome://flags into the location bar. (For more information on Chrome flags and how to use them, watch this short video.)
- Find the Enable Developer Tools experiments section and click on the Enable link.
- Find the Enable experimental WebKit features section and click on the Enable link.
- Click on the Relaunch Now button at the bottom.
- Open the web inspector either by hitting alt + command/control + i, or by going to View → Developer → Developer Tools.
- Click on the settings icon () in the lower right-hand corner, then click on the Experiments tab.
- Check the CSS Regions Support check box.
(Note that these steps will no longer be necessary once CSS regions is fully supported in the mainline version of Chrome.)
Using the Web Inspector
Now that you have support for CSS regions enabled in Canary, it’s time to see it in action. If you don’t have any content that uses CSS regions, there are several demos you can check out on Adobe’s CSS Regions home page.
To use the web inspector to inspect your CSS regions:
- Load some content that uses CSS regions.
- Open the web inspector and navigate to the Elements tab.
- Right-click on any element and choose CSS Named Flows…
In the left-hand panel, you will see a list of your named flows as in the screenshot blow. Note how the icon beside the “secondary” flow indicates that the content is overset (meaning that more regions are required to accommodate the rest of the content):
Click on the named flows to open them up in tabs in the panel to the right. Inside the tab, you will see each named flow’s content and region chain. The icons beside the region chain DOM nodes indicate whether the content fits, whether the content is overset, or weather the region is empty.
And, of course, you can mouse over the region chain DOM nodes to highlight the region in the web page:
If you’re working with CSS regions, you’ll find that the web inspector provides invaluable visibility into your content and region chains. This initial implementation provides the basics of what designers and developers need to inspect content formatted with CSS regions, and we’ll be adding additional support in the future.