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.3k
カスタム・プロパティと 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.4k
Backlogの運用ルールをチームみんなで決めた話 / JBUG Osaka 2
matsuoshi
2
1.3k
Speaker Deck のURLをなんとかする / speakerdeck's url
matsuoshi
3
1.1k
モブプログラミングやってみた (PHPカンファレンス関西2018懇親会LT) #phpkansai / mobmob
matsuoshi
0
1.9k
俺とTrelloと終わらんタスク (DevLOVE関西 "個人のタスクマネジメント"のコツや悩みを話す場 資料) #devkan
matsuoshi
7
8.1k
「みんなではじめるデザイン批評」 DevLOVE関西 ビブリオバトル
matsuoshi
0
160
Yeoman で Gulp環境をさらっと作る / gulp+yeoman
matsuoshi
1
61
Other Decks in Programming
See All in Programming
useSyncExternalStoreを使いまくる
ssssota
6
1k
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
930
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
310
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
Recoilを剥がしている話
kirik
5
6.6k
Security_for_introducing_eBPF
kentatada
0
110
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
1
120
fs2-io を試してたらバグを見つけて直した話
chencmd
0
220
たのしいparse.y
ydah
3
120
Go の GC の不得意な部分を克服したい
taiyow
2
770
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510
BBQ
matthewcrist
85
9.4k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Practical Orchestrator
shlominoach
186
10k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Navigating Team Friction
lara
183
15k
Done Done
chrislema
181
16k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
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
͔͜͜Βۙʹ͕͍͖ͬͯͦ͏ɺ ͞ΘͬͯΈΑ͏