Blog Posts
Currently if you have a page where content is separated by a drastic change in layout you will need to include part of your content inside one element, and the other part inside another element. If you’re using a CMS, this means you need to have two content fields for what is essentially related content.
CSS Columns already offers functionality to separate content in to columns, but CSS Regions provide greater control and flexibility of content on your page by allowing content to flow through the page structure, whatever that structure is.
CSS Regions are defined areas of the page where content can flow. If the content is too large for one region, it will continue to flow in to the next region. If the page is resized or the text size is increased, the page will automatically reflow through the regions. The following diagram shows a couple of simple examples of where regions could be useful:
With CSS Regions, we need to specify:
- Our content source element(s).
- The elements of our page we wish to populate (our regions).
Content Source
The element that contains your content source is given the CSS property ‘flow- into’, along with the vendor prefix alternatives.
The value of this property is called a “named flow” and will need to match the value we specify for our target elements later. Most alphanumeric values are allowed, however the named flow cannot begin with a number, nor can the values ‘none’, ‘inherit’, ‘default’, ‘auto’ and ‘initial’ be used. In the example below, we give our named flow “myFlow”.
<div id="source">
<h1>CSS Regions</h1>
<p>Currently if you have a page where content is separated by...</p>
</div>
#source {
-moz-flow-into: myFlow;
-ms-flow-into: myFlow;
-o-flow-into: myFlow;
-webkit-flow-into: myFlow;
flow-into: myFlow;
}It is possible to have multiple sources, simply by assigning the ‘flow-into’ property to multiple elements. The content will be sourced in the order it appears in the DOM (also known as the document order).
Because we are telling this content to appear elsewhere, this source element will not visibly appear on the page, although it will remain in the DOM.
Regions
Our regions are the block elements we wish to display the content in. Regions need to be given the property ‘flow-from’ with the value of the “named flow” we specified in the flow-into declaration, along with the vendor prefix alternatives.
.region {
-moz-flow-from: myFlow;
-ms-flow-from: myFlow;
-o-flow-from: myFlow;
-webkit-flow-from: myFlow;
flow-from: myFlow;
}There can be one or more target regions, with the source content appearing in and flowing through each element in the order it appears in the DOM. If you look at the DOM, you will see each of these regions remains unpopulated.
Specifying the flow for each region works in the same way as applying any other CSS rule. For example, you could identify all of your regions by using a shared classname (as in the example above), or you could list them individually using IDs.
Because the DOM for these regions remains untouched, there are a couple of other challenges. Firstly, a width and height needs to be defined for each region as by default it believes the element is empty. Secondly, selector rules to apply styles or access the DOM using JavaScript either need to be applied to the source selector or need to use the @region rule. For example, you can modify all of the named flows paragraphs text color to red using:
#source p {
color:red;
}In the future you will be able to use the @region rule:
@region .region {
p {
color:red;
}
}Using @region we can specify a different selector to target a single region. For example, if we wanted the first region to show the text with a different font weight or color, we could assign an ID to the HTML of our region and then use it as a selector here.
Overflows
The region-overflow property will allow us to control what happens at the end of the last region. Using ‘auto’ (as shown in the following example) will allow content to continue to flow outside of the region. Depending on the overflow property used, the content may flow outside of the region (overflow:auto), or it may be truncated possibly cutting off the bottom half of a line (overflow:hidden).
.region {
overflow:auto;
region-overflow:auto;
}Using break (as shown in the following example) will stop the content from overflowing when it reaches the end of the last region as if it were flowing to another region, regardless of the overflow settings applied to the element.
.region {
region-overflow:break;
}If you are worried that your content does not fit in to the regions provided, you will eventually be able to use JavaScript to determine whether your content is overflowing. Please note, no browser has yet implemented getFlowByName, and when they do it will use vendor prefixes; so the following code is just theory:
if (document.getFlowByName) {
var flow = document.getFlowByName('myFlow');
if (flow.overflow) { // true if the content is overflowing
var container = document.getElementById('container');
var newRegion = document.createElement('div');
newRegion.classList.add('content');
container.appendChild(newRegion);
// or in jQuery:
// $('#container').append('');
}
}Browser Support
Now the fun part. At the time of writing, only two browsers support CSS Regions - Chrome and Internet Explorer 10. They don’t support all the features discussed here. And they support them differently.
Firstly, the browsers only support flow-into and flow-from. Currently there is no implementation of @region or region overflows.
Chrome will allow you to specify any element as the source for your content providing the content exists on load, while Internet Explorer 10 currently only allows the source content to be loaded from an iframe… which currently means the two implementations are incompatible with one another.
There is currently no support in Firefox or Opera, but you can expect CSS Regions to be supported in Safari 6.
You can see the latest browser support on CanIUse.com.
Demos
I’ve created a couple of demos, one for browsers that don’t support iframe flows (Chrome) and one for browsers that only support iframe flows (Internet Explorer 10). Provided the other browser vendors do not implement something radically different, these demos should work when they implement CSS Regions.
If you’d like more information, you can check out the W3C Spec for CSS Regions.
The Start of Something New
Friday, January 12 2018
After almost 11 years, I am moving on from AKQA to pastures new.
The Quest for the Perfect Workflow
Friday, May 16 2014
Today I spoke at jQuery UK on my Quest to find the Perfect Workflow. This post provides detailed information; slides and the links to the material mentioned in my talk. Now updated with screencast!
Creating a List of Posts in Assemble
Thursday, February 27 2014
In the previous post, I showed how to get started with Assemble. Now we have content, let's look at how we can create a list of posts.
Getting Started With Assemble
Wednesday, February 26 2014
Want to create a static site blog with Assemble? You've come to the right place. This in-depth tutorial will get you started with creating a blog in Assemble!
Shrinkwrap Your Dependencies
Wednesday, February 5 2014
Front end development has evolved over the last couple of years thanks to `npm` popularised by task runners such as Grunt and Gulp. Thanks to our package.json files, it's easy for another developer to get set up on our project in seconds by typing `npm install`. But what happens when some time has passed and your project dependencies have moved on? A new version of a package may introduce a new bug, or completely change its functionality altogether.
Beginning Web Development
Tuesday, January 7 2014
There are so many things to learn in web development now that it can feel incredibly overwhelming - but it can also be very rewarding. What fascinated me about web development was the ability to create - I love to create - and when I started out building web pages I found it incredibly easy to express my creativity with HTML and CSS in just a few lines of code. Here's some tips for if you're just starting out!
jQuery On and Off Namespacing
Tuesday, February 5 2013
Being able to apply and remove events with `on()` and `off()` is great, but sometimes there is a requirement to either trigger or remove a subset of events that have been added to an element. Here's how!
Sublime Text 2 Cheatsheets
Monday, December 24 2012
As my Christmas present to you, here are 2 cheatsheets (one for Mac, one for Windows) so you can learn and reference those shortcuts to improve yourself and your developer skills.
Canvas Animated Particles 3D Effect in 5 Minutes
Sunday, December 23 2012
A couple of months ago, I gave a PechaKucha talk about creating a 3D animated particles effect with the canvas element.
Extending getUserMedia With Canvas
Sunday, July 1 2012
Following on from my previous post which introduced us to getUserMedia, I wanted to share two ways you can extend getUserMedia's video capture using my good friend, the canvas element.
Introduction to getUserMedia
Saturday, June 30 2012
For a long time in the 'Flash vs HTML5' comparison arguments, one advantage Flash had was the ability to capture audio and video from the users computer. With upcoming browser releases, it is now possible to do this with JavaScript and the HTML5 video element, and its very simple to do.
CSS3 Flexbox Carousel
Friday, May 25 2012
Carousels are one of the most common components web developer's build. As other trends come and go, carousels tend to stay.
State of the Browser 2012
Monday, April 30 2012
A rainy April Saturday in North Greenwich (London) was the host of this year's State of the Browser; where a representative from four of the five browser vendors spoke about how their browsers have progressed in the last year and what we have to look forward to going forward.
Scaring Off Beginners
Friday, April 20 2012
There has already been far too much conversation about whether semicolons are appropriate to use at the end of lines in JavaScript. Serious problems could have been solved in the time JavaScript experts have spent arguing about this. And if the experts can't make a decision on something as simple as semicolons, what chance do beginners have of understanding JavaScript at all?
Complying With The EU Cookie Law
Thursday, April 19 2012
The cookie law is a new EU privacy legislation that requires websites to provide clear and comprehensive information about the cookies being stored; and obtain consent from visitors in order to store or retrieve any information about the user.
Thoughts on Implementing Responsive Design
Monday, March 19 2012
Responsive design is the latest buzzword in a long series of web buzzwords which has featured 'XML', 'Web 2.0' and 'HTML5' to name a few; but it's one that shouldn't be dismissed.
CSS Regions
Tuesday, March 13 2012
Currently if you have a page where content is separated by a drastic change in layout you will need to include part of your content inside one element, and the other part inside another element. If you're using a CMS, this means you need to have two content fields for what is essentially related content. CSS Columns already offers functionality to separate content in to columns but CSS Regions provide greater control and flexibility of content on your page by allowing content to flow through the page structure, whatever that structure is.
My JS1k 2012 Entry
Monday, February 27 2012
This year I decided to enter the JS1k competition for the first time. The idea behind JS1k is to produce a cool JavaScript application in under 1kb (1024bytes) of code. I had not done any JavaScript golfing before, so I thought it would be a nice little challenge for myself. I didn't realise at the time quite how addictive or time-consuming JavaScript golfing was going to be!
CSS3 Backgrounds of the Future
Monday, February 13 2012
Whilst we've been busy supporting older versions of Internet Explorer, a few new CSS features for backgrounds have sprung out of the woodwork and in to our browsers.
jQuery UK 2012 Conference
Saturday, February 11 2012
Yesterday I travelled to Oxford to attend the jQuery UK conference, which the team at White October carefully crafted together. The snow threatened to stop me, but thankfully calmed down by the morning. So a quick hop, skip and jump on to a train and coach; and I found myself in Oxford at the Saïd Business School.
Modernizr Prefixed
Saturday, February 11 2012
There was a new release of [Modernizr yesterday (2.5.1), and included within this release was some brand new features to the Modernizr Prefixed() API (introduced in 2.0), which can take away some of the pain of vendor prefixes from your JavaScript.
Keeping It Real Simple
Monday, February 6 2012
Last week I had the opportunity to go on a presentation skills course, and one of the tasks we were set was to explain one aspect of our job role to a group of people who had no experience in our field using the LIONS approach using zero jargon.
Impress at Presentations with Impress.js
Tuesday, January 31 2012
The other day I mentioned on Twitter that I was playing around with Bartek Szopka's Impress.js library to write a presentation and it seemed to gather some interest. I then gave the presentation, and that gathered some more interest; so I thought I would write a short blog post about how to use Impress.js.
Writing for the Web
Wednesday, November 30 2011
Today is Blue Beanie Day, an anniversary where developers change their avatars to wear blue beanies to show their support for web standards. Today is also the day a new web initiative has been launched called Move the Web Forward, with a simple goal of making it easy for developers to start contributing to the web platform.
Using jQuery .on() and .off()
Thursday, November 10 2011
With the release of jQuery 1.7 on November 3rd came two new ways to attach event handlers - .on() and .off(). These two additions unify all types of (good) event handling in jQuery and will help you write tidier and more efficient code in the future.
Front End Code Etiquette
Wednesday, November 2 2011
One of the most interesting parts of working as a web developer comes from making a decision on how to organise code depending on a particular project or problem. There are multiple ways to do the same thing, and there's not necessarily a wrong or a right answer for every situation.
Self Executing Anonymous Revealing Module Pattern
Thursday, October 27 2011
I thought as a way to kick this blog off I would share this JavaScript pattern with you which I've started using recently. I can't take any credit for this pattern - I discovered it on my Internet travels, so all thanks and kudos go to Elijah Manor on 'Enterprise jQuery'.
Welcome
Friday, October 21 2011
If you're reading this, you've reached the first post of my blog. Depending on whether I've written a few or many blog posts at this point, this may be an achievement that you've reached this post, or it may have been a simple slide of the finger.