Pro Yearly is on sale from $80 to $50! »

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

73a5f95133889e0846ae38321686368b?s=47 matsuo
January 28, 2017

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

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

73a5f95133889e0846ae38321686368b?s=128

matsuo

January 28, 2017
Tweet

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

    ͸͔͜͜Β਎ۙʹ޿͕͍͖ͬͯͦ͏ɺ
 ͞ΘͬͯΈΑ͏