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
カスタム・プロパティと cssnext #csstalk
Search
matsuo
January 28, 2017
Programming
2
2.4k
カスタム・プロパティと cssnext #csstalk
CSS Talk Vol.2 発表資料です (2017.01.28 @ TAM)
https://taminc.doorkeeper.jp/events/54947
matsuo
January 28, 2017
Tweet
Share
More Decks by matsuo
See All by matsuo
わたしと仕事とアジャイルコミュニティ / developers summit 2025
matsuoshi
0
1.1k
「偏愛マップ」ワークショップ導入 / eccentric love map
matsuoshi
0
1.6k
Backlogの運用ルールをチームみんなで決めた話 / JBUG Osaka 2
matsuoshi
2
1.5k
Speaker Deck のURLをなんとかする / speakerdeck's url
matsuoshi
4
1.2k
モブプログラミングやってみた (PHPカンファレンス関西2018懇親会LT) #phpkansai / mobmob
matsuoshi
0
2k
俺とTrelloと終わらんタスク (DevLOVE関西 "個人のタスクマネジメント"のコツや悩みを話す場 資料) #devkan
matsuoshi
7
8.2k
「みんなではじめるデザイン批評」 DevLOVE関西 ビブリオバトル
matsuoshi
0
180
Yeoman で Gulp環境をさらっと作る / gulp+yeoman
matsuoshi
1
85
Other Decks in Programming
See All in Programming
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
190
Development of an App for Intuitive AI Learning - Blockly Summit 2025
teba_eleven
0
110
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
120
ワンバイナリWebサービスのススメ
mackee
10
7.7k
漸進。
ssssota
0
1.8k
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
160
人には人それぞれのサービス層がある
shimabox
3
660
無関心の谷
kanayannet
0
160
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
110
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
400
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
3
1.9k
「兵法」から見る質とスピード
ickx
0
260
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Producing Creativity
orderedlist
PRO
346
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
130
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Bash Introduction
62gerente
614
210k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
Transcript
ΧελϜɾϓϩύςΟͱ cssnext CSS Talk vol.2 2017.01.28 matsuo @ TAM
ࣗݾհ • দඌߒࢤ • TAM inc. CTOɾΤϯδχΞɾςΫχΧϧσΟϨΫλ ͱͱαʔόʔαΠυΤϯδχΞɺݱࡏͷϝΠϯݴޠ PHP +
JS • PHPΧϯϑΝϨϯεؔ ελοϑ ΄͔ • TAM डୗத৺ͷWEB੍࡞ϓϩμΫγϣϯ େࡕɾ౦ژɾγϯΨϙʔϧɾϩϯυϯ
ࠓͷ༰ • CSSͷΧελϜɾϓϩύςΟͱɺcssnext ͕ ݸਓతʹؾʹͳͬͨͷͰௐͯΈ·ͨ͠ • ݱ࣌Ͱʮ͏ʙΜʯͱࢥͬͨ͋Γɺ ·ͩ͜Ε͔Βͱ͍ͬͨҹ…
(1) CSS ͷ ΧελϜɾϓϩύςΟ
ͬͯͳʹ https://drafts.csswg.org/css-variables/
༁͢ͱ CSS Custom Properties for Cascading Variables ܧঝͰ͖Δม ͷͨΊͷ ΧελϜ͢ΔϓϩύςΟ
͏ΜɺΑ͘Θ͔ΒΜ
࣮ࡍͷίʔυγϯϓϧ • ϋΠϑϯ2͔ͭΒ࢝·Δ ϓϩύςΟͱΛɺ ࣗͰఆٛͰ͖Δ • ͦΕΛ var() Ͱར༻Ͱ͖Δ :root
{ --main-color: #06c; --accent-color: #006; } .foo { color: var(--main-color); }
Ϟμϯϒϥβ͢Ͱʹ࣮ࡁΈ IE → × Edge → 15 ͔Β? http://caniuse.com/#search=custom%20properties
ͦΕͬͯ Sass ͷมͱͲ͏ҧ͏ͷʁ
CSSΒ͘͠ɺܧঝͰ͖Δ :root { --col: black; } .info { --col: blue;
} #warn { --col: red; } p { color: var(--col); } <p> black </p> <p class="info"> blue </p> <p id="warn"> red </p>
CSSΒ͘͠ɺৄࡉ͕͋Δ :root { --col: black; } .info { --col: blue;
} #warn { --col: red; } .safe { --col: green !important; } p { color: var(--col); } <p id="warn" class="info"> red </p> <p id="warn" class="safe"> green </p>
• ΧελϜϓϩύςΟͷΛɺJS͔ΒࢀরɾઃఆͰ͖Δ • ΧελϜϓϩύςΟΛܦ༝͠ɺ1ߦͰҰؾʹݟͨΛม͑ΒΕΔ • αϯϓϧ http://codepen.io/pen/KavvvJ JavaScript
͔ΒΛࢀরɾઃఆͰ͖Δ value = getComputedStyle(elm).getPropertyValue('--foo'); elm.style.setProperty('--bar', value);
Custom Properties for Cascading Variables ܧঝͰ͖ΔมͷͨΊͷ ࣗલϓϩύςΟ
ʙ ୈ1෦ ʙ ϞμϯϒϥβͳΒɺ͙͢ʹͰ͑Δ IEܥͲ͏͢Δ? → ୈ2෦ʹͭͮ͘
(2) PostCSS / cssnext
PostCSS • CSSΛม͢ΔͨΊͷ node.jsπʔϧ • ຊମػೳΛͨͣɺϓϥάΠϯͰ֦ு͍ͯ͘͠ • ͪͳΈʹ Autoprefixer
PostCSS ͷϓϥάΠϯ • ϓϥάΠϯΛࣗ࡞Ͱ͖ΔͳͲΧελϚΠζੑ͕ߴ͍ ΦϨΦϨڥʹͳΓ͍͢ݒ೦…? http://postcss.org/
cssnext • PostCSS ͷϓϥάΠϯू • W3C Ͱࡦఆ͕ਐΊΒΕ͍ͯΔ CSS ͷ৽͍͠ه๏Λɺ ઌऔΓͯ͑͠ΔΑ͏ʹͨ͠ͷ
• JS Ͱ͍͏ babel (ES6 → ES5 ม) ͷΠϝʔδʹ͍ۙ? • קࠂલͷ༷Λઌߦ࣮͍ͯ͠ΔͷͰɺ༷มߋͷՄೳੑΔ http://cssnext.io/ Use tomorrow’s CSS syntax, today.
Πϝʔδ foo.css PostCSS bar.css cssnext Ϟμϯͳจ๏ͷ CSS, ֦ுࢠ .css (ϒϥβରԠঢ়گʹ
Αͬͯͦͷ··ಈ͘) PostCSS + cssnextϓϥάΠϯͰ τϥϯεύΠϧ IEͳͲͰಈ͘CSSΛग़ྗ
PostCSS + cssnext ͰɺIEܥͰ ΧελϜɾϓϩύςΟ͕͑Δ? ↓ ࢼͯ͠Έͨ
ڥߏங (ΘΓͱ؆୯) • npm Ͱ postcss-cli ͱ postcss-cssnext ΛΠϯετʔϧ •
ઃఆϑΝΠϧΛ 1ͭ༻ҙ (.json) • `postcss -wc ઃఆϑΝΠϧ໊` Ͱ watch & ੜ • ڥαϯϓϧ https://github.com/matsuoshi/cssnext-setup
ͯͬͱΓૣ͘ࢼ͢ͳΒ • codepen Ͱ PostCSS cssnext ରԠࡁΈɺ ϒϥβ্ͰࢼͤΔ •
WebStorm / PhpStorm ରԠͯ͠ΔΆ͍? (ະݕূ) http://codepen.io/
PostCSS + cssnext ͰมΛࢼ͢ :root { --main-color: black; } .foo
{ color: var(--main-color); } .foo { color: black; } → cssnext css
……ΉΉΉʁ :root { --main-color: black; } .bar { --main-color: red;
} .foo, .bar { color: var(--main-color); } .bar { --main-color: red; } .foo, .bar { color: black; } → ࢼ͢ cssnext css
ܧঝ͕Ͱ͖ͳ͍……!!! • cssnext ͷ੍ݶͰɺΧελϜɾϓϩύςΟ :root ʹ͔͠ॻ͚ͳ͍ • ͭ·Γܧঝ͢ΔΑ͏ͳ͍ํͰ͖ͳ͍ • ܧঝʹରԠͨ͠ϒϥβʹͱͬͯɺ
cssnext Λ௨͢͜ͱͰɺ௨͢લͱ࣮ߦ݁Ռ͕มΘͬͯ͠·͏ (Ωπ͍)
ଞͷσϝϦοτ • τϥϯεύΠϧͯ͠ IEͰಈ͘Α͏ͳCSSʹ͍ͯ͠ΔͨΊɺ JavaScript ͔ΒΧελϜɾϓϩύςΟͷࢀরɾઃఆෆՄ • ΈΛߟ͑ΔͱɺܧঝJS͔Βͷૢ࡞ɺ ͓ͦΒ͘ cssnext
ͷΈͰࠓޙରԠ͞Εͳ͍ͷͰ…… (JS ϙϦϑΟϧͰͷ࣮ݱՄೳੑ͋Δ?)
ʙ ୈ2෦ ʙ
ؾΛͱΓͳ͓ͯ͠ cssnext ͷφΠεͳ༷ͨͪΛ հ͠·͢!!!!!!! http://cssnext.io/features/
Autoprefixer .foo { image-rendering: pixelated; } .foo { -ms-interpolation-mode: nearest-neighbor;
image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: pixelate } Έͳ͞Μ͓ͳ͡Έfallbackͷද֨
nesting a { color: red; & span { color: white;
} @nest span & { color: blue; } } a { color: red } a span { color: white } span a { color: blue } → ωετɺඞͣ & Λ͚ͭͯॻ͘ cssnext css
@apply :root { --danger-theme: { color: white; background-color: red; };
} .danger { @apply --danger-theme; } .danger { color: white; background-color: red; } → mixinతͳɺͨͩ͠Ҿͳͦ͛͞
custom media queries @custom-media --screen-md (width >= 500px) and (width
<= 1200px); @media (--screen-md) { color: red; } @media (min-width: 500px) and (max-width: 1200px) { color: red; } ϝσΟΞΫΤϦΛָʹॻ͚Δ
custom selectors @custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading { font-weight: normal; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } ෳηϨΫλΛ·ͱΊΔ
color a { color: color(red alpha(-10%)); &:hover { color: color(red
blackness(80%)); } } a { color: rgba(255, 0, 0, 0.9) } a:hover { color: rgb(51, 0, 0) } SassͳͲͰΑ͋͘Δ৭ͷؔ
:matches, :not .foo table :matches(td, th) { color: red; }
p:not(:first-child, .bar) { color: red; } .foo table td, .foo table th { color: red; } p:not(:first-child):not(.bar) { color: red; } → ΧϯϚ۠ΓͰෳηϨΫλΛ
͜ΕΒݱࡏɺ W3C Ͱࡦఆதͷ༷
ϝϦοτɺকདྷతʹಈ͘CSSͰ͋Δ͜ͱ • cssnext ༻ʹ֮͑Δه๏ɺಠ༷ࣗͰͳ͘ ͜Ε͔Βͷ CSS ͷඪ४༷ʹͳ͍ͬͯ͘ (ͣ) • Sass
/ Stylus ͳͲͷಠࣗߏจ altCSS ͱͷҧ͍͜͜ • ֮͑ͨ͜ͱ͕কདྷແବʹͳΒͳ͍͜ͱΛظ…!?
ݱ࣌Ͱͷ࣮༻ੑɺͲΜͳΜ͔ • ΧελϜɾϓϩύςΟɺܧঝɺJS͔Βͷૢ࡞͕Ͱ͖ͳ͍ • @apply Ҿͳ͠ • ϑΝΠϧͷ @import ͕Ͱ͖ͳ͍
• PostCSS ͷ postcss-import ϓϥάΠϯͰɺผ్ରԠՄೳ • ࡦఆதͷ༷͕มΘΔϦεΫ • ݱ࣌Ͱɺ͜ͷ͋ͨΓΛڐ༰Ͱ͖Δ͔Ͳ͏͔͕͔Ε
·ͱΊ
·ͱΊ • ΧελϜɾϓϩύςΟศརͦ͏ɺϞμϯϒϥβରԠࡁΈ • cssnext Λ͍·౿ΈࠐΜͰ͍͔֤ͬͯࣗ͘͝அΛ… ͱ͍͏ײͱɺকདྷੑେ͍ʹ • ৽͍͠ CSS
͔͜͜Βۙʹ͕͍͖ͬͯͦ͏ɺ ͞ΘͬͯΈΑ͏