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
77
Winning the Design Battle on Every Screen
briangraves
0
91
Other Decks in Design
See All in Design
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
550
The Spectacular Lies of Maps
axbom
PRO
1
300
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
660
Goodpatch Tour💙 / We are hiring!
goodpatch
31
890k
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
350
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
190
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.3k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
690
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
110
Installing and Running decksh/pdfdeck
ajstarks
1
860
portfolio.pdf
onof003
0
190
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.2k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
A Tale of Four Properties
chriscoyier
160
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Designing for Performance
lara
610
69k
The Language of Interfaces
destraynor
162
25k
Designing for humans not robots
tammielis
254
26k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
GitHub's CSS Performance
jonrohan
1032
460k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
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!