Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS3: Layouts for the Multi-screen World
Search
Peter Gasston
November 28, 2012
Programming
9
1.1k
CSS3: Layouts for the Multi-screen World
Talk given at Future of Web Design, Prague, 28 Nov 2012. #fowa #fowd
Peter Gasston
November 28, 2012
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
150
Your Reality Here
stopsatgreen
0
87
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
86
Surveying the Landscape — November 2016
stopsatgreen
1
150
Surveying the Landscape - Fronteers
stopsatgreen
2
470
The Web vs. The Browser
stopsatgreen
0
180
Surveying the Landscape Sept. 2016
stopsatgreen
1
370
Surveying the Landscape
stopsatgreen
4
810
Other Decks in Programming
See All in Programming
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
560
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
160
C++20 射影変換
faithandbrave
0
560
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
ふつうの技術スタックでアート作品を作ってみる
akira888
0
230
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
280
GraphRAGの仕組みまるわかり
tosuri13
8
510
VS Code Update for GitHub Copilot
74th
1
510
Deep Dive into ~/.claude/projects
hiragram
10
2.2k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Producing Creativity
orderedlist
PRO
346
40k
Why Our Code Smells
bkeepers
PRO
337
57k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Bash Introduction
62gerente
614
210k
Side Projects
sachag
455
42k
Practical Orchestrator
shlominoach
188
11k
Unsuck your backbone
ammeep
671
58k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
For a Future-Friendly Web
brad_frost
179
9.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Transcript
CSS3: Layouts for the Multi-screen World
Peter Gasston @stopsatgreen
1. The web has changed 2. Our tools are outdated
What is CSS3 going to do about it?
The web has changed
None
By Anna Debenham: http://www.flickr.com/photos/anna_debenham/8190771122/
http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/
None
1633 320x480 768x1024
Device-centric development
Media Queries
@media screen {} @media screen and (min-width: 800px) {} @media
(orientation: portrait) {} Media Queries
width device-width orientation aspect-ratio device-aspect-ratio Media Queries
@media (min-resolution: 1.5dppx) {} Media Queries
@media (max-width: 480px) { ... @media (orientation: portrait) { ...
} } Media Queries
script pointer hover luminosity (Possible) Media Queries
<meta name="viewport" content="width=500, initial-scale=1, maximum-scale=2"> Device Adaptation
Device Adaptation @viewport { initial-scale: 1; maximum-scale: 2; width: 500px;
}
Device Adaptation @viewport { width: device-width; } @media (max-device-width: 420px)
{ @viewport { width: 500px; } }
Our tools are outdated
None
None
• <table> • float: left HTML & CSS1
• position: absolute • display: inline-block • display: table CSS2
None
The Three Stages of RWD
New layout methods
Multi-columns article { column-count: 3; } article { column-width: 20em;
}
None
None
A B .b { flow-from: 'foo'; } foo Regions .a
{ flow-into: 'foo'; }
B C D .b, .c, .d { flow-from: 'foo'; }
foo Regions
Flexbox
Flexbox .parent { display: flex; } .child { width: 30%;
} .child { flex: 1; }
Flexbox A B .a { flex: 2; } .b {
flex: 1; } A B .parent { flex-direction: column; } .a { flex: 2; } .b { flex: 1; }
Flexbox .parent { align-items: center; justify-content: center; } .parent {
flex-direction: column; } .a { order: 2; } .b { order: 1; } A B
Sod this, let's live code!
None
Grid Layout .parent { display: grid; grid-definition-columns: 1fr 1fr 2fr;
} .parent { grid-definition-columns: 1fr 1fr 2fr; grid-definition-rows: 10em auto 40px; }
Grid Layout A B .child { grid-column-position: 2; grid-row-position: 2;
} .a { grid-column: 2 2; } .b { grid-row-span: 3; }
None
.child { position: absolute; wrap-flow: both; } Exclusions
None
.child { shape-outside: circle(50%,50%,400px); } Shaped Exclusions
None
.child { shape-inside: circle(50%,50%,400px); } Shaped Exclusions
Conclusion
1. The web is everywhere
2. Web design is constrained by the tools we have
3. Better tools are on the way
4. Let's make beautiful websites that work everywhere
Konec. * Some of the CSS properties shown in this
talk are experimental and subject to change. Always check http://caniuse.com and http://html5please.com for latest implementation status.