Bruce Lawson’s personal site

CSS Regions, CSS Exclusions

At Web Directions and Opera’s very own pubgeekmeetupaganza, Stephanie Rewis and Peter Gasston discussed some of the new proposals for layout in CSS, including the CSS Regions and associated CSS Exclusions specs written by Adobe. For the first time, layout is “unboxed” and text can flow in (or around) arbitrary shapes.

Part of me thinks “yay, cool!”. The other part of me thinks that it’s a shame that some designers still haven’t yet come to terms with the idea that the Web’s not print, and still hanker after pixel-perfect layouts that mimic highly-designed magazines rather than design for a new medium.

CSS Regions are doubtless coming for iPads and other such devices where glossy magazine publishers feel safely DRM’d away from the nasty open Web, so we might as well get used to them.

At the moment, the regions have to be manually expressed as a series of points, but it’s easy to imagine some sort of CMS that allows the page author to upload a page’s background image which is then overlaid with a canvas/ SVG-based app that allows the user to trace arbitrary paths on the image (like Photoshop’s lasso tools) or choose primitive shapes such as circles, rectangles etc, and then the paths can be exported as CSS declarations.

Another useful feature that people have suggested would be the ability to tell the browser via CSS to wrap text using the alpha channel of an image so you wouldn’t need manually to define paths.

You can try Adobe’s prototype. It’s all clever stuff.

I’m looking forward to debugging pages laid out in a combination of floats, absolute positioning, grid layout, template layout, flex-box, CSS tables, multicolumns, regions and exclusions. And I bet you are too.

One Response to “ CSS Regions, CSS Exclusions ”

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.