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
93
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
86
Surveying the Landscape — November 2016
stopsatgreen
1
160
Surveying the Landscape - Fronteers
stopsatgreen
2
480
The Web vs. The Browser
stopsatgreen
0
190
Surveying the Landscape Sept. 2016
stopsatgreen
1
380
Surveying the Landscape
stopsatgreen
4
830
Other Decks in Programming
See All in Programming
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
590
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Deep Dive into Kotlin Flow
jmatsu
1
360
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
Namespace and Its Future
tagomoris
6
700
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
A Tale of Four Properties
chriscoyier
160
23k
4 Signs Your Business is Dying
shpigford
184
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Navigating Team Friction
lara
189
15k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Docker and Python
trallard
46
3.6k
Embracing the Ebb and Flow
colly
87
4.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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.