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.1k
カスタム・プロパティと 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
「偏愛マップ」ワークショップ導入 / eccentric love map
matsuoshi
0
1.3k
Backlogの運用ルールをチームみんなで決めた話 / JBUG Osaka 2
matsuoshi
2
1.2k
Speaker Deck のURLをなんとかする / speakerdeck's url
matsuoshi
3
990
モブプログラミングやってみた (PHPカンファレンス関西2018懇親会LT) #phpkansai / mobmob
matsuoshi
0
1.9k
俺とTrelloと終わらんタスク (DevLOVE関西 "個人のタスクマネジメント"のコツや悩みを話す場 資料) #devkan
matsuoshi
7
8k
「みんなではじめるデザイン批評」 DevLOVE関西 ビブリオバトル
matsuoshi
0
150
Yeoman で Gulp環境をさらっと作る / gulp+yeoman
matsuoshi
1
59
Other Decks in Programming
See All in Programming
最近追加した型の紹介とその振り返り
aki19035vc
0
170
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
유연한 Composable 설계
l2hyunwoo
0
380
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
CSC307 Lecture 06
javiergs
PRO
0
360
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
CSC307 Lecture 05
javiergs
PRO
0
210
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
Featured
See All Featured
For a Future-Friendly Web
brad_frost
173
9.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Happy Clients
brianwarren
94
6.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
It's Worth the Effort
3n
181
27k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Building Your Own Lightsaber
phodgson
101
5.9k
Infographics Made Easy
chrislema
238
18k
Thoughts on Productivity
jonyablonski
64
4.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
A better future with KSS
kneath
231
17k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
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
͔͜͜Βۙʹ͕͍͖ͬͯͦ͏ɺ ͞ΘͬͯΈΑ͏