Menu

Tag Archives: CSS

CSS Regions is a technology invented by Adobe in order to allow magazine-style layouts in web browsers. CSS Regions would solve one of the biggest problems with web layouts, which is that there’s no way to flow content from one area of a web page into another area, such as has been possible in desktop publishing for as long as desktop publishing has existed.

To understand the need for CSS Regions, take a look at any magazine — content flows around pictures, is continued on the next page, and moves to the left and right of images and pull-quotes.

Now look at a typical web site. Article content flows in one column, no matter how wide the browser window is. Separate regions of text are separate from each other. As a simple example, look at an article that spans multiple pages on a website. Those pages aren’t connected to each other. Each is an island of content — if you resize your browser window to be thinner, the same number of words still appear on page 1 and copying and dragging to highlight the content in an article doesn’t span to page 2, or even necessarily around pull quotes.

Content on web pages is fragmented into different regions in order for it to fit nicely and look good. The result is that the sort of layouts that are routine in print are impossible or highly inconvenient on the web.

CSS Regions would solve this problem by allowing web page designers to connect different parts of a web page and flow text dynamically into them. The idea is simple and intuitive.

When Adobe first proposed CSS Regions, progress was made on getting it implemented in the WebKit browser engine and even in Internet Explorer. However, Google’s decision to fork WebKit to create their own browser engine, Blink, changed everything.

Google announced earlier this year that they’re no longer pursuing support for CSS Regions, because their priority is to simplify Blink in the interest of increasing performance, particularly on mobile devices.

While performance is certainly a noble goal, I have no doubt that Google could make CSS Regions work in a performant way if they wanted to. It may be that Google has just judged CSS Regions to be too complicated (it’s really not) and is working on a better solution. Or, it may be that Google doesn’t want to have to compete with Safari and mobile Safari (which both support CSS Regions) and announcing that the most popular browser (currently Chrome) won’t support it is certainly an effective way to make sure that developers don’t start using it and get attached to how well it works in Apple’s browsers.

I certainly hope that Google changes it’s mind, or that Google and Adobe can work together to find a way to implement the functionality of CSS Regions in Chrome. In the meantime, if you’re interested in trying out CSS Regions, Adobe has released a polyfill that will enable the functionality of CSS Regions in every browser, using JavaScript.