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
130
Your Reality Here
stopsatgreen
0
80
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
320
Growing Up, Getting Serious
stopsatgreen
0
71
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
160
Surveying the Landscape Sept. 2016
stopsatgreen
1
280
Surveying the Landscape
stopsatgreen
4
750
Other Decks in Programming
See All in Programming
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
CI改善もDatadogとともに
taumu
0
110
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
時計仕掛けのCompose
mkeeda
1
280
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
WebDriver BiDiとは何なのか
yotahada3
1
140
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Featured
See All Featured
Building an army of robots
kneath
302
45k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
A Philosophy of Restraint
colly
203
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
How to train your dragon (web standard)
notwaldorf
90
5.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Practical Orchestrator
shlominoach
186
10k
Documentation Writing (for coders)
carmenintech
67
4.6k
Optimizing for Happiness
mojombo
376
70k
Music & Morning Musume
bryan
46
6.3k
Speed Design
sergeychernyshev
25
780
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.