Five Simple Steps
A Pocket Guide
CSS3 layout modules by Rachel Andrew
2
3
A Pocket Guide to CSS3 Layout Modules by Rachel Andrew Published in 2012 by Five Simple Steps Studio Two, The Coach House Stanwell Road Penarth CF64 3EU United Kingdom On the web: www.fivesimplesteps.com and: www.rachelandrew.co.uk Please send errors to errata@fivesimplesteps.com Publisher: Five Simple Steps Editor: Owen Gregory Tech Editor: Nathan Ford Production Manager: Jo Brewer Art Director: Nick Boulton Design: Nick Boulton, Colin Kersley
Copyright Š 2013 Rachel Andrew All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher. ISBN: 978-1-907828-09-6 A catalogue record of this book is available from the British Library.
…
Foreword
6
I have been using CSS ever since it first became a practical possibility in browsers and I was a fairly early adopter of CSS for layout. I have always enjoyed playing with the latest features, despite the inevitable frustration of dealing with lack of support in browsers. In the last few years we have seen a great leap forward in what we can achieve with CSS – web fonts, gradients, shadows and media queries are now part of our everyday toolkit. CSS layout itself, however, has moved on little. Developers have experimented with using display:table and display:inline-block for layout, in order to mitigate the limitations of layouts based on absolute positioning and floats. Yet, these methods seem as much like hacks as those they try to replace, and come with their own problems. The future of CSS layout looks far brighter. In this little book I will cover some of the exciting modules that are part of the CSS3 specification. They promise a future where we can lay out elements to a grid and easily achieve the ambitions of equal height columns or spreading content evenly across a page. With the help of specifications put forward by companies such as Adobe, which knows a thing or two about layout, we can finally take control of how things are displayed in a web browser, without adversely affecting the use of that content in other ways. I have used examples in this book that have some implementation in one or more browsers, so you can try them out. Some of these modules are at a relatively early stage and implementations may change. Remember that you can give feedback to the standards process yourself. This is our web and we
7
should be keen to engage with those who are involved in creating the specifications we use. If you use any of these techniques in production you will need to ensure that your pages still display well for users whose browsers do not support that particular module. I don’t want to spend much time dealing with browser compatibility issues; however, at the end of each section you will find some tips and suggestions.
A note on vendor prefixes Almost everything I cover in this book will require vendor prefixes in some or all browsers. With the more stable modules – multicolumn layout and flexible box layout (flexbox) – I use Lea Verou’s -prefix-free script to show you the standard properties and still have working examples in browsers. I would suggest that in production you either add the prefixed versions to your CSS or use a CSS preprocessor to compile them into your final CSS. With the very new modules that only have support in one browser, and where the specification is highly likely to change, I have used the prefixes for the browser that I have tested the examples in. By the time this book is published it may be that other browsers will have added support with their prefixes. Owing to the experimental nature of these implementations, however, they may work differently. You should test and use the prefixes for other browsers where available, plus the non-prefixed version in production.
1
Multicolumn layout CSS3 multicolumn layout has been a tantalising possibility for some years now. However, with lack of support in Internet Explorer it hasn’t been taken up as much as it deserves. With IE10 supporting these properties, and its usefulness in creating responsive designs, I hope we will very soon see it used more. This module is the most mature and has the most browser support of all the modules I cover in this book, so it’s a great place to start our exploration of all that is new in CSS layout.
10
Multicolumn layout makes it possible to arrange content in columns, in the same way that content flows in a newspaper. You can take a container in your document and state that you want it to be arranged into columns, and the browser will make it so. If you specify the number of columns that you want the content arranged into, the browser will work out the width of each column so that it will fit into the parent box. If you specify a width for the columns then the browser will display as many columns as it is able, maintaining that width for each.
Example: Specifying column-width - view example .col-wrapper { column-width: 220px; } Setting column-width
11
Specifying a column-width means that the browser will fit as many columns into the container as possible, using the specified width as the ideal width. You may notice that when we specify the width for columns we don’t in fact get that exact width. The columns will always be even in the space, so the browser will work out how many columns can fit as close to the specified width as possible. The specification says: “[The column-width value] describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). Specified values must be greater than 0.” Therefore, when setting the width you should specify the optimal column width, though it may be that the actual width is different – especially in a flexible design.
Example: Specifying column-count - view example You can also specify how many columns you want and then let the browser decide how wide they should be, using column-count. .col-wrapper { column-count:3; } Setting the column-count to 4
12
Controlling gutters You can also see in my examples that the columns do not butt up against each other: there is a gap between each column. In the multicolumn layout specification this gutter is controlled by the column-gap property. If you set column-gap to zero there will be no space between columns and the text will run together. The specification suggests that user agents use a value of 1em as the default for this property; however, if you want to ensure your gutters are a certain width to line up with a grid, then you should set a value yourself.
Example: Setting the column-gap property - view example .col-wrapper { column-width: 220px; column-gap: 1.5em; }
Styling your columns Column styling is relatively limited in the current specification, although there is a note in the working draft stating that “[f]uture specifications may add additional functionality. For example, columns of different widths and different backgrounds may be supported.� At present you cannot style columns individually.
13
There is no way to set margins and padding on a column, or set the width or background colour of an individual column. We can, however, use a rule to divide our columns. This is achieved by way of column-rule properties: • column-rule-style • column-rule-width • column-rule-color These properties behave in the same way as border-style, borderwidth and border-color and can also be written as shorthand using
the column-rule property: column-rule: [width] [style] [color];
The column rule is placed centrally in the area created for the column-gap. To change the space on either side of the rule, adjust the
value you used for the column-gap property. If the rule is wider than the available gap then it will start to overlap text in the columns – it does not take up any space itself.
14
Example: Using column-rule - view example .col-wrapper { column-width: 220px; column-gap: 2em; column-rule: 2px dotted #ccc; } Setting a 2-pixel dotted rule between the columns
15
Column span If you would like an element to span all columns then you can give the property column-span a value of all. In the following example, I want the main h1 heading to span across all columns.
Example: Causing the h1 to span all columns - view example .col-wrapper h1 { column-span: all; padding: 0 0 .5em 0; }
The current specification gives only two values for column-span, all or none. Using column-span to cause the heading to span across all columns
16
Column breaks When using multicolumn layout you have control over how columns break. This can be useful where there are elements that you would prefer not to end up wrapped into a new column, or when you want to make sure a certain element always starts a column.
Example: Avoiding breaks inside paragraphs and before blockquotes - view example .col-wrapper p { break-inside: avoid; } .col-wrapper blockquote { break-before: avoid; }
Printing and paged media The specification states that multicolumn elements should not continue on to the next page. It would be very annoying if you had to read down one column, onto the next page and then back to the first page to start reading at the top of the next column! You can also determine how the content behaves when a page break falls in the middle of a paragraph or other element – just as you can control breaks when the content wraps into new columns. The properties avoid-page and avoid-column give you finer control. If you are happy for paragraphs to break across columns but not pages, in the example above you could use break-inside: avoidpage rather than just avoid.
17
Responsive design The multicolumn layout module is useful for responsive design as the specification means that the columns are responsive by default. As we have seen, the column width setting only sets the most desirable width for the column: the browser is left to work out the actual width. An image placed inside a column will be constrained by the column width, so the standard method of scaling down an image by using max-width will work within columns. If you do not set maxwidth: 100% on an image, and the image is wider than the column,
then the browser will crop the image. This behaviour is the same for any element within a column that is wider than the current column width.
Example: Images are constrained by the columns - view example The images are constrained by the column widths
18
You shouldn’t think of this module as being useful for just creating something like a newspaper layout. The following example shows a layout comprising a number of boxes and images arranged using multicolumn layout.
Example: Boxes and images - view example Multicolumn layout can be used to lay out boxes
19
These will display in a single column on narrower windows without you needing to write any extra code
20
Browser tips At the time of writing, multicolumn layouts are supported in several browsers. You may need to use a prefixed value, and in some cases not all properties will work. For the most up-to-date browser information see Can I Use. If a browser does not support multicolumn layout then it will simply ignore it, making this module safe to use. A non-supporting browser will render the content in a single column, which in most cases is perfectly acceptable – I would suggest you don’t attempt to polyfill this module.
21
2
CSS flexible box layout The CSS flexible box layout module, commonly referred to as flexbox, gives us a brand new layout mode in CSS – flex layout. It has been designed to make it easier to layout complex applications and webpages. In this section, I take a look at some of the main layout problems flexbox can solve.
24
Spacing items evenly Taking a group of items and spacing them along an axis is a task that has traditionally been rather difficult in web design. Floated elements need a width, yet each one might be a different width and getting them all to fit on a single line with equal spacing usually involves some JavaScript. Flexbox makes this task easy. In my markup I have a list that contains my navigation.
Example: Simple flexbox usage - view example <nav class="mainnav"> <ul> <li><a href="">Introductory</a></li> <li><a href="">The First Cat Show</a></li> <li><a href="">Habits</a></li> <li><a href="">Trained Cats</a></li> <li><a href="">Usefulness of Cats</a></li> </ul> </nav>
I would like these items to be spaced evenly as horizontal navigation. Using flexbox, this is as simple as setting them to display:flex and deciding whether I want space around or between
the elements.
25
Example: Simple flexbox usage - view example nav ul{ margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; } The navigation as a row with equal space between each item
Had we set the value of justify-content to space-around then the space would have been added all around each element equally, meaning that instead of being flush to the outside edges of the container, there would be some space before the first and after the last element.
26
The navigation as a row with equal space around each item
The simple example above uses some default behaviour of flexbox. The items here have been displayed as a row. This is the default behaviour and is equivalent to setting the property flex-direction to row. The flex-direction property can have one of four values: row; row-reverse; column; and column-reverse. These enable you
to display the items in a row, or reverse their order in a row; and similarly in a column, or a column with the order reversed. nav ul{ margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; flex-direction: row-reverse; }
27
Using flex-direction:row-reverse to display the items in reverse order
Another interesting aspect of flexbox is that it enables you to create equal height boxes, even if the content of some boxes is longer than others. The default value of the property align-items is stretch. This stretches each item in the group to the height of the tallest. You can see this in action in our navigation if we make the window narrower, so some items wrap on to two lines. The borders of all items remain the same height. Items in the group all take the height of the tallest item
28
The property align-items can also take the following values: • flex-start • flex-end • center • baseline • stretch To understand how these work you need to realise that flexbox has a concept of two axes: the main axis, along which items flow; and the cross-axis. By setting flex-direction to row or column you determine your main axis and whether that flows left or right, up or down; the secondary, or cross-axis, then runs across it. If the flex-direction is row then your main axis runs left to right. Setting align-items to flex-end means they will not take on the full height and shorter items will be aligned to the bottom of the box. Our example with the align-items property given a value of flex-end
29
Wrapping flexbox rows In the example we have been working with, if we make the viewport narrower, then the text in the items wraps. Ultimately, however, we will run out of room and the box will become wider than the available area. One way to deal with this is to set the items inside our flexbox element to wrap. Whether or not items are allowed to wrap is decided by the flex-wrap property, which can take values of wrap, nowrap and wrap-reverse. The default, if you do not set a value for flex-wrap,
is nowrap.
Example: Wrapping items - view example nav ul{ margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; align-items: stretch; flex-direction: row-reverse; flex-wrap: wrap; }
30
The items wrap if we add flex-wrap:wrap to the container
You can see now, though, that the spacing between items is less desirable. You can fix this by getting the elements themselves so stretch and fill some space. We can do that by setting the property flex to auto on the items themselves â&#x20AC;&#x201C; in this case I add this property
to the li element.
31
nav li { border: 1px solid #999; border-radius: 2px; flex:auto; margin: 0 1em 1em 0; text-align: center; }
The elements wrap on to two lines and take up all of the space.
32
Using the flex property Setting the value of flex to auto on an item makes the items fit nicely within a space, but there are other ways to use this property. In this example I have three boxes containing information about long-haired cat breeds. These are marked up with a class of box, and I have also added a class to identify each box individually.
Example: Three boxes - view example <div class="boxes"> <div class="box box1"> <h2>The Angora</h2> <p>… </p> </div> <div class="box box2"> <h2>The Persian Cat</h2> <p>… </p> </div> <div class="box box3"> <h2>The Russian Long-haired Cat</h2> <p>… </p> </div> </div>
33
To display these boxes in a row I am going to make the container â&#x20AC;&#x201C; boxes â&#x20AC;&#x201C; a flex element and then to each box inside I will assign a value to the flex property of 1. This gives each box an equal width within the space. .boxes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
.box { border: 1px solid #999; border-radius: 5px; flex: 1; margin: 0 1em 1em 1em; padding: 10px; } The three boxes are of equal width within the container
34
We might want one of the boxes to take up more space than the others, but still have the width calculated according to the available space. The third box in the markup has a class of box3. If I give box3 a flex value of 2 it will now take up twice as much space as boxes that are set to flex:1. .box3 { flex: 2; } The third box takes up twice the width of the other boxes
35
Ordering flex items We have already seen that it is possible to reverse the order in which items are shown. You can also target individual items and set an order for them with the order property. By giving each of my items an order property I can easily move box3, the wider box, to the centre, by giving it a value of 2. .box1 { order: 1; } .box2 { order: 3; }
.box3 { flex: 2; order: 2; } Using the order property to change the order of our items
36
The items remain exactly as they were in the HTML. This means you can order your markup so it makes sense in terms of accessibility and how it would be read out by a text-to-speech device. You can then use the order property to create a visual layout that works best.
Responsive design Flexbox is a great addition to our toolkit when we create responsive designs. Being able to wrap rows and flex items to fit the available space means that with very little effort simple designs can be responsive. Once you start to mix flexbox with media queries you can achieve far more complex layouts. Being able to display items independently of source order makes creating a different arrangement of elements for different screen sizes possible. You can also easily switch flex-direction as shown in the example below. We can display our navigation as a column until we get to a width of 700 pixels, at which point we switch to displaying it as a row. nav ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;
37
justify-content: space-between; align-items: stretch; }
@media only screen and (min-width: 700px) { nav ul { flex-direction: row; } }
Browser tips Flexbox is a good example of how specifications in their early stages can change. There is a lot of out-of-date information about flexbox available because the implementation has changed so much from the initial proposal. When searching for more information on flexbox, take note of this CSS Tricks article on how to check if the advice you are reading is current. While it would be possible to polyfill a lot of the flexbox functionality using JavaScript, you may also find that you can allow browsers to fall back to a linear state if they do not support flexbox. For example, our three boxes display as in the figure below in a nonsupporting browser.
38
Flexbox items linearized in a browser with no flexbox support
Falling back to a linearised display is easier if you are just using the module for small interface elements rather than your entire layout. Another possibility would be to use Modernizr to detect flexbox support and fork your CSS with flexbox and non-flexbox alternatives.
39
3
CSS grid layout The CSS grid layout module is still very much a work in progress and was proposed by Microsoft. There is an implementation of the current proposal in Internet Explorer 10, on which I am basing these examples.
42
Grid layout seeks to solve the problems of laying out complex web pages, a task which until now we have had to use floats and positioned elements for. It also allows us to separate how things are laid out from the source order â&#x20AC;&#x201C; something we saw in our exploration of flexbox. I really like the grid layout proposal and I hope after seeing these examples you will too.
Creating the grid To start laying items out on a grid we first need to create the grid on a parent element. We do this by setting the display property to grid (I am using the â&#x20AC;&#x201C;ms prefix) and then setting the number of columns and rows our grid will have.
Example: A simple grid layout - view example .wrapper { display: -ms-grid; -ms-grid-columns: 200px 20px auto 20px 250px; -ms-grid-rows: auto 1fr; }
The CSS above creates a grid inside the element with a class of wrapper. The grid will have five columns: a 200-pixel wide sidebar; a gutter of 20 pixels; a central column that will stretch to take up any available space; another 20-pixel gutter; and a final 250-pixel
43
wide column. So, this is a very simple layout with two fixed-width columns and a flexible central column. For the rows, I have set my first row as auto – it will expand to fit whatever we put into it – then a second row of 1fr. This is actually a fraction value, but in this case it will mean that this row takes up whatever space we have left – it’s a two row grid. We can now pop some items into the grid. My markup looks like this: <div class="wrapper"> <nav class="mainnav"> <ul> <li><a href="">Introductory</a></li> <li><a href="">The First Cat Show</a></li> <li><a href="">Habits</a></li> <li><a href="">Trained Cats</a></li> <li><a href="">Usefulness of Cats</a></li> </ul> </nav> <h2 class="subhead">Usefulness of cats</h2> <article class="content"> <p>…</p> </article> <blockquote class="quote"> <p>….</p> </blockquote> </div>
44
To put the navigation into the left static column, the article in the centre, and the quote on the right I can do the following: .mainnav { -ms-grid-column: 1; -ms-grid-row: 2; }
.subhead { -ms-grid-row: 1; -ms-grid-column:3; }
.content { -ms-grid-column: 3; -ms-grid-row: 2; }
.quote { -ms-grid-column: 5; -ms-grid-row: 2; }
All we do is say which column and row we want to place the content into. Remember that the gutters count as columns too, so the main column is actually column 3 and the right column is column 5.
45
The simple grid layout example
When trying to understand grids I have found it useful to visualise the process as creating an old-fashioned table for layout, except doing it in CSS. I then place my items inside the table cells. However, unlike tables for layout, by defining the grid in the CSS we are free to redefine it to suit the environment in which the content is displayed. This means that grids can be a powerful tool in the future of responsive design.
46
Grids and responsive web design I’m now going to take a look at a slightly more complex, and probably more realistic example to demonstrate how grid layout can be used for responsive design. My document is very simple: a div with a class of wrapper; then five sections marked up with a class of box containing some information; and an image from our Victorian book about cats. For simplicity, I have added a second class so that I can easily target each content area with CSS.
Example: A responsive grid layout - view example <h1 class="title">Extracts from "Our Cats, by Harrison Weir"</h1> <div class="wrapper"> <div class="box content1"> <h2>The first cat show</h2> <p> …</p> </div> <div class="box content2"> <h3>The Angora</h3> <p>… </p> </div> <div class="box content3"> <h3>The Persian Cat</h3> <p>… </p> </div>
47
<div class="box content4"> <h3>The Russian Long-haired Cat</h3> <p>...</p></div> <div class="box picturebox"> <figure><img src="fluffy.jpg" alt="Fluffy the cat" /> <figcaption>Fluffy, the cat</figcaption> </figure> </div> </div>
With just some basic CSS for styling, we end up with a linearised design as shown in the figure below. Our starting point
48
We now need to declare our grid, and Iâ&#x20AC;&#x2122;ll do this by adding to the properties for .wrapper. .wrapper { width: 90%; margin: 0 auto 0 auto; display: -ms-grid; -ms-grid-columns: 1fr (4.25fr 1fr)[6]; -ms-grid-rows: (auto 20px)[4]; }
I have set display to -ms-grid, declaring this element contains a grid layout. I have set up my columns using a shorthand syntax for multiple columns. By putting a set of columns in round brackets followed by a number in square brackets, we say that we want to repeat this column pattern n times; in this case, I want these two columns to be repeated six times. I use the concept of fractions to create a flexible grid. The gutters between my columns are to be 1 fraction unit; the columns themselves 4.25 fraction units. I then use the same syntax for rows, creating a row that will expand to fit the content followed by a 20-pixel gap between rows four times. If you refresh your page after adding this CSS you will find that the entire column has collapsed. This is because everything is now trying to fit into row 1, column 1 as we havenâ&#x20AC;&#x2122;t provided any positioning information. Once you have declared a grid on an element, all of its child elements need to be placed on the grid.
49
After declaring a grid on a parent element all child elements will display in row 1, column 1
I’m going to start by positioning my elements as I want them to display for narrower screen sizes. As people using such devices are likely to be reading from the top down, I’m going to display things pretty much in the order they are in the source – which I have structured in terms of content priority for screen readers. In this new world of separated source and layout I don’t need to worry about where things are in the source, as we will see.
50
.content1 { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-column-span:12; }
.content2 { -ms-grid-row:3; -ms-grid-column: 2; -ms-grid-column-span:5; }
.content3 { -ms-grid-row:3; -ms-grid-column:8; -ms-grid-column-span:6; }
.content4 { -ms-grid-row:7; -ms-grid-column: 2; -ms-grid-column-span:12; }
51
.picturebox { -ms-grid-row:5; -ms-grid-column: 2; -ms-grid-column-span:12; }
This all looks fairly straightforward. I now choose which row I want to put my items into â&#x20AC;&#x201C; remember that the 20-pixel gaps are rows, so we should place items into the odd-numbered rows. I then set the starting column for each area and set how many columns it should span. Most of my boxes are full-width, but I have split content2 and content3 into two columns. This now displays in the browser as a
simple layout. The layout on narrower screens
52
I am now going to add my first media query, and make some changes to the layout once the browser window reaches 700 pixels wide. @media only screen and (min-width: 700px) { .wrapper { -ms-grid-columns: 1fr (4.25fr 1fr)[9]; -ms-grid-rows: (auto 20px)[5]; } .content1 { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-column-span:17; } .content2 { -ms-grid-row:3; -ms-grid-column:8; -ms-grid-column-span:5; } .content3 { -ms-grid-row:3; -ms-grid-column:14; -ms-grid-column-span:5; }
53
.content4 { -ms-grid-row:3; -ms-grid-column: 2; -ms-grid-row-span: 3; -ms-grid-column-span:5; } .picturebox { -ms-grid-row:5; -ms-grid-column: 8; -ms-grid-column-span:11; } }
For this wider layout, I have redefined my grid to have more columns and an additional row. My first content area remains at full-width at the top of the layout. However, I have now split the other content into three columns, making one of them span across two rows, the other two becoming halfâ&#x20AC;&#x201C;height, and dropping the image in below them spanning both areas.
54
The more complex layout for screens wider than 700 pixels
55
Finally, I can rearrange my content again for wider screens with a media query that kicks in at 940 pixels wide. @media only screen and (min-width: 940px) { .wrapper { -ms-grid-columns: 1fr (4.25fr 1fr)[16]; -ms-grid-rows: (auto 20px)[3]; } .content1 { -ms-grid-row:1; -ms-grid-row-span: 3; -ms-grid-column: 20; -ms-grid-column-span:13; } .content4, .content2, .content3 { -ms-grid-row:1; } .picturebox { -ms-grid-row:3; } }
I have redefined the grid again, this time ending up with a pretty standard grid based on the 960 grid system. I can then move my content area to create a layout with three narrow columns, one wider column and the image sat under two of the narrower columns.
56
The wider screen layout
The real beauty of this module is the ease with which we can shift content around in the layout without changing the source markup. I also think the syntax of this module is pretty easy to understand once you have grasped the model â&#x20AC;&#x201C; certainly for old-school folk like me who remember using tables for layout!
57
Browser issues As already explained, this module has currently only been implemented in IE10, since the specification itself was proposed by Microsoft. If you are developing Windows apps you may already be able to use it in that context, though I really hope weâ&#x20AC;&#x2122;ll see implementations in other browsers soon.
4
CSS regions The final two sections of this book discuss some very interesting new proposals authored by Adobe and Microsoft. While these are at an even earlier stage than grid layout, they enable layouts that until now have been impossible and are worth our time when exploring all that is new in CSS layout.
60
The CSS regions specification creates an advanced model for content flow. We can specify regions of our document that content can flow into for display purposes – even if these regions are not next to each other in the document order. This sounds a bit strange in a web context – however, this kind of layout is often used in print design, in particular in magazines and newspapers. CSS regions does not provide any new methods for layout, and so can be used with any existing or future ways to position elements. To demonstrate how CSS regions work, it is easiest to look at an example. At the time of writing, the only browser that supports this is Chrome Canary with experimental WebKit features turned on. If you have a copy you should be able to play with the example code. Here is the HTML. I have an article element that contains the entire content of my article. I have then added a number of empty elements at the bottom of the document. <div class="wrapper"> <article class="main"> <h2>Usefulness of cats</h2> <p>…</p> <p>…</p> </article> <div class="region1 article-regions"></div> <div class="regionwrapper"> <div class="region2 article-regions"></div> <div class="region3 article-regions"></div>
61
<div class="region4 article-regions"></div> </div> <div class="region5 article-regions"></div> </div>
The article contains the content that I want to lay out, and the empty elements will become containers for that content. First, I need to use a new CSS property flow-into (using a â&#x20AC;&#x201C;webkit prefix) on the container for my content. The value article-thread is a name I have chosen for this content; it can be anything you want. .main { -webkit-flow-into: article-thread; }
Once you do this, the content will disappear as you havenâ&#x20AC;&#x2122;t yet specified anywhere for it to go. Each of my empty elements has a class of article-regions, so I can now target that class as being the recipient of the content. .article-regions { -webkit-flow-from: article-thread; }
This time, we are using the new flow-from property with a value that matches the name we used earlier. If you now refresh your page you will see that the content reappears. It is now flowing into the first of our regions. With the content flowing, we can start to lay it out by applying CSS to the specific regions.
62
.region1 { height: 10em; }
.regionwrapper { display: flex; flex-direction: row; } .region2 { flex: 1; padding: 10px; height: 40em; border-right: 1px dotted #ccc; } .region3 { flex: 1; padding: 10px; height: 40em; border-right: 1px dotted #ccc; background-color: #efefef; } .region4 { flex: 1; padding: 10px; height: 40em; } .region5 { padding: 1em 0 0 0; margin: 1em 0 0 0;
63
border-top: 1px dotted #ccc; height: auto; }
My region region1 now has a height of 10em. Once that height is reached, the content has to go somewhere else, so it flows into the next region. The next three regions have been positioned using flexbox into a flexible row of three columns, so my content flows into those. They have a fixed height, so again my content runs out of room and then has to flow into the final region which has a height of auto and so allows the content to display until it finishes. The complex layout is achieved without needing to break up the actual content in the document.
64
If I change my mind and want to insert something else into the middle of this content, I can. In the example below I have taken the article-regions class off the middle flexbox column, so the content
no longer flows into it. I can now use it for a nice picture of a cat and a quote â&#x20AC;&#x201C; unrelated to the content flowing around it.
The content ignores the central column as it is no longer a container for that content flow.
65
Browser tips We are looking at the sharp end of emerging CSS modules here, with support for regions only appearing in experimental form in WebKit browsers. This isnâ&#x20AC;&#x2122;t a technique youâ&#x20AC;&#x2122;re likely to be able to use in production yet. I think the possibilities for CSS regions are really exciting however, and if we as developers test and request support for a module, it is far more likely to become included in browsers.
5
CSS exclusions If you have ever needed text to flow around a shape, or wanted to cut out a shape in the middle of content, then you will be interested in the CSS exclusions and shapes module, proposed by Adobe. An earlier specification exists which referred to positioned floats, but this has been superseded by the current working draft.
68
We are all familiar with floats in CSS. The simplest example might be floating an image to allow text to flow around it. However, floats are fairly limited when used in this manner; the floated item always rises to the top, so while we can float an image left and wrap text to the right and below it, there’s no way to drop an image into the middle of the document and flow text all the way around, or position it at the bottom and let text flow round the top and side. It is this issue that the first part of the exclusions and shapes module solves, and as this is supported in IE10, as well as experimental WebKit builds, we can see an example in action. My markup is a simple block of text, marked up as an article with a class of main. Following this, I have a div containing an image of Fluffy, the cat. I’d like the image to appear floated inside the copy with the text wrapping around. <div class="wrapper"> <article class="main"> <h2>Usefulness of cats</h2> <p>…</p> </article> <div class="exclusion"><img src="fluffy.jpg" alt="Fluffy the cat" /></div> </div>
69
First, I am going to create a grid as we did earlier. Unlike floats, an exclusion needs to be positioned (hence the earlier name of positioned floats) and, as I am using IE10 to demonstrate this example, I can use the grid layout support for the positioning. My grid creates a three-column, three-row grid, and I then set my article to span all three rows and columns. Finally, I place my div with a class of exclusion into the central area. As this div comes
after the article in the source order it will display on top of the text. .main { -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column-span: 3; padding: 0 0 2em 0; } .exclusion { -ms-grid-row:2; -ms-grid-column:2; height: 160px; width: 200px; padding: 10px; }
70
The image sat on top of the text, taking its place on the grid
To create the exclusion, a floated image with text wrapped around, I just need to set the wrap-flow property on .exclusion. .exclusion { -ms-grid-row:2; -ms-grid-column:2; height: 160px; width: 200px; padding: 10px; -ms-wrap-flow:both; }
71
The value both means that the text will wrap around on both sides of the exclusion. The image now floats with text continuing on either side
Wrapping around rectangular shapes is not the only thing covered by the CSS exclusions and shapes module. Also at a very early stage in browser implementation is the possibility of wrapping text around and inside shapes. If you have Chrome Canary with experimental WebKit features turned on then you should be able to take a look at the examples posted by Adobe, or even have a go
72
at creating your own. This is still very new stuff and reasonably complex, although as it is being tested in WebKit it may very well be making its way to a browser near you soon.
Browser support The wrap-flow functionality will be very useful in providing more control over text wrapping around elements in a document and, with care, could start to be used fairly quickly as browsers begin to support it. By placing items in the source carefully you could simply fall back to alternative positioning in non-supporting browsers, or use JavaScript feature detection by way of something like Modernizr to check for support and offer an alternative positioning scheme. Even shapes, once implemented in some mainstream browsers, could be used with care. As long as the flowing of text is a niceto-have feature and not something integral to your design, there is no reason why you could not add these finishing touches for those browsers that support them â&#x20AC;&#x201C; especially if you know that the audience visiting your site is likely to use such browsers.
73
=
Conclusion Working through and testing these modules has been exciting and interesting, and I hope that I have encouraged you to take a look at what is possible now and what might be coming soon for CSS. Learning about shiny new things that we canâ&#x20AC;&#x2122;t use yet can be frustrating, but it is also important if we want to move forward. Participation in creating and testing these specifications is not something only for browser makers and big companies. If we want to see these modules in browsers then we â&#x20AC;&#x201C; the regular web designers and developers who use these features â&#x20AC;&#x201C; can get involved too. Take a look at Move the Web Forward: there are links there to help you get involved with the standards process in a variety of ways.