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
160
Responsive Web Applications with Container Queries
snookca
3
670
Responsive Web Applications
snookca
0
96
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
180
Your CSS is a Mess from SmartWeb
snookca
0
240
How to Write a Book
snookca
4
390
Other Decks in Technology
See All in Technology
Javaアプリケーションの配布とパッケージング / Distribution and packaging of Java applications
hogelog
1
110
AIとSREの未来 / AI and SRE
ymotongpoo
2
1k
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
TechBull Membersの開発進捗どうですか!?
rvirus0817
0
170
面接を通過するためにやってて良かったこと3選
sansantech
PRO
0
130
OSMnx Galleryの紹介
mopinfish
0
150
Oracle Database オプティマイザ・ヒントの活用
oracle4engineer
PRO
1
140
Swiftは最高だよの話
yuukiw00w
2
280
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
yamamotoyuta
0
240
AIに実況させる / AI Streamer
motemen
3
1.4k
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.2k
GitHub Coding Agent 概要
kkamegawa
1
1.6k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
52
7.6k
The Language of Interfaces
destraynor
158
25k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Fireside Chat
paigeccino
37
3.5k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
A designer walks into a library…
pauljervisheath
205
24k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
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