This version of my main presentation for 2013, first given at the Camp Digital event in Manchester, provides 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
Friday, 8 March 13
4. Consistent CSS support
✴ Was very welcome...
✴ Still didn’t give us much in the way
of layout
Friday, 8 March 13
5. CSS2 gave us
✴ floats: limiting, and kind of abused.
✴ positioning: feh.
✴ margins, padding: pfffff.
✴ borders.
✴ meh.
Friday, 8 March 13
6. We still have problems
At this point, there was still a raft of
design problems that were absurdly
difficult to solve on the web.
Friday, 8 March 13
7. What about
✴ Centering stuff?
✴ Same height columns?
✴ Flexible multiple columns?
✴ Complex floats?
✴ Shrinkwrapping contents?
✴ etc.
Friday, 8 March 13
13. Media queries
✴ Same content, different layouts
✴ Optimized UIs!
✴ Polyfills/fixed layouts for old IE
Friday, 8 March 13
14. Media queries
/* Mobile first - make your mobile layout
the default... */
@media screen and (min-width: 481px) {
/* ...then do amazing stuff for
wider screens */
}
Friday, 8 March 13
16. matchMedia
✴ matchMedia = media queries inside
script
✴ For IE<10 and Opera Presto, polyfill
github.com/paulirish/matchMedia.js/
Friday, 8 March 13
17. matchMedia example
if (window.matchMedia("(min-width:
480px)").matches) {
/* Do stuff for wider screens */
} else {
/* Do stuff for narrow screens */
}
Friday, 8 March 13
18. More on Media queries
http://dev.opera.com/articles/view/
love-your -devices-adaptive-web-
design-with-media-queries-viewport-
and-more/
Friday, 8 March 13
19. viewport/CSS
device
adaptation
Friday, 8 March 13
20. Mobile browsers lie
✴ About viewport width
✴ Some also lie about the resolution
✴ So media queries alone don’t cut it
Friday, 8 March 13
34. align items on main axis
section {
justify-content: center;
}
/* can take other values such as flex-start,
flex-end, space-between and space-around */
Friday, 8 March 13
36. align items on cross axis
section {
align-items: stretch;
}
/* can take other values such as flex-start,
flex-end, and center; */
Friday, 8 March 13
41. Flexing our muscle
✴ The flex property
✴ Set what proportion of available
space child elements occupy
✴ Unit-less proportion values
Friday, 8 March 13
42. Flex property
nav {
flex: 1;
}
article {
flex: 3;
}
Friday, 8 March 13
44. 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 */
Friday, 8 March 13
52. 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
Friday, 8 March 13
53. Great at some things
<article>...</article>
article {
column-count: 2;
column-gap: 1rem;
column-rule: 2px solid rgba(0,0,255,0.25);
}
Friday, 8 March 13
63. CSS regions
✴ Turn containers into vessels to
flow content into
✴ Flexible complex layouts
✴ IE10 and Chrome Canary only at the
moment
Friday, 8 March 13
64. Put your content in a
separate block
<article class="content">
<h2>Introduction</h2>
<p>Hello, dear readers...
</article>
Friday, 8 March 13
65. 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>
Friday, 8 March 13
66. Specify where to
flow it into
.content {
-webkit-flow-into: article;
}
.text-container, .text-overflow {
-webkit-flow-from: article;
}
Friday, 8 March 13
69. CSS exclusions
✴ Create really complex floats
✴ Flow content around (and inside)
complex shapes
✴ Chrome Canary/IE only at the
moment
Friday, 8 March 13
71. Position your exclusion
<article class="content">
<header>
...
</header>
...
</article>
header {
position: absolute;
etc.
}
Friday, 8 March 13
72. Then exclude it!
header {
position: absolute;
etc.
wrap-flow: both;
/* Can also take values of start, end,
minimum, maximum, clear */
}
Friday, 8 March 13
73. Different effects
both start end
Text
minimum maximum clear
Friday, 8 March 13
77. rems
✴ rem units used throughout my
examples
✴ size relative to the root (html) font-
size, not the parent font size.
✴ Much easier maths
Friday, 8 March 13
78. 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
Friday, 8 March 13
79. vh, vw, and vmin
✴ Supported in IE10, FF Chrome, iOS,
,
Blackberry?
✴ text-size relative to viewport =
accessibility problem?
Friday, 8 March 13
82. So do we just wait until support is
everywhere and IE6-9 is destroyed?
Friday, 8 March 13
83. Hell no!
✴ Intelligent alternatives via feature
detection
✴ @supports: native feature
detection
✴ Modernizr is still an excellent
solution
Friday, 8 March 13
