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
April 28, 2016
Design
1
140
Using Tomorrow's CSS Today
Brian Graves
April 28, 2016
Tweet
Share
More Decks by Brian Graves
See All by Brian Graves
Using Tomorrow's CSS Today
briangraves
0
20k
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
76
Winning the Design Battle on Every Screen
briangraves
0
90
Other Decks in Design
See All in Design
Saudade typeface
tiagoporto
0
340
Liquid Iron
mcduckyart
1
120
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
200
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
430
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
200
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
190
ポートフォリオ_webデザイナー
nami_webdesigner
0
150
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
420
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
630
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
580
PF_濵村ひろみ_202503
maru_design78
0
210
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
How to train your dragon (web standard)
notwaldorf
96
6.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
Automating Front-end Workflow
addyosmani
1370
200k
For a Future-Friendly Web
brad_frost
179
9.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
GraphQLとの向き合い方2022年版
quramy
49
14k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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
https://lh3.googleusercontent.com/-jijITfbqlCk/UUeCfITz0wI/AAAAAAAAQuc/1PjBKq-6KzM/s630-fcrop64=1%2C000033fafffff833/135486852774.jpg
The Web
None
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.
Despite the popularity of the “CSS3” buzzword, there is actually
no spec defining such a thing. – Lea Verou
None
None
Animation
Typography
Layout
“CSS is not a real language”
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No inline importing • No nested selectors • 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 • 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
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) • Faster compile times • Built on Node • No Ruby dependencies • Easier to debug • Tons of existing plugins • Can’t find a plugin? Write one in javascript.
Autoprefixer
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.
CSS 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
Variables lose their value if you have to constantly track
down what they represent. – Ryan Heap
None
@Apply (mixins/extends)
:root { --clearfix: { display: table; clear: both; content: ‘’;
}; } .element:after { @apply --clearfix; }
https://www.chromestatus.com/feature/5753701012602880
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; } } } } } }
Custom Media Queries
@custom-media --small (min-width: 30em); @media (--small) { .element { font-size:
1.5rem; } }
@media only screen and (min-width: 30em) { .element { font-size:
1.5rem; } }
@custom-media --small (min-width: 30em); @media (--small) { .element { font-size:
1.5rem; } }
New Media Query Syntax
@media (width >= 30em) and (width <= 60em) { .element
{ font-size: 1.5rem; } }
@media (min-width: 30em) and (max-width: 60em) { .element { font-size:
1.5rem; } }
Partials & Globbing
/* generated with grunt-sass-globbing */ @import "utilities/variables"; @import "utilities/mixins"; @import
"utilities/reset"; @import “utilities/breakpoints"; @import “atoms/buttons"; @import “atoms/headings"; @import “atoms/icons"; @import “atoms/text"; @import “molecules/components/disclaimer“; …
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic
One Day…
Let’s Get As Close As We Can To The Real
Thing
@briangraves Thank You!