<commit_before>---
title: An Introduction to CSS Regions
authors:
- chris-mills
tags:
- css3
- layout
- modernizr
- regions
layout: article
---

## Introduction

CSS3 brings with it many features to help us build complex, flexible layouts more easily and logically, without having to resort to JavaScript and painful hacks. One such feature is described in the [CSS Regions Module Level 3][1] — the basic idea here is that you write your content into some good old semantic HTML elements, and then also define a separate set of (non-semantic) containers that will serve as the scaffolding on which to hang your styles that define layout, etc. You then flow your content into your layout containers using the straightforward regions properties. This is nice, as it means you can keep your content completely separate from your layout concerns, without duplicating semantics/data and affecting accessibility. And as an added bonus, providing intelligent alternatives using Modernizr is very straightforward. So let’s move forward and have a look!

[1]: http://dev.w3.org/csswg/css3-regions/

Regions is currently in Editor’s draft stage, so it could change a fair bit before its final publication. At the time of writing, it only works in Chrome Canary, IE10 (in a different way, [involving IFrames][2]) and Opera 16, but it is still useful to play with such technologies early, so you can learn them ahead of time and provide valuable feedback to the spec writers. In Chromium/Opera, you’ll need to enable the “Experimental WebKit features” flag (type about:flags into a new tab and search for it, or run the browser from the Terminal/command line with the `--enable-experimental-webkit-features` flag) for it to work.

[2]: http://msdn.microsoft.com/en-us/library/ie/hh673537%28v=vs.85%29.aspx#implementing_css_regions

To give feedback on Regions, [contact the CSS working group via their mailing list][3].

[3]: http://lists.w3.org/Archives/Public/www-style/

## Introducing a regions example

To demonstrate how regions work, let’s look at an example. You can [test the regions example live][4], or see what it looks like in Figure 1.

[4]: /articles/introduction-to-css-regions/regions-modernizr.html
<commit_msg>Add intro for article “An Introduction to CSS Regions”<commit_after>---
title: An Introduction to CSS Regions
authors:
- chris-mills
intro: 'CSS regions is a nascent CSS feature that provides a way for us to completely decouple our content from our layout, flowing specified content containers into layout containers to give us a lot of flexible power. This article provides a basic introduction to using regions and serving fallbacks to non-supporting browsers.'
tags:
- css3
- layout
- modernizr
- regions
layout: article
---

## Introduction

CSS3 brings with it many features to help us build complex, flexible layouts more easily and logically, without having to resort to JavaScript and painful hacks. One such feature is described in the [CSS Regions Module Level 3][1] — the basic idea here is that you write your content into some good old semantic HTML elements, and then also define a separate set of (non-semantic) containers that will serve as the scaffolding on which to hang your styles that define layout, etc. You then flow your content into your layout containers using the straightforward regions properties. This is nice, as it means you can keep your content completely separate from your layout concerns, without duplicating semantics/data and affecting accessibility. And as an added bonus, providing intelligent alternatives using Modernizr is very straightforward. So let’s move forward and have a look!

[1]: http://dev.w3.org/csswg/css3-regions/

Regions is currently in Editor’s draft stage, so it could change a fair bit before its final publication. At the time of writing, it only works in Chrome Canary, IE10 (in a different way, [involving IFrames][2]) and Opera 16, but it is still useful to play with such technologies early, so you can learn them ahead of time and provide valuable feedback to the spec writers. In Chromium/Opera, you’ll need to enable the “Experimental WebKit features” flag (type about:flags into a new tab and search for it, or run the browser from the Terminal/command line with the `--enable-experimental-webkit-features` flag) for it to work.

[2]: http://msdn.microsoft.com/en-us/library/ie/hh673537%28v=vs.85%29.aspx#implementing_css_regions

To give feedback on Regions, [contact the CSS working group via their mailing list][3].

[3]: http://lists.w3.org/Archives/Public/www-style/

## Introducing a regions example

To demonstrate how regions work, let’s look at an example. You can [test the regions example live][4], or see what it looks like in Figure 1.

[4]: /articles/introduction-to-css-regions/regions-modernizr.html

{'fraction_non_alphanumeric': 0.06387848522679983, 'fraction_numerical': 0.012900540990428632, 'mean_word_length': 4.589534883720931, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6740581', 'n_tokens_mistral': 1283, 'n_tokens_neox': 1203, 'n_words': 684}