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 (revised)
Search
Peter Gasston
October 22, 2012
Programming
116
30k
The CSS of Tomorrow (revised)
London Web Standards, October 2012
Peter Gasston
October 22, 2012
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
130
Your Reality Here
stopsatgreen
0
80
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
320
Growing Up, Getting Serious
stopsatgreen
0
71
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
160
Surveying the Landscape Sept. 2016
stopsatgreen
1
290
Surveying the Landscape
stopsatgreen
4
750
Other Decks in Programming
See All in Programming
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
45
16k
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
120
Grafana Cloudとソラカメ
devoc
0
140
Conform を推す - Advocating for Conform
mizoguchicoji
3
690
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
720
時計仕掛けのCompose
mkeeda
1
290
WebDriver BiDiとは何なのか
yotahada3
1
140
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
CNCF Project の作者が考えている OSS の運営
utam0k
6
710
ARA Ansible for the teams
kksat
0
150
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Site-Speed That Sticks
csswizardry
3
370
RailsConf 2023
tenderlove
29
1k
How STYLIGHT went responsive
nonsquared
98
5.4k
Building Adaptive Systems
keathley
40
2.4k
The World Runs on Bad Software
bkeepers
PRO
67
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
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
Root-relative units html { font-size: 10px; } p { font-size:
1.4em; }←14px p span { font-size: 0.8572em; }←12px 0.85714285714286
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
Root-relative units E { width: 65vw; } F { width:
55vw; }←55% of root Pukka. http://www.w3.org/TR/css3-values/
In-/Ex-trinsic Sizing E { width: fill-available; } E { min-height:
fit-content; } http://www.w3.org/TR/css3-sizing/
Selectors ol span, ul span, p span {} *:matches(ol,ul,p) span
{} *:not(ul) 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 <label for="foo" /> <input id="foo" /> label /for/ input
{} label:hover /for/ input {} http://www.w3.org/TR/2011/WD-selectors4-20110929/ an attribute of E the value of which is equal to the id of F E /foo/ F
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 @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 C A B .outer { flex-direction: column; } .a,.b
{ order: 2; } .c { order: 1; } A B .outer { flex-direction: column; } .a { flex: 2; } .b { flex: 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; } Overflow http://dev.w3.org/csswg/css3-overflow/
Overflow E { overflow: fragments; } E::nth-fragment(odd) {} http://dev.w3.org/csswg/css3-break/ Overflow
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.
None
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/