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
The CSS of Tomorrow
Search
Peter Gasston
September 07, 2012
Technology
8
2.5k
The CSS of Tomorrow
Canvas conference, 7 September 2012. #canvasconf
Peter Gasston
September 07, 2012
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
150
Your Reality Here
stopsatgreen
0
88
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
86
Surveying the Landscape — November 2016
stopsatgreen
1
160
Surveying the Landscape - Fronteers
stopsatgreen
2
470
The Web vs. The Browser
stopsatgreen
0
180
Surveying the Landscape Sept. 2016
stopsatgreen
1
370
Surveying the Landscape
stopsatgreen
4
810
Other Decks in Technology
See All in Technology
Delegating the chores of authenticating users to Keycloak
ahus1
0
180
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
390
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
250
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
260
インフラ寄りSREの生存戦略
sansantech
PRO
9
3.4k
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
1k
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
160
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
Claude Code に プロジェクト管理やらせたみた
unson
8
4.9k
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.1k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
810
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
280
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Transcript
Peter Gasston @stopsatgreen http://broken-links.com
The CSS of Tomorrow
Predicting the Future “Television won’t last. It’s a flash in
the pan.” - Mary Somerville
Predicting the Future “Home taping is killing music” - BPI
Predicting the Future “There’s no chance that the iPhone is
going to get any significant market share. No chance.” - Steve Ballmer, 2007
I Predict: Cynicism “That sounds cool but it's useless because
we'll have to wait for browsers to catch up.”
The CSS of Tomorrow
1.42857142857143 (20 ÷ 14) Relative units
Root-relative units html { font-size: 10px; } p { font-size:
1.4em; }←14px p span { font-size: 0.8572em; }←12px 0.85714285714286
None
Root-relative units html { font-size: 10px; } p { font-size:
1.4rem; }←14px p span { font-size: 1.2rem; }←12px Much better. http://www.w3.org/TR/css3-values/
Root-relative units E { width: 65%; } F { width:
76.9231%; }←55% of root 76.923076923077%
Viewport-relative units 100vw 100vh
Viewport-relative units E { height: 50vh; width: 75vw; }
Root-relative units E { width: 65vw; } F { width:
55vw; }←55% of root Pukka. http://www.w3.org/TR/css3-values/
Selectors li { color: #00F; } ol li { color:
#F00; } ol.foo li { color: #00F; } ol:not(.foo) li { color: #F00; } http://www.w3.org/TR/css3-selectors/
Selectors ol span, ul span, p span {} *:matches(ol,ul,p) span
{} http://www.w3.org/TR/2011/WD-selectors4-20110929/
Selectors :link, :visited :any-link :local-link http://www.w3.org/TR/2011/WD-selectors4-20110929/
Selectors http://example.com/foo/bar/ <a href="http://example.com/foo/bar/" /> a:local-link {} <a href="http://example.com/" />
a:local-link(0) {} <a href="http://example.com/foo/" /> a:local-link(1) http://www.w3.org/TR/2011/WD-selectors4-20110929/
Selectors E /foo/ F <label for="foo" /> <input id="foo" />
label /for/ input {} label:hover /for/ input {} http://www.w3.org/TR/2011/WD-selectors4-20110929/
Selectors E! > F !E > F !E! > F
E!!1! > F The Parent Selector! http://dev.w3.org/csswg/selectors4/
Positioning E { position: sticky; } http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in- WebKit
Media Queries
Media Queries @media (script: 0) {} @media (hover) {} @media
(pointer: fine|coarse) {} http://dev.w3.org/csswg/mediaqueries4/
Media Queries @media screen and (min-width: 400px) {} @media screen
and (min-width: 960px) {} @media screen and (resolution: 2dppx) {}
Media Queries @media screen { @media (min-width: 400px) {} @media
(min-width: 960px) {} @media (resolution: 2dppx) {} } http://my.opera.com/ODIN/blog/2012/08/28/colourful-opera-12-50-snapshot
Device Adaptation <meta name="viewport" content="width=device-width,initial- scale=1,maximum-scale=2">
Device Adaptation @viewport { initial-scale: 1; maximum-scale: 2; width: device-width;
} http://dev.w3.org/csswg/css-device-adapt/
Device Adaptation @viewport { initial-scale: 1; width: device-width; } @media
(min-width: 800px) { @viewport { maximum-scale: 1; } }
Conditionals @document url('http://foo.com/bar/') {} @document url-prefix('http://foo.com/') {} @document domain('foo.com') {}
@document regexp('http://foo.com//[a-zA-Z]| \d{3,}/') {} Regular expressions in CSS. Finally! http://www.w3.org/TR/css3-conditional/
Conditionals @supports (columns: 3) {} =
Images
Images E { background-image: image('foo.svg','foo.png',#F00); } E { background-image: url(foo.png);
} http://dev.w3.org/csswg/css4-images/
Images E { background-image: image-set( 'foo.png' 1x, 'foo-hi.png' 2x, 'foo-mega.png'
600dpi ); }
Images E { background-image: image('foo.svg#xywh=0,0,200,60'); }
Images #c { background: element(#b); } ‘B’ Actually C A
B
Images E { background-image: conic-gradient(#F00,#0F0,#00F); }
Layout
Flexbox
.holder { display: flex; } .child { width: 30%; }
.child { flex: 1; } A B .a { flex: 2; } .b { flex: 1; } Flexbox http://www.w3.org/TR/css3-flexbox/
Flexbox .child { align-items: center; flex: 0; justify-content: center; }
C A B .outer { flex-direction: column; } .a,.b { order: 2; } .c { order: 1; }
Grid Layout
Grid Layout E { display: grid; grid-definition-columns: 1fr 1fr 2fr;
} E { grid-definition-columns: 1fr 1fr 2fr; grid-definition-rows: 10em auto 40px; } http://dev.w3.org/csswg/css3-grid-layout/
Grid Layout F { grid-column-position: 2; grid-row-position: 2; } A
B .a { grid-column: 2 2; } .b { grid-row-span: 3; }
Grid Templates E { grid-template: 'head head head' 'nav main
main' 'foot foot foot'; } .a { grid-area: 'head'; } .b { grid-area: 'main'; } A B
Overflow E { overflow-x: pages; } http://dev.w3.org/csswg/css3-overflow/
Overflow E { overflow: fragments; } E::nth-fragment(odd) {} http://dev.w3.org/csswg/css3-break/
Regions A .a { flow-into: foo; } B C D
.b, .c, .d { flow-from: foo; } B .b { flow-from: foo; } http://dev.w3.org/csswg/css3-regions/
None
Exclusions & Shapes E { position: absolute; } wrap-flow: both;
http://dev.w3.org/csswg/css3-exclusions/
Exclusions & Shapes E { shape-outside: circle(50%,50%, 400px); } E
{ shape-inside: circle(50%,50%, 400px); }
Filters E { filter: grayscale(1); } https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
Filters E { filter: custom(url(foo.fs)); }
Masking E { mask-image: url(foo.png); } + = http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html
Masking E { clip-path: circle(50%,50%,200px); }
Pre-processors
Cascading Variables :root { var-brand-color: #F00; } h1 { border-color:
var(brand-color); color: var(brand-color); } http://dev.w3.org/csswg/css-variables/
Cascading Variables Y!$? $title = 'h1 span'; $brandcolor = '#f00';
.foo $title { border-color: $brandcolor; color: $brandcolor; }
Hierarchies .foo { border-color: red; } .foo h1 { color:
yellow; } .foo h1 em { font-style: normal; } .foo ul { margin: 0; }
Hierarchies .foo { border-color: red; & h1 { color: yellow;
& em { font-style: normal; } } & ul { margin: 0; } } http://dev.w3.org/csswg/css3-hierarchies/
Mixins TBC
“When can we use them?” 1. Browser update cycles are
getting faster 2. The market share of IE is shrinking
“When can we use them?” 1. Your environment 2. How
much do you want it?
Fin.
Image Credits http://www.buzzfeed.com/peggy/22-reasons-why-design-was- more-awesome-in-the-80s http://80s-touch.tumblr.com/ http://theyank.tumblr.com/