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
81
Sweating The Small Stuff
briangraves
0
77
Winning the Design Battle on Every Screen
briangraves
0
91
Other Decks in Design
See All in Design
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.4k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.8k
高卒公務員から Webデザイナーになるまで
kinomidesign
0
110
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
420
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
140
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
560
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
150
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
660
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
190
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
75
5.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Invisible Side of Design
smashingmag
302
51k
Mobile First: as difficult as doing things right
swwweet
224
10k
YesSQL, Process and Tooling at Scale
rocio
173
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Rails Girls Zürich Keynote
gr2m
95
14k
KATA
mclloyd
32
15k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
The Cost Of JavaScript in 2023
addyosmani
55
9k
Designing for Performance
lara
610
69k
The Language of Interfaces
destraynor
162
25k
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!