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
920
Responsive Web Applications
snookca
0
140
Responsive Web Applications with Container Queries
snookca
3
640
Responsive Web Applications
snookca
0
89
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
360
Other Decks in Technology
See All in Technology
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
1
230
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
230
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
160
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.8k
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
430
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
290
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
140
Mastering Quickfix
daisuzu
1
320
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
4
1k
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
Featured
See All Featured
Happy Clients
brianwarren
98
6.7k
Why Our Code Smells
bkeepers
PRO
334
57k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Gamification - CAS2011
davidbonilla
80
5k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
What's in a price? How to price your products and services
michaelherold
243
12k
The Invisible Side of Design
smashingmag
298
50k
Thoughts on Productivity
jonyablonski
67
4.3k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
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