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
190
Yeoman で Gulp環境をさらっと作る / gulp+yeoman
matsuoshi
1
92
Other Decks in Programming
See All in Programming
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
770
パスタの技術
yusukebe
1
400
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2k
CSC305 Summer Lecture 04
javiergs
PRO
1
100
State of CSS 2025
benjaminkott
1
120
TanStack DB ~状態管理の新しい考え方~
bmthd
2
290
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
300
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
900
kiroでゲームを作ってみた
iriikeita
0
180
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
danielsogl
0
160
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Writing Fast Ruby
sferik
628
62k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Why Our Code Smells
bkeepers
PRO
338
57k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Embracing the Ebb and Flow
colly
87
4.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
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
͔͜͜Βۙʹ͕͍͖ͬͯͦ͏ɺ ͞ΘͬͯΈΑ͏