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
290
Surveying the Landscape
stopsatgreen
4
750
Other Decks in Programming
See All in Programming
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
240
Introduction to kotlinx.rpc
arawn
0
670
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.7k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
320
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
870
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
もう僕は OpenAPI を書きたくない
sgash708
3
990
Ruby on cygwin 2025-02
fd0
0
140
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.9k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
74
9.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Navigating Team Friction
lara
183
15k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
4 Signs Your Business is Dying
shpigford
182
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
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.