The web is coming of age and has reached a point where it is no longer a collection of papers and articles. As we are finding new uses for the web we are finding new limitations in the technologies that power it. CSS regions is a solution to a fundamental problem we have when designing and building many of our websites. It simply allows for specified content to overflow into other containers. Overflowing content like this can be extremely difficult to do with JavaScript and performance of JavaScript solutions can be prohibitively bad but native implementations allow us to create designs and build websites we wouldn’t have been able to before.
At Vox Media there are a number of things that regions would allow us to do. Some things we have built with JavaScript instead of regions but the lack of region support has resulted in us not being able to do what we want to do in many cases. Here are a few of the projects where regions would be a big help:
SB Nation global nav
The SB Nation global nav consists of a long list of sports categories. Of course the site is responsive and as the nav gets smaller everything on the list won’t fit. This is similar to example 3 in the regions spec. Currently we are using JavaScript to send list items that overflow into a drop-down which was particularly difficult as the web font we are using changes how much space the content occupies making it more difficult to figure out where we needed to start the overflow. Regions would make this easy because we could simply put the stream of list items from the nav into the drop-down without doing complicated measurements in JavaScript.
Longform articles
Vox Media is well known for its longform content. We have been using magazine-style columns of text wrapping around images for years and there is no other way to do this other than to use arbitrary `div`s that arrange the content. Håkon Wium Lie’s argument that regions are the cause of arbitrary divs is false because we and everyone else who does these kinds of layouts use arbitrary divs to create areas of content anyway. Regions give us is the ability to create a purely semantic rendition of our markup to flow into layout in a way that degrades gracefully. This keeps the article itself free of unnecessary markup while still letting us create the layouts we are trying to achieve.
Home page design
Across Vox Media we also have complex and well curated home pages. These aren’t simply a list of articles in reverse-chronological order. These home pages are filled with articles that flow around breakers and ads in unique ways. Håkon Wium Lie states that regions are not responsive but there is no other easy way for us to flow these articles around some of this other content across breakpoints without regions. Most notably, the lack of regions is what prevents us from creating really big home pages for really big screens as there is no way to fill in sections with more articles as browser width gets wider. This inflexibility of content results in a less dynamic flow of articles on responsive home pages and puts real constraints on our designs. This isn’t an isolated incident as different teams in different situations have run into this issue when working on home pages.
A focus on performance is good, but JavaScript is less performant than native.
According to the Chrome team, supporting regions results in bloat and performance issues but regions solves real problems for us and creates new possibilities. JavaScript implementations of regions behavior is far less performant and more buggy than native implementations of regions in both WebKit and Internet Explorer. We need fast browsers but the lack of regions in Chrome and other browsers is holding us back from achieving our design goals within reasonable performance budget and development time.