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
Give CSS3 Some Love / FOWD2015
Search
Dan Cork
November 04, 2015
Technology
0
270
Give CSS3 Some Love / FOWD2015
Give CSS3 Some Love
Future of Web Design 2015 - Rising Stars
Dan Cork
November 04, 2015
Tweet
Share
More Decks by Dan Cork
See All by Dan Cork
Paradox of Choice
dancork
0
37
Unify The UI With React
dancork
0
230
Talking Tech Jan 2016
dancork
0
58
Git For Humans - Holiday Extras - 14/08/2015
dancork
0
250
Other Decks in Technology
See All in Technology
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
160
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.6k
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
680
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Language of Interfaces
destraynor
158
25k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Optimizing for Happiness
mojombo
379
70k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Producing Creativity
orderedlist
PRO
346
40k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Invisible Side of Design
smashingmag
301
51k
Transcript
Give CSS3 Some Love
Because CSS4 Is Coming!
Disclaimer:
CSS4 Isn’t A Thing
CSS Level 4 W orking Drafts
CSS2.1 Last Major Version
CSS Level 4 = CSS3 = CSS
Confusing Much?
What Am I Going T o T alk About
CSS3 Usage
How We Can Improve IT
What’s Coming Soon
@dancork
Holiday Extras
What’s The Problem
CSS3 Usage is Poor
T op 1 Million Websites http://trends.builtwith.com/css
Max Width 270,538
Max Width 27%
Min Width 209,608
Min Width 21%
Media Queries 48%
Chrome Anonymous Stats https://www .chromestatus.com/metrics/css/popularity
transform 42.5%
box-sizing 74.5%
T oo often the web interface ends up being the
lowest common denominator Henrik Joreteg
Engineering a UI is complex
little control over the environment
Does the ux NEED to be the same?
Who uses multiple browsers?
elephant in the room
None
http://caniuse.com/usage_table.php
IE8 1.38%
>98% support CSS3
CSS is unique
Passes over unknown properties
Less than half of web is responsive! IE is dying
CSS is your friend CSS3 usage is poor
What Can Be Done?
Avoid vendor prefixes
border-radius: 5px;
-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
Will become outdated
technical debt
T ool up with Autoprefixer postcss/autoprefixer
W rite pure css
W orks with LESS and SASS
CLI, GRUNT , GULP or WEBP ACK
Minimises T echnical Debt
Media queries
None
None
Mobile first?
Majority of mobile browsers support queries
FOCUS ON JOBS, THEN SCREENS, BUT NEVER DEVICES https://blog.intercom.io/why-mobile-first-may-already-be-outdated/ Paul
Adams
Box Sizing
Old box model was stupid
Especially when building a grid
Border Box
Feb 1 International Box Sizing Awareness Day
https://css- tricks.com/ international-box- sizing-awareness- day/
OMG! It works in IE8
html { box-sizing: border-box; } *, *:before, *:after { box-sizing:
inherit; }
T ransform
T op/Left vs T ranslate
Positioning T op/Left
UI animation T ranslate
top/left has large paint time
3D transforms hardware accelerated
a { transform: translate3d(0,0,0); } a { transform: scale3d(1,1,1); }
a { transform: translateZ(0); } a { transform: scaleZ(1); }
no jank
not everything is accelerated
transform:translate transform:scale transform:rotate opacity
but you can do a lot with those!
Scale & Mouse events
Making Material Design https://www .youtube.com/watch?v=rrT6v5sOwJg
None
None
High Performance Animation http://www .html5rocks.com/en/tutorials/speed/high-performance-animations/
csstriggers. com
Vendor prefixes are stupid Go responsive, consider default Border-box all
the things T ransform for UI Animation
The New Stuff
Feature Queries
@supports
@supports (display:flex) { section { display: flex } }
@supports (column-width: 20rem) and (column-span: all) { div { column-width:
20rem } div h2 { column-span: all } }
Limited Support?
JavaScript API
CSS.supports()
Polyfill
Media Queries
light-level
dim normal washed
@media (light-level: dim) { .app { background: black; color: white;
} } @media (light-level: washed) { .app { background: white; color: black; } }
hover
none on-demand hover
.element .tooltip { /* hide tooltip */ } @media (hover)
{ .element .inline-tooltip { /* hide inline tooltip */ } .element:hover .tooltip { /* show tooltip */ } }
pointer
none coarse fine
.link { padding 1em; } @media (pointer:fine) { .link {
padding: 0.25em; } }
any-hover any-pointer
pointer hover none hover course fine smartphones, touch screens stylus-based
screens mouse, touch pad Nintendo Wii, Kinect
custom media queries
@custom-media --small (max-width: 520px); @media (--small) { /* styles for
small viewport */ }
PostCSS postcss/postcss-custom-media
ranges
@media (min-width: 600px) and (max-width: 1000px) {}
@media (width > 600px) and (width < 1000px) {}
@media (600px < width < 1000px) {}
PostCSS postcss/postcss-media-minmax
Relational :has()
div:has(p){ background: #FF0000; }
Change CSS based on content
TO-DO
<div class=“todo”> <input /> <ul> </ul> </div>
<div class=“todo”> <input /> <ul class=“empty”> </ul> </div>
<div class=“todo”> <input /> <ul style=“display:none;”> </ul> </div>
.todo ul { display:none; } .todo ul:has(li) { display:block; }
.todo ul:not(:has(li)) { display:none; }
Ordering is important
.todo ul:not(:has(li)) { display:none; }
.todo ul:has(:not(li)) { display:none; }
Browser support is limited
It’s non existent
We can try it
Polyfill.js philipwalton/polyfill
Polyfill({selectors: [“:has"]}) .doMatched(function (rules) { rules.each(function (rule) { $(rule.getSelectors()) .css(rule.getDeclaration());
}); });
Feature queries removes reliance on JavaScript :has() is too awesome!!!
New media queries, understand the environment better
last decade's "pretty good” is today’s "a bit shit" Jake
Archibald
Thank Y ou TWITTER: @DANCORK SLIDES: SPEAKERDECK.COM/DANCORK/FOWD2015