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
930
Responsive Web Applications
snookca
0
140
Responsive Web Applications with Container Queries
snookca
3
640
Responsive Web Applications
snookca
0
90
The Future is In Pieces
snookca
1
150
Becoming a Deep Generalist
snookca
1
480
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
170
Your CSS is a Mess from SmartWeb
snookca
0
220
How to Write a Book
snookca
4
370
Other Decks in Technology
See All in Technology
Cloudflareで実現する AIエージェント ワークフロー基盤
kmd09
0
220
OPENLOGI Company Profile for engineer
hr01
1
18k
三菱電機で社内コミュニティを立ち上げた話
kurebayashi
1
310
20240513 - 框裡框外_文學院學生如何在AI世代安身立命 @ 淡江大學
dpys
0
640
AI×医用画像の現状と可能性_2024年版/AI×medical_imaging_in_japan_2024
tdys13
1
1.2k
効率的な技術組織が作れる!書籍『チームトポロジー』要点まとめ
iwamot
2
200
AWS re:Invent 2024 ふりかえり勉強会
yhana
0
710
.NET AspireでAzure Functionsやクラウドリソースを統合する
tsubakimoto_s
0
150
2025年のARグラスの潮流
kotauchisunsun
0
720
最近のSfM手法まとめ - COLMAP / GLOMAPを中心に -
kwchrk
8
1.8k
Unsafe.BitCast のすゝめ。
nenonaninu
0
160
30分でわかる「リスクから学ぶKubernetesコンテナセキュリティ」/30min-k8s-container-sec
mochizuki875
3
390
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2.1k
A designer walks into a library…
pauljervisheath
205
24k
BBQ
matthewcrist
85
9.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Docker and Python
trallard
43
3.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
A Tale of Four Properties
chriscoyier
157
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
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