This is the full version of my main presentation for 2013, providing an overview of the most interesting new layout features available in CSS3, along with advice on supporting older browsers, and some context around why they are important.
3. In the early days
✴ We thought the Web was print
✴ Limited device landscape meant
limited outlook
✴ Limited toolset
Thursday, 14 March 13
4. Print means
✴ Designer has full control
✴ Technologies will be supported
✴ Canvases are fixed
Thursday, 14 March 13
5. Web means
✴ Designer has less control
✴ Technologies won’t necessarily be
supported
✴ Canvases are variable
Thursday, 14 March 13
6. Limited devices...
✴ We had desktops and laptops
✴ Of around 480 x 320, 640 x 480...
✴ ...or 800 x 600 if you were really
posh
✴ (We’ve come a long way since
then)
Thursday, 14 March 13
7. ...means limited outlook
✴ Designing for the page
✴ Fixed, inflexible designs
✴ Mobile needed a separate site?
✴ WAP was a good idea?
Thursday, 14 March 13
8. Limited toolset
✴ We didn’t have a good toolset for
layout
✴ CSS came along soon after ...
✴ ..but CSS support didn’t
✴ So we got into HTML tables and
spacer GIFs
Thursday, 14 March 13
9. Consistent CSS support
✴ Was very welcome...
✴ Still didn’t give us much in the way
of layout
Thursday, 14 March 13
10. CSS2 gave us
✴ floats: limiting, and kind of abused.
✴ positioning: feh.
✴ margins, padding: pfffff.
✴ borders.
✴ meh.
Thursday, 14 March 13
11. We still have problems
At this point, there was still a raft of
design problems that were absurdly
difficult to solve on the web.
Thursday, 14 March 13
12. What about
✴ Centering stuff?
✴ Same height columns?
✴ Flexible multiple columns?
✴ Complex floats?
✴ Shrinkwrapping contents?
✴ etc.
Thursday, 14 March 13
13. Centering stuff™
<figure>
<div>
<img src="../base-styles/grim-
north.jpg" alt="A map of the North of
England">
<figcaption>Figure 1.1: It's grim up
North.</figcaption>
</div>
</figure>
Thursday, 14 March 13
14. Centering stuff™
figure {
text-align: center;
}
figure div {
display: inline-block;
...
}
Thursday, 14 March 13
20. Media queries
✴ Same content, different layouts
✴ Polyfills/fixed layouts for old IE
Thursday, 14 March 13
21. Media queries
media="screen and (max-width: 480px)"
@media screen and (max-width: 480px) {
/* do amazing stuff for
narrow screens */
}
Thursday, 14 March 13
22. Media queries
/* Mobile first - make your mobile layout
the default... */
@media screen and (min-width: 481px) {
/* ...then do amazing stuff for
wider screens */
}
Thursday, 14 March 13
24. matchMedia
✴ matchMedia = media queries inside
script
✴ For IE<10 and Opera Presto, polyfill
github.com/paulirish/matchMedia.js/
Thursday, 14 March 13
25. matchMedia example
if (window.matchMedia("(min-width:
480px)").matches) {
/* Do stuff for wider screens */
} else {
/* Do stuff for narrow screens */
}
Thursday, 14 March 13
26. More on Media queries
http://dev.opera.com/articles/view/
love-your -devices-adaptive-web-
design-with-media-queries-viewport-
and-more/
Thursday, 14 March 13
27. viewport/CSS
device
adaptation
Thursday, 14 March 13
28. Mobile browsers lie
✴ About viewport width
✴ Some also lie about the resolution
✴ So media queries alone don’t cut it
Thursday, 14 March 13
32. @viewport
✴ Because viewport is more of a
style thing
✴ Specify viewport inside the
@viewport rule
✴ Opera Presto, IE10, WebKit
Thursday, 14 March 13
42. align items on main axis
section {
justify-content: center;
}
/* can take other values such as flex-start,
flex-end, space-between and space-around */
Thursday, 14 March 13
44. align items on cross axis
section {
align-items: stretch;
}
/* can take other values such as flex-start,
flex-end, and center; */
Thursday, 14 March 13
49. Flexing our muscle
✴ The flex property
✴ Set what proportion of available
space child elements occupy
✴ Unit-less proportion values
Thursday, 14 March 13
50. Flex property
nav {
flex: 1;
}
article {
flex: 3;
}
Thursday, 14 March 13
52. But there’s more
article {
flex: 3 2 400px;
}
/* flex-grow shares out positive space
flex-shrink shares out overflow reduction
flex-basis initially applied
= CAN GET BLOODY COMPLICATED */
Thursday, 14 March 13
60. Multi-col layouts
✴ Break content into multi-col
✴ Cut down on markup cruft
✴ Specify column breaks, column
rules and heading span
✴ Most modern browsers have this
Thursday, 14 March 13
61. Great at some things
<article>...</article>
article {
column-count: 2;
column-gap: 1rem;
column-rule: 2px solid rgba(0,0,255,0.25);
}
Thursday, 14 March 13
72. CSS grid layout
✴ A proper grid system for the web
✴ Completely remove content from
any layout concern
✴ IE10 only at the moment
✴ Spec in flux
Thursday, 14 March 13
73. Define your grid
body {
display: grid;
grid-columns: 4% 20% 20% 12% 20% 20% 4%;
grid-rows: 300px 450px 450px 450px 300px;
}
Thursday, 14 March 13
74. Define your grid
contents
header {
grid-column-position: 1;
grid-row-position: 1;
grid-column-span: 7;
}
Thursday, 14 March 13
78. CSS regions
✴ Turn containers into vessels to
flow content into
✴ Flexible complex layouts
✴ IE10 and Chrome Canary only at the
moment
Thursday, 14 March 13
79. Put your content in a
separate block
<article class="content">
<h2>Introduction</h2>
<p>Hello, dear readers...
</article>
Thursday, 14 March 13
80. Then create your layout
blocks
<div class="layout">
<div class="text-container"></div>
<div class="text-container"></div>
<div class="image-container">
...
</div>
<div class="text-container"></div>
</div>
<div class="text-overflow"></div>
Thursday, 14 March 13
81. Specify where to
flow it into
.content {
-webkit-flow-into: article;
}
.text-container, .text-overflow {
-webkit-flow-from: article;
}
Thursday, 14 March 13
84. CSS exclusions
✴ Create really complex floats
✴ Flow content around (and inside)
complex shapes
✴ Chrome Canary/IE only at the
moment
Thursday, 14 March 13
86. Position your exclusion
<article class="content">
<header>
...
</header>
...
</article>
header {
position: absolute;
etc.
}
Thursday, 14 March 13
87. Then exclude it!
header {
position: absolute;
etc.
wrap-flow: both;
/* Can also take values of start, end,
minimum, maximum, clear */
}
Thursday, 14 March 13
88. Different effects
both start end
Text
minimum maximum clear
Thursday, 14 March 13
93. rems
✴ rem units used throughout my
examples
✴ size relative to the root (html) font-
size, not the parent font size.
✴ Much easier maths
Thursday, 14 March 13
94. vh, vw, and vmin
✴ Percentage of viewport size
✴ 1vw = 1% of viewport width
✴ 1vh = 1% of viewport height
✴ 1vmin = 1vw or 1vh, whatever is
smallest
Thursday, 14 March 13
95. vh, vw, and vmin
✴ Supported in IE10, FF Chrome, iOS,
,
Blackberry?
✴ text-size relative to viewport =
accessibility problem?
Thursday, 14 March 13
98. In truth
✴ A lot of this stuff doesn’t degrade
very gracefully
✴ Not a surprise, as layout is a
pretty big deal
Thursday, 14 March 13
99. So do we just wait until support is
everywhere and IE6-9 is destroyed?
Thursday, 14 March 13
100. Hell no!
✴ Intelligent alternatives via feature
detection
✴ @supports: native feature
detection
✴ Modernizr is still an excellent
solution
Thursday, 14 March 13
101. @supports
/* Provide basic layout, e.g. with floats */
@supports (display:flex) {
/* Provide Flexbox layout for supporting
browsers */
}
Thursday, 14 March 13