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
76
Winning the Design Battle on Every Screen
briangraves
0
90
Other Decks in Design
See All in Design
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.2k
7 Core Values of Round-L
wired888
0
1.4k
デザイナー向けフライル説明資料
toshiblues
0
110
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
Bulletproof Design System with TypeScript
takanorip
7
4k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
170
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
UXデザインはなぜ定着しないのか?
designstudiopartners
0
920
Installing and Running decksh/pdfdeck
ajstarks
1
840
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
790
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Faster Mobile Websites
deanohume
309
31k
Building Adaptive Systems
keathley
43
2.7k
GitHub's CSS Performance
jonrohan
1031
460k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
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!