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
Using Tomorrow's CSS Today
Search
Brian Graves
October 17, 2016
Design
0
20k
Using Tomorrow's CSS Today
Brian Graves
October 17, 2016
Tweet
Share
More Decks by Brian Graves
See All by Brian Graves
Using Tomorrow's CSS Today
briangraves
1
140
Using Tomorrow's CSS Today
briangraves
2
110
Using Tomorrow's CSS Today
briangraves
0
320
Using Tomorrow's CSS Today [Email]
briangraves
1
80
Sweating The Small Stuff
briangraves
0
76
Winning the Design Battle on Every Screen
briangraves
0
90
Other Decks in Design
See All in Design
AI動画生成ガチャ紹介
piyo7
1
140
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
110
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
350
UXデザインはなぜ定着しないのか?
designstudiopartners
0
770
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
290
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
110
UXとUIの違いを自分の言葉で表現する: UX DAYS TOKYO
mizunashi_mana
0
180
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
410
Bulletproof Design System with TypeScript
takanorip
6
3.7k
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
310
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
Faster Mobile Websites
deanohume
308
31k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Producing Creativity
orderedlist
PRO
346
40k
BBQ
matthewcrist
89
9.7k
Why Our Code Smells
bkeepers
PRO
337
57k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Applications with DynamoDB
mza
95
6.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Gamification - CAS2011
davidbonilla
81
5.4k
Transcript
None
Brian Graves @briangraves
None
None
None
None
None
http://d.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2015/11/3054003-poster-p-1-dont-give-a-hoverboard-this-christmas.jpg
None
None
None
None
https://lh3.googleusercontent.com/-jijITfbqlCk/UUeCfITz0wI/AAAAAAAAQuc/1PjBKq-6KzM/s630-fcrop64=1%2C000033fafffff833/135486852774.jpg
The Web
None
Text Documents credit
Text Documents credit
Tables
Absolute Positioning / Floats / Inline-Block
Flexbox / Grids
CSS in 2016 is Amazing.
WHERE HAVE WE BEEN?
There is No CSS3! And other facts about how standards
are made.
There is No CSS3! And other facts about how standards
are made.
Despite the popularity of the “CSS3” buzzword, there is actually
no spec defining such a thing. – Lea Verou
None
None
None
None
Animation
Typography
Shapes
Grids
“CSS is not a real language”
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No nested selectors • No scoping • No functions • No color manipulation • No basic arithmetic
Things That Make Our Lives Easier
Rise of the Preprocessors. How we filled in the gaps.
None
None
None
.row { @include display-flex; background-color: $color-blue; } .row { display:
-webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
Do Preprocessors Solve The Problem?
Preprocessors Perpetuate A Problem. – Aaron Ladage
More & More Layers of Abstraction
Problems with Preprocessors • Not real front-end code • Proprietary
syntax • Often written in non front-end languages • Not as easily extensible • Must be compiled • Compile times can be slow • The CSS Spec & Browsers are catching up!
Preprocessors? Where we’re going, we don’t need preprocessors.
THE FUTURE OF CSS IS NOW
Variables
Mixins/Extends
Color Functions
Nesting
Custom Media Queries
None
Custom Properties (Variables)
:root { --color-blue: #0A81C4; --color-blue-dark: #005581; } .element { color:
var(--color-blue); } .element:hover { color: var(--color-blue-dark); }
Just because you may like Sass variable syntax more does
not mean that you should just forsake the new spec. – Jake Albaugh http://codepen.io/jakealbaugh/post/css4-variables-and-sass
http://caniuse.com/#feat=css-variables Browser Support: Custom Properties
Variables lose their value if you have to constantly track
down what they represent. – Ryan Heap
Bad --blue: #0A81C4; --blue2: #005581; --blue3: #acd5f8; --timing: .25s; --othertiming:
1s; Good: Logical Modifiers --color-blue: #0A81C4; --color-blue-light: #005581; --color-blue-dark: #acd5f8; --timing-fast: .25s; --timing-slow: 1s; Good: Point Scale --color-blue-10: #0A81C4; --color-blue-20: #005581; --color-blue-30: #acd5f8;
None
:root { --color-blue: #0A81C4; --color-blue-dark: #005581; } .element { color:
var(--color-blue); } .element:hover { color: var(--color-blue-dark); }
@Apply (Mixins/Extends)
:root { --clearfix: { display: table; clear: both; content: ‘’;
}; } .element:after { @apply --clearfix; }
https://www.chromestatus.com/feature/5753701012602880 Browser Support: @apply
Color Module Level 4 (Color Functions)
.element { color: #1982C5; } .element--modifier { color: color(#1982C5 tint(40%));
}
.element { color: #1982C5; } .element--modifier { color: color(#1982C5 shade(40%));
}
CSS Color Functions • Tints & Shades • RGBA Adjustment
• HSL/HWB Adjustment • Color Blending (blend & blenda) • Guarantee Contrast
/* combine with variables to create palettes */ :root {
--color-blue: #1982C5; --color-blue-light: color( var(--color-blue) tint(40%) ); --color-blue-dark: color( var(--color-blue) shade(40%) ); }
/* map variables to variables */ :root { --color-text: var(--color-blue);
--color-text-light: color( var(--color-text) tint(40%) ); --color-text-dark: color( var(--color-text) shade(40%) ); }
/* map variables to variables */ :root { --color-text: var(--color-orange);
--color-text-light: color( var(--color-text) tint(40%) ); --color-text-dark: color( var(--color-text) shade(40%) ); }
Nesting
.element { color: blue; {&.modifier { color: red; }} }
.element { color: blue; {&.modifier { color: red; }} }
.element { color: blue; &.modifier { color: red; } }
.im { .a { .way { .over { .nested {
.selector { color: red; } } } } } }
.im { .a { .way { .over { .nested {
.selector { color: red; } } } } } }
Bad Nesting Order .selector { element {//…} property: value; .selector
{//…} &:before {//…} } Good Nesting Order .selector { property: value; &:before {//…} element {//…} .selector {//…} }
Custom Selectors
@custom-selector --small (min-width: 30em); @media (--small) { .element { font-size:
1.5rem; } }
@media only screen and (min-width: 30em) { .element { font-size:
1.5rem; } }
@custom-selector --small (min-width: 30em); @media (--small) { .element { font-size:
1.5rem; } }
@custom-selector --heading h1,h2,h3,h4,h5,h6; --heading { /* styles for all headings
*/ } --heading + p { /* more styles */ }
Media Query Range Context
@media (30em <= width <= 60em) { .element { font-size:
1.5rem; } }
@media (min-width: 30em) and (max-width: 60em) { .element { font-size:
1.5rem; } }
@media (width <= 30em) { …small… } @media (30em <
width < 60em) { …medium… } @media (width >= 60em) { …large… }
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No nested selectors • No scoping • No functions/mixins • No color manipulation • No basic arithmetic
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No nested selectors • No scoping • No functions/mixins • No color manipulation • No basic arithmetic
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No nested selectors • No scoping • No functions/mixins • No color manipulation • No basic arithmetic
Autoprefixer
Autoprefixer
PostCSS
.row { @include display-flex; background: $color-blue; } .row { display:
-webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
.row { display: flex; background: var(--color-blue); } .row { display:
-webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
PostCSS Advantages • Write CSS using CSS • Use CSS3
without worry • Even Use CSS4 • Modular (Use only what you need) • Tons of existing plugins • Can’t find a plugin? Write one in javascript.
PostCSS Ecosystem • Autoprefixer • PostCSS-nested • PostCSS-color-function • PostCSS-calc
• PostCSS-custom-properties • PostCSS-apply • PostCSS-custom-media • CSSNext • PostCSS-import • Can’t find a plugin? Write one in javascript.
One Day…
Let’s Get As Close As We Can To The Real
Thing
@briangraves Slides: bit.ly/2dn48Fb Thank You!