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
960
Responsive Web Applications
snookca
0
160
Responsive Web Applications with Container Queries
snookca
3
670
Responsive Web Applications
snookca
0
95
The Future is In Pieces
snookca
1
150
Becoming a Deep Generalist
snookca
1
490
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
170
Your CSS is a Mess from SmartWeb
snookca
0
230
How to Write a Book
snookca
4
390
Other Decks in Technology
See All in Technology
ゆるくはじめるSLI・SLO
yatoum
1
120
SONiCで構築・運用する生成AI向けパブリッククラウドネットワーク
sonic
1
500
MCP でモノが動くとおもしろい/It is interesting when things move with MCP
bitkey
3
630
SRE/インフラエンジニアの市場価値とキャリアパス/Market value and career path for SRE-infrastructure engineers
takumakume
1
140
RubyKaigi NOC 近況 2025
sorah
3
1.2k
Cline&CursorによるAIコーディング徹底活用―Live Vibe Coding付き
pharma_x_tech
1
380
SaaS公式MCPサーバーをリリースして得た学び
kawamataryo
5
1.4k
Vibe Coding Tools
ijin
1
300
hacomonoらしさをデザインする
hacomono
PRO
2
110
木を見て森も見る-モジュールが織りなすプロダクトの森
kworkdev
PRO
0
300
使えるデータ基盤を作る技術選定の秘訣 / selecting-the-right-data-technology
pei0804
10
1.7k
インフラからSREへ
mirakui
20
7.8k
Featured
See All Featured
Visualization
eitanlees
146
16k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
620
How STYLIGHT went responsive
nonsquared
100
5.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
430
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Fireside Chat
paigeccino
37
3.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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