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
Responsive Web Applications
Search
snookca
November 30, 2017
Technology
0
1.6k
Responsive Web Applications
As presented at dotCSS in Paris, France
snookca
November 30, 2017
Tweet
Share
More Decks by snookca
See All by snookca
Responsive Web Applications
snookca
4
870
Responsive Web Applications
snookca
0
120
Responsive Web Applications with Container Queries
snookca
3
610
Responsive Web Applications
snookca
0
80
The Future is In Pieces
snookca
1
140
Becoming a Deep Generalist
snookca
1
450
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
170
Your CSS is a Mess from SmartWeb
snookca
0
210
How to Write a Book
snookca
4
320
Other Decks in Technology
See All in Technology
M&A戦略を支えるデータマネジメント (MIDAS Tech Study #16 GENDA Komiyama)
kommy339
0
100
.NET Profiler in 2024.
kkamegawa
2
1k
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
700
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
510
開発パフォーマンスを最大化するための開発体制
ham0215
7
1.1k
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
150
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
700
Building Dashboards as a Hobby
egmc
0
360
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
390
Improve Your Development Workflow with Gemini Code Assist
meteatamel
0
120
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
7
3.6k
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
520
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
21
6.4k
Code Reviewing Like a Champion
maltzj
515
39k
Thoughts on Productivity
jonyablonski
60
3.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Gamification - CAS2011
davidbonilla
77
4.6k
Rails Girls Zürich Keynote
gr2m
91
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
The Mythical Team-Month
searls
216
42k
Transcript
Responsive Web Applications with Container Queries
Why We Need Container Queries
None
None
None
None
None
None
None
• No orders • One order • Less than one
page of orders • Multiple pages of orders • Has Info Notifications • Tab overflow • Has Warning Notifications • Has limited access to features • Has different apps installed
And now consider all of those things for multiple viewports
None
None
With media queries, you have to know the interplay of
all objects in all scenarios
Implementing Container Queries
With container queries, you only have to know the interplay
within a single object
No container queries!
Declare in: CSS, HTML, or JavaScript
https://github.com/ResponsiveImagesCG/cq-demos .element:media( min-width:500px ) {} https://github.com/tysonmatanich/elementQuery .element[min-width~="500px"] { background-color: #eee;
}
http://elementqueries.com/ @element ".element" and (min-width: 500px) { .element {
background: gold; } }
https://github.com/tysonmatanich/elementQuery .element[min-width~="400px"] { }
To parse CSS, either need to be on same domain
or set up CORS
https://github.com/Snugug/eq.js data-eq-pts="small: 400, medium: 600, large: 900"
At HTML level, requires consistency of implementation across app
We chose JavaScript and built our own
elements = [ { "module": ".flex--2x1", "className":"responsiveClass", "minWidth": 768, "maxWidth":
1024 } ]
Why is this so f**kin’ hard?
.element:media( min-width:500px ) { width: 400px; }
None
.element { width: 50%; } .element:media( min-width:500px ) { color:
blue; }
The Future
ResizeObserver
Houdini
What’s Houdini: • Layout API • Custom Paint API •
Parser API • Properties and Values • Animation Workout • Typed OM • Font Metrics API
None
In Chrome: • Layout API • Custom Paint API •
Parser API • Properties and Values • Animation Worklet • Typed OM • Font Metrics API
None
<div class="two-columns"> <div class="col1"> … </div> <div class="col2"> … </div>
</div>
.two-columns { display: flex; flex-wrap: wrap; } .col1, .col2 {
flex-grow: 1; } .col1 { flex-basis: 66%; min-width: 360px; } .col2 { flex-basis: 33%; }
None
<div class="media-body"> <div class="media-content"> </div> <div class="media-actions"> <a href="…"> Button
</a> </div> </div>
.media-body { display: flex; flex-wrap: wrap; }
.media-content { flex-grow: 1; flex-basis: 400px; margin-right: 20px; }
.media-actions { align-self: center; margin: 20px 0; }
None
<div class="box"> <div class="box-image"> <img src="…" height="150" > </div> <div
class="box-content">...</div> </div>
.box { display: flex; flex-wrap: wrap; }
.box-image { flex-grow: 1; flex-shrink: 0; flex-basis: 150px; } .box-image
> img { width: 100%; object-fit: cover; }
.box-content { margin: 10px; flex-shrink: 1; flex-grow: 1; flex-basis: 60%;
}
<div class="items"> <div class="box">…</div> <div class="box">…</div> <div class="box">…</div> </div>
.items { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
Thank you. http:/ /snook.ca/ @snookca