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
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
370
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
290
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
430
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.2k
S3アクセス制御の設計ポイント
tommy0124
3
190
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
170
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
360
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
230
Android Audio: Beyond Winning On It
atsushieno
0
100
Featured
See All Featured
Side Projects
sachag
455
43k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Code Review Best Practice
trishagee
70
19k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
How STYLIGHT went responsive
nonsquared
100
5.8k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Being A Developer After 40
akosma
90
590k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
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