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
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
AWS認定を取る中で感じたこと
siromi
1
190
PO初心者が考えた ”POらしさ”
nb_rady
0
210
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
300
What’s new in Android development tools
yanzm
0
310
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
130
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Optimizing for Happiness
mojombo
379
70k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Docker and Python
trallard
44
3.5k
Statistics for Hackers
jakevdp
799
220k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GitHub's CSS Performance
jonrohan
1031
460k
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