カスタム・プロパティと cssnext #csstalk

CSS Talk Vol.2 発表資料です (2017.01.28 @ TAM)
https://taminc.doorkeeper.jp/events/54947

Transcript

1. ΧελϜɾϓϩύςΟͱ cssnext CSS Talk vol.2
 2017.01.28 matsuo @ TAM
2. ࣗݾ঺հ • দඌߒࢤ • TAM inc. CTOɾΤϯδχΞɾςΫχΧϧσΟϨΫλ
 ΋ͱ΋ͱαʔόʔαΠυΤϯδχΞɺݱࡏͷϝΠϯݴޠ͸ PHP + JS • PHPΧϯϑΝϨϯεؔ੢ ελοϑ ΄͔ • TAM ͸ डୗத৺ͷWEB੍࡞ϓϩμΫγϣϯ
 େࡕɾ౦ژɾγϯΨϙʔϧɾϩϯυϯ
3. ࠓ೔ͷ಺༰ • CSSͷΧελϜɾϓϩύςΟͱɺcssnext ͕
 ݸਓతʹؾʹͳͬͨͷͰௐ΂ͯΈ·ͨ͠ • ݱ࣌఺Ͱ͸ʮ͏ʙΜʯͱࢥͬͨ఺΋͋Γɺ
 ·ͩ͜Ε͔Βͱ͍ͬͨҹ৅΋…
4. (1) CSS ͷ ΧελϜɾϓϩύςΟ
5. ͬͯͳʹ https://drafts.csswg.org/css-variables/
6. ༁͢ͱ CSS Custom Properties for Cascading Variables ܧঝͰ͖Δม਺ ͷͨΊͷ ΧελϜ͢ΔϓϩύςΟ ͏ΜɺΑ͘Θ͔ΒΜ
7. ࣮ࡍͷίʔυ͸γϯϓϧ • ϋΠϑϯ2͔ͭΒ࢝·Δ
 ϓϩύςΟͱ஋Λɺ
 ࣗ෼ͰఆٛͰ͖Δ • ͦΕΛ var() Ͱར༻Ͱ͖Δ :root {
 --main-color: #06c;
 --accent-color: #006;
 }
 
 .foo {
 color: var(--main-color);
 }
8. Ϟμϯϒϥ΢β͸͢Ͱʹ࣮૷ࡁΈ IE → × Edge → 15 ͔Β? http://caniuse.com/#search=custom%20properties
9. ͦΕͬͯ
 Sass ͷม਺ͱͲ͏ҧ͏ͷʁ
10. 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>
11. 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>
12. • ΧελϜϓϩύςΟͷ஋ΛɺJS͔ΒࢀরɾઃఆͰ͖Δ 
 
 • ΧελϜϓϩύςΟΛܦ༝͠ɺ1ߦͰҰؾʹݟͨ໨Λม͑ΒΕΔ • αϯϓϧ http://codepen.io/pen/KavvvJ JavaScript ͔Β஋ΛࢀরɾઃఆͰ͖Δ value = getComputedStyle(elm).getPropertyValue('--foo'); elm.style.setProperty('--bar', value);
13. Custom Properties
 for
 Cascading Variables ܧঝͰ͖Δม਺ͷͨΊͷ
 ࣗલϓϩύςΟ
14. 
 ʙ ୈ1෦ ׬ ʙ 
 Ϟμϯϒϥ΢βͳΒɺ͙͢ʹͰ΋࢖͑Δ
 IEܥ͸Ͳ͏͢Δ? → ୈ2෦ʹͭͮ͘
15. (2) PostCSS / cssnext
16. PostCSS • CSSΛม׵͢ΔͨΊͷ node.js੡πʔϧ • ຊମ͸ػೳΛ΋ͨͣɺϓϥάΠϯͰ֦ு͍ͯ͘͠ • ͪͳΈʹ Autoprefixer ͸ PostCSS ͷϓϥάΠϯ • ϓϥάΠϯΛࣗ࡞Ͱ͖ΔͳͲΧελϚΠζੑ͕ߴ͍
 ΦϨΦϨ؀ڥʹͳΓ΍͍͢ݒ೦΋…? http://postcss.org/
17. cssnext • PostCSS ͷϓϥάΠϯू • W3C Ͱࡦఆ͕ਐΊΒΕ͍ͯΔ CSS ͷ৽͍͠ه๏Λɺ
 ઌऔΓͯ͠࢖͑ΔΑ͏ʹͨ͠΋ͷ • JS Ͱ͍͏ babel (ES6 → ES5 ม׵) ͷΠϝʔδʹ͍ۙ? • קࠂલͷ࢓༷Λઌߦ࣮૷͍ͯ͠ΔͷͰɺ࢓༷มߋͷՄೳੑ͸࢒Δ http://cssnext.io/ Use tomorrow’s CSS syntax, today.
18. Πϝʔδ foo.css PostCSS bar.css cssnext Ϟμϯͳจ๏ͷ CSS,
 ֦ுࢠ͸ .css
 (ϒϥ΢βରԠঢ়گʹ
 Αͬͯ͸ͦͷ··ಈ͘) PostCSS + cssnextϓϥάΠϯͰ
 τϥϯεύΠϧ IEͳͲͰ΋ಈ͘CSSΛग़ྗ
19. PostCSS + cssnext ͰɺIEܥͰ΋ ΧελϜɾϓϩύςΟ͕࢖͑Δ? ↓ ࢼͯ͠Έͨ
20. ؀ڥߏங (ΘΓͱ؆୯) • npm Ͱ postcss-cli ͱ postcss-cssnext ΛΠϯετʔϧ • ઃఆϑΝΠϧΛ 1ͭ༻ҙ (.json) • `postcss -wc ઃఆϑΝΠϧ໊` Ͱ watch & ੜ੒ • ؀ڥαϯϓϧ
 https://github.com/matsuoshi/cssnext-setup
21. ͯͬͱΓૣ͘ࢼ͢ͳΒ • codepen Ͱ͸ PostCSS ΋
 cssnext ΋ରԠࡁΈɺ
 ϒϥ΢β্ͰࢼͤΔ • WebStorm / PhpStorm ΋
 ରԠͯ͠ΔΆ͍? (ະݕূ) http://codepen.io/
22. PostCSS + cssnext Ͱม׵Λࢼ͢ :root { --main-color: black; } .foo { color: var(--main-color); } .foo { color: black; } → cssnext css
23. ……ΉΉΉʁ :root {
 --main-color: black; }
 .bar { --main-color: red; }
 .foo, .bar {
 color: var(--main-color);
 } .bar { --main-color: red; } .foo, .bar { color: black; } → ࢼ͢ cssnext css
24. ܧঝ͕Ͱ͖ͳ͍……!!! • cssnext ͷ੍ݶͰɺΧελϜɾϓϩύςΟ͸ :root ʹ͔͠ॻ͚ͳ͍ • ͭ·Γܧঝ͢ΔΑ͏ͳ࢖͍ํ͸Ͱ͖ͳ͍ • ܧঝʹରԠͨ͠ϒϥ΢βʹͱͬͯ͸ɺ
 cssnext Λ௨͢͜ͱͰɺ௨͢લͱ࣮ߦ݁Ռ͕มΘͬͯ͠·͏
 (Ωπ͍)
25. ଞͷσϝϦοτ • τϥϯεύΠϧͯ͠ IEͰ΋ಈ͘Α͏ͳCSSʹ͍ͯ͠ΔͨΊɺ
 JavaScript ͔ΒΧελϜɾϓϩύςΟͷࢀরɾઃఆ΋ෆՄ • ࢓૊ΈΛߟ͑Δͱɺܧঝ΋JS͔Βͷૢ࡞΋ɺ
 ͓ͦΒ͘ cssnext ͷΈͰ͸ࠓޙ΋ରԠ͞Εͳ͍ͷͰ͸……
 (JS ϙϦϑΟϧͰͷ࣮ݱՄೳੑ͸͋Δ?)
26. ʙ ୈ2෦ ׬ ʙ
27. ؾΛͱΓͳ͓ͯ͠
 cssnext ͷφΠεͳ࢓༷ͨͪΛ
 ঺հ͠·͢!!!!!!! http://cssnext.io/features/
28. 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ͷ୅ද֨
29. nesting a { color: red; & span { color: white; } @nest span & { color: blue; } } a { color: red } a span { color: white } span a { color: blue } → ωετɺඞͣ & Λ͚ͭͯॻ͘ cssnext css
30. @apply :root { --danger-theme: { color: white; background-color: red; }; } .danger { @apply --danger-theme; } .danger { color: white; background-color: red; } → mixinతͳɺͨͩ͠Ҿ਺͸ͳͦ͛͞
31. 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; } ϝσΟΞΫΤϦΛָʹॻ͚Δ
32. custom selectors @custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { font-weight: normal; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } ෳ਺ηϨΫλΛ·ͱΊΔ
33. 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ͳͲͰ΋Α͋͘Δ৭ͷؔ਺
34. :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; } → ΧϯϚ۠੾ΓͰෳ਺ηϨΫλΛ
35. ͜ΕΒ͸ݱࡏɺ
 W3C Ͱࡦఆதͷ࢓༷
36. ϝϦοτ͸ɺকདྷతʹಈ͘CSSͰ͋Δ͜ͱ • cssnext ༻ʹ֮͑Δه๏͸ɺಠࣗ࢓༷Ͱ͸ͳ͘
 ͜Ε͔Βͷ CSS ͷඪ४࢓༷ʹͳ͍ͬͯ͘ (͸ͣ) • Sass / Stylus ͳͲͷಠࣗߏจ altCSS ͱͷҧ͍͸͜͜ • ֮͑ͨ͜ͱ͕কདྷແବʹͳΒͳ͍͜ͱΛظ଴…!?
37. ݱ࣌఺Ͱͷ࣮༻ੑ͸ɺͲΜͳ΋Μ͔ • ΧελϜɾϓϩύςΟ͸ɺܧঝ΍ɺJS͔Βͷૢ࡞͕Ͱ͖ͳ͍ • @apply ͸Ҿ਺ͳ͠ • ϑΝΠϧͷ @import ͕Ͱ͖ͳ͍ • PostCSS ͷ postcss-import ϓϥάΠϯͰɺผ్ରԠՄೳ • ࡦఆதͷ࢓༷͕มΘΔϦεΫ • ݱ࣌఺Ͱ͸ɺ͜ͷ͋ͨΓΛڐ༰Ͱ͖Δ͔Ͳ͏͔͕෼͔Ε໨
38. ·ͱΊ
39. ·ͱΊ • ΧελϜɾϓϩύςΟศརͦ͏ɺϞμϯϒϥ΢β͸ରԠࡁΈ • cssnext Λ͍·౿ΈࠐΜͰ࢖͍͔ͬͯ͘͸֤ࣗ͝൑அΛ…
 ͱ͍͏ײ૝ͱɺকདྷੑ΋େ͍ʹ • ৽͍͠ CSS ͸͔͜͜Β਎ۙʹ޿͕͍͖ͬͯͦ͏ɺ
 ͞ΘͬͯΈΑ͏