Post navigation

How to use the CSS Regions Polyfill

We are really interested in getting your feedback on the CSS Regions Polyfill. So I thought that having a simple example to get you started with this JavaScript library could only help :).

This post assumes that you know what the CSS Regions proposal does and you have a basic knowledge of its syntax. If you don’t know this, maybe you should first read this tutorial.

1. Download the polyfill

Obviously, this is the first step. You can get the code from here (just look for the big green Download button). Save the archive on your computer and unzip the file.

2. Create a new HTML file

Next, create a new HTML file and include the cssregions.js file from the root of the archive. Note that there is a minified version too. But if you want to take a look at what the code does it is more convenient to use the non-minified version.

This is a simple markup that sets a main content area and a side bar on the right side. Notice that there are four empty DOM elements (<aside> and three divs with a class name starting with ad-region-). These elements will provide the regions that will hold the content retrieved from the div element with the ID “my-source”.

5. Add the CSS for defining the name flows and region chains

Now, it is time to add the CSS for defining the myregion flow. Copy this in the <head> section of your page:

This might look scary but it isn’t that scary actually. It uses media queries to turn on/off some of the regions used for laying the content. The same media queries are used to display or hide the side bar depending on the width of the page.