What is CSS Regions, and Why Does Google Want to Kill It?

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.

This entry was posted in Editorial and tagged , , , , , on by .

About Chris Minnick

Chris Minnick is an accomplished published author, trainer, web developer, and co-founder of WatzThis?. Chris has overseen the development of hundreds of web and mobile projects for customers ranging from small businesses to some of the world's largest companies. Books he's authored or co-authored include: Beginning HTML5 and CSS3 for Dummies, Webkit for Dummies, CIW eCommerce Certification Bible, and XHTML. Since 2001, Chris has trained thousands of Web and mobile developers in HTML, JavaScript, CSS, SEO, and full-stack web development. His current online courses, Creating Mobile Apps with HTML5 and Achieving Top Search Engine Placements are consistently among the most popular courses offered by online training provider Ed2Go.com. In addition to his role with WatzThis?, Chris is the winemaker at a micro-winery (Bad Astronauts Winery), contributor to several blogs (including chrisminnick.com), and an avid swimmer, cook, and musician.