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
970
Responsive Web Applications
snookca
0
170
Responsive Web Applications with Container Queries
snookca
3
680
Responsive Web Applications
snookca
0
98
The Future is In Pieces
snookca
1
160
Becoming a Deep Generalist
snookca
1
490
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
180
Your CSS is a Mess from SmartWeb
snookca
0
240
How to Write a Book
snookca
4
400
Other Decks in Technology
See All in Technology
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
AI エージェントと考え直すデータ基盤
na0
20
7.9k
Digitization部 紹介資料
sansan33
PRO
1
4.5k
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1k
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
270
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
110
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
TLSから見るSREの未来
atpons
2
310
Data Engineering Study#30 LT資料
tetsuroito
1
180
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Docker and Python
trallard
45
3.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Music & Morning Musume
bryan
46
6.7k
Side Projects
sachag
455
42k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing for humans not robots
tammielis
253
25k
GitHub's CSS Performance
jonrohan
1031
460k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
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