Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

matsuo
January 28, 2017

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

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

matsuo

January 28, 2017
Tweet

More Decks by matsuo

Other Decks in Programming

Transcript

  1. ࣗݾ঺հ • দඌߒࢤ • TAM inc. CTOɾΤϯδχΞɾςΫχΧϧσΟϨΫλ
 ΋ͱ΋ͱαʔόʔαΠυΤϯδχΞɺݱࡏͷϝΠϯݴޠ͸ PHP +

    JS • PHPΧϯϑΝϨϯεؔ੢ ελοϑ ΄͔ • TAM ͸ डୗத৺ͷWEB੍࡞ϓϩμΫγϣϯ
 େࡕɾ౦ژɾγϯΨϙʔϧɾϩϯυϯ
  2. ࣮ࡍͷίʔυ͸γϯϓϧ • ϋΠϑϯ2͔ͭΒ࢝·Δ
 ϓϩύςΟͱ஋Λɺ
 ࣗ෼ͰఆٛͰ͖Δ • ͦΕΛ var() Ͱར༻Ͱ͖Δ :root

    {
 --main-color: #06c;
 --accent-color: #006;
 }
 
 .foo {
 color: var(--main-color);
 }
  3. 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>
  4. 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>
  5. • ΧελϜϓϩύςΟͷ஋ΛɺJS͔ΒࢀরɾઃఆͰ͖Δ 
 
 • ΧελϜϓϩύςΟΛܦ༝͠ɺ1ߦͰҰؾʹݟͨ໨Λม͑ΒΕΔ • αϯϓϧ http://codepen.io/pen/KavvvJ JavaScript

    ͔Β஋ΛࢀরɾઃఆͰ͖Δ value = getComputedStyle(elm).getPropertyValue('--foo'); elm.style.setProperty('--bar', value);
  6. PostCSS • CSSΛม׵͢ΔͨΊͷ node.js੡πʔϧ • ຊମ͸ػೳΛ΋ͨͣɺϓϥάΠϯͰ֦ு͍ͯ͘͠ • ͪͳΈʹ Autoprefixer ͸

    PostCSS ͷϓϥάΠϯ • ϓϥάΠϯΛࣗ࡞Ͱ͖ΔͳͲΧελϚΠζੑ͕ߴ͍
 ΦϨΦϨ؀ڥʹͳΓ΍͍͢ݒ೦΋…? http://postcss.org/
  7. cssnext • PostCSS ͷϓϥάΠϯू • W3C Ͱࡦఆ͕ਐΊΒΕ͍ͯΔ CSS ͷ৽͍͠ه๏Λɺ
 ઌऔΓͯ͠࢖͑ΔΑ͏ʹͨ͠΋ͷ

    • JS Ͱ͍͏ babel (ES6 → ES5 ม׵) ͷΠϝʔδʹ͍ۙ? • קࠂલͷ࢓༷Λઌߦ࣮૷͍ͯ͠ΔͷͰɺ࢓༷มߋͷՄೳੑ͸࢒Δ http://cssnext.io/ Use tomorrow’s CSS syntax, today.
  8. Πϝʔδ foo.css PostCSS bar.css cssnext Ϟμϯͳจ๏ͷ CSS,
 ֦ுࢠ͸ .css
 (ϒϥ΢βରԠঢ়گʹ


    Αͬͯ͸ͦͷ··ಈ͘) PostCSS + cssnextϓϥάΠϯͰ
 τϥϯεύΠϧ IEͳͲͰ΋ಈ͘CSSΛग़ྗ
  9. ؀ڥߏங (ΘΓͱ؆୯) • npm Ͱ postcss-cli ͱ postcss-cssnext ΛΠϯετʔϧ •

    ઃఆϑΝΠϧΛ 1ͭ༻ҙ (.json) • `postcss -wc ઃఆϑΝΠϧ໊` Ͱ watch & ੜ੒ • ؀ڥαϯϓϧ
 https://github.com/matsuoshi/cssnext-setup
  10. ͯͬͱΓૣ͘ࢼ͢ͳΒ • codepen Ͱ͸ PostCSS ΋
 cssnext ΋ରԠࡁΈɺ
 ϒϥ΢β্ͰࢼͤΔ •

    WebStorm / PhpStorm ΋
 ରԠͯ͠ΔΆ͍? (ະݕূ) http://codepen.io/
  11. PostCSS + cssnext Ͱม׵Λࢼ͢ :root { --main-color: black; } .foo

    { color: var(--main-color); } .foo { color: black; } → cssnext css
  12. ……ΉΉΉʁ :root {
 --main-color: black; }
 .bar { --main-color: red;

    }
 .foo, .bar {
 color: var(--main-color);
 } .bar { --main-color: red; } .foo, .bar { color: black; } → ࢼ͢ cssnext css
  13. 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ͷ୅ද֨
  14. nesting a { color: red; & span { color: white;

    } @nest span & { color: blue; } } a { color: red } a span { color: white } span a { color: blue } → ωετɺඞͣ & Λ͚ͭͯॻ͘ cssnext css
  15. @apply :root { --danger-theme: { color: white; background-color: red; };

    } .danger { @apply --danger-theme; } .danger { color: white; background-color: red; } → mixinతͳɺͨͩ͠Ҿ਺͸ͳͦ͛͞
  16. 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; } ϝσΟΞΫΤϦΛָʹॻ͚Δ
  17. custom selectors @custom-selector :--heading h1, h2, h3, h4, h5, h6;

    :--heading { font-weight: normal; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } ෳ਺ηϨΫλΛ·ͱΊΔ
  18. 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ͳͲͰ΋Α͋͘Δ৭ͷؔ਺
  19. :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; } → ΧϯϚ۠੾ΓͰෳ਺ηϨΫλΛ
  20. ϝϦοτ͸ɺকདྷతʹಈ͘CSSͰ͋Δ͜ͱ • cssnext ༻ʹ֮͑Δه๏͸ɺಠࣗ࢓༷Ͱ͸ͳ͘
 ͜Ε͔Βͷ CSS ͷඪ४࢓༷ʹͳ͍ͬͯ͘ (͸ͣ) • Sass

    / Stylus ͳͲͷಠࣗߏจ altCSS ͱͷҧ͍͸͜͜ • ֮͑ͨ͜ͱ͕কདྷແବʹͳΒͳ͍͜ͱΛظ଴…!?
  21. ݱ࣌఺Ͱͷ࣮༻ੑ͸ɺͲΜͳ΋Μ͔ • ΧελϜɾϓϩύςΟ͸ɺܧঝ΍ɺJS͔Βͷૢ࡞͕Ͱ͖ͳ͍ • @apply ͸Ҿ਺ͳ͠ • ϑΝΠϧͷ @import ͕Ͱ͖ͳ͍

    • PostCSS ͷ postcss-import ϓϥάΠϯͰɺผ్ରԠՄೳ • ࡦఆதͷ࢓༷͕มΘΔϦεΫ • ݱ࣌఺Ͱ͸ɺ͜ͷ͋ͨΓΛڐ༰Ͱ͖Δ͔Ͳ͏͔͕෼͔Ε໨