$30 off During Our Annual Pro Sale. View Details »

カスタム・プロパティと 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. ΧελϜɾϓϩύςΟͱ cssnext
    CSS Talk vol.2

    2017.01.28 matsuo @ TAM

    View Slide

  2. ࣗݾ঺հ
    • দඌߒࢤ
    • TAM inc. CTOɾΤϯδχΞɾςΫχΧϧσΟϨΫλ

    ΋ͱ΋ͱαʔόʔαΠυΤϯδχΞɺݱࡏͷϝΠϯݴޠ͸ PHP + JS
    • PHPΧϯϑΝϨϯεؔ੢ ελοϑ ΄͔
    • TAM ͸ डୗத৺ͷWEB੍࡞ϓϩμΫγϣϯ

    େࡕɾ౦ژɾγϯΨϙʔϧɾϩϯυϯ

    View Slide

  3. ࠓ೔ͷ಺༰
    • CSSͷΧελϜɾϓϩύςΟͱɺcssnext ͕

    ݸਓతʹؾʹͳͬͨͷͰௐ΂ͯΈ·ͨ͠
    • ݱ࣌఺Ͱ͸ʮ͏ʙΜʯͱࢥͬͨ఺΋͋Γɺ

    ·ͩ͜Ε͔Βͱ͍ͬͨҹ৅΋…

    View Slide

  4. (1) CSS ͷ ΧελϜɾϓϩύςΟ

    View Slide

  5. ͬͯͳʹ https://drafts.csswg.org/css-variables/

    View Slide

  6. ༁͢ͱ
    CSS Custom Properties for Cascading Variables
    ܧঝͰ͖Δม਺
    ͷͨΊͷ
    ΧελϜ͢ΔϓϩύςΟ
    ͏ΜɺΑ͘Θ͔ΒΜ

    View Slide

  7. ࣮ࡍͷίʔυ͸γϯϓϧ
    • ϋΠϑϯ2͔ͭΒ࢝·Δ

    ϓϩύςΟͱ஋Λɺ

    ࣗ෼ͰఆٛͰ͖Δ
    • ͦΕΛ var() Ͱར༻Ͱ͖Δ
    :root {

    --main-color: #06c;

    --accent-color: #006;

    }


    .foo {

    color: var(--main-color);

    }

    View Slide

  8. Ϟμϯϒϥ΢β͸͢Ͱʹ࣮૷ࡁΈ
    IE → × Edge → 15 ͔Β?
    http://caniuse.com/#search=custom%20properties

    View Slide

  9. ͦΕͬͯ

    Sass ͷม਺ͱͲ͏ҧ͏ͷʁ

    View Slide

  10. CSSΒ͘͠ɺܧঝͰ͖Δ
    :root { --col: black; }
    .info { --col: blue; }
    #warn { --col: red; }
    p {
    color: var(--col);
    }

    black


    blue


    red

    View Slide

  11. CSSΒ͘͠ɺৄࡉ౓͕͋Δ
    :root { --col: black; }
    .info { --col: blue; }
    #warn { --col: red; }
    .safe {
    --col: green !important;
    }
    p {
    color: var(--col);
    }

    red


    green

    View Slide

  12. • ΧελϜϓϩύςΟͷ஋ΛɺJS͔ΒࢀরɾઃఆͰ͖Δ


    • ΧελϜϓϩύςΟΛܦ༝͠ɺ1ߦͰҰؾʹݟͨ໨Λม͑ΒΕΔ
    • αϯϓϧ http://codepen.io/pen/KavvvJ
    JavaScript ͔Β஋ΛࢀরɾઃఆͰ͖Δ
    value = getComputedStyle(elm).getPropertyValue('--foo');
    elm.style.setProperty('--bar', value);

    View Slide

  13. Custom Properties

    for

    Cascading Variables
    ܧঝͰ͖Δม਺ͷͨΊͷ

    ࣗલϓϩύςΟ

    View Slide


  14. ʙ ୈ1෦ ׬ ʙ

    Ϟμϯϒϥ΢βͳΒɺ͙͢ʹͰ΋࢖͑Δ

    IEܥ͸Ͳ͏͢Δ? → ୈ2෦ʹͭͮ͘

    View Slide

  15. (2) PostCSS / cssnext

    View Slide

  16. PostCSS
    • CSSΛม׵͢ΔͨΊͷ node.js੡πʔϧ
    • ຊମ͸ػೳΛ΋ͨͣɺϓϥάΠϯͰ֦ு͍ͯ͘͠
    • ͪͳΈʹ Autoprefixer ͸ PostCSS ͷϓϥάΠϯ
    • ϓϥάΠϯΛࣗ࡞Ͱ͖ΔͳͲΧελϚΠζੑ͕ߴ͍

    ΦϨΦϨ؀ڥʹͳΓ΍͍͢ݒ೦΋…?
    http://postcss.org/

    View Slide

  17. cssnext
    • PostCSS ͷϓϥάΠϯू
    • W3C Ͱࡦఆ͕ਐΊΒΕ͍ͯΔ CSS ͷ৽͍͠ه๏Λɺ

    ઌऔΓͯ͠࢖͑ΔΑ͏ʹͨ͠΋ͷ
    • JS Ͱ͍͏ babel (ES6 → ES5 ม׵) ͷΠϝʔδʹ͍ۙ?
    • קࠂલͷ࢓༷Λઌߦ࣮૷͍ͯ͠ΔͷͰɺ࢓༷มߋͷՄೳੑ͸࢒Δ
    http://cssnext.io/
    Use tomorrow’s CSS syntax, today.

    View Slide

  18. Πϝʔδ
    foo.css
    PostCSS
    bar.css
    cssnext
    Ϟμϯͳจ๏ͷ CSS,

    ֦ுࢠ͸ .css

    (ϒϥ΢βରԠঢ়گʹ

    Αͬͯ͸ͦͷ··ಈ͘)
    PostCSS + cssnextϓϥάΠϯͰ

    τϥϯεύΠϧ
    IEͳͲͰ΋ಈ͘CSSΛग़ྗ

    View Slide

  19. PostCSS + cssnext ͰɺIEܥͰ΋
    ΧελϜɾϓϩύςΟ͕࢖͑Δ?

    ࢼͯ͠Έͨ

    View Slide

  20. ؀ڥߏங (ΘΓͱ؆୯)
    • npm Ͱ postcss-cli ͱ postcss-cssnext ΛΠϯετʔϧ
    • ઃఆϑΝΠϧΛ 1ͭ༻ҙ (.json)
    • `postcss -wc ઃఆϑΝΠϧ໊` Ͱ watch & ੜ੒
    • ؀ڥαϯϓϧ

    https://github.com/matsuoshi/cssnext-setup

    View Slide

  21. ͯͬͱΓૣ͘ࢼ͢ͳΒ
    • codepen Ͱ͸ PostCSS ΋

    cssnext ΋ରԠࡁΈɺ

    ϒϥ΢β্ͰࢼͤΔ
    • WebStorm / PhpStorm ΋

    ରԠͯ͠ΔΆ͍? (ະݕূ)
    http://codepen.io/

    View Slide

  22. PostCSS + cssnext Ͱม׵Λࢼ͢
    :root {
    --main-color: black;
    }
    .foo {
    color: var(--main-color);
    }
    .foo {
    color: black;
    }

    cssnext css

    View Slide

  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

    View Slide

  24. ܧঝ͕Ͱ͖ͳ͍……!!!
    • cssnext ͷ੍ݶͰɺΧελϜɾϓϩύςΟ͸ :root ʹ͔͠ॻ͚ͳ͍
    • ͭ·Γܧঝ͢ΔΑ͏ͳ࢖͍ํ͸Ͱ͖ͳ͍
    • ܧঝʹରԠͨ͠ϒϥ΢βʹͱͬͯ͸ɺ

    cssnext Λ௨͢͜ͱͰɺ௨͢લͱ࣮ߦ݁Ռ͕มΘͬͯ͠·͏

    (Ωπ͍)

    View Slide

  25. ଞͷσϝϦοτ
    • τϥϯεύΠϧͯ͠ IEͰ΋ಈ͘Α͏ͳCSSʹ͍ͯ͠ΔͨΊɺ

    JavaScript ͔ΒΧελϜɾϓϩύςΟͷࢀরɾઃఆ΋ෆՄ
    • ࢓૊ΈΛߟ͑Δͱɺܧঝ΋JS͔Βͷૢ࡞΋ɺ

    ͓ͦΒ͘ cssnext ͷΈͰ͸ࠓޙ΋ରԠ͞Εͳ͍ͷͰ͸……

    (JS ϙϦϑΟϧͰͷ࣮ݱՄೳੑ͸͋Δ?)

    View Slide

  26. ʙ ୈ2෦ ׬ ʙ

    View Slide

  27. ؾΛͱΓͳ͓ͯ͠

    cssnext ͷφΠεͳ࢓༷ͨͪΛ

    ঺հ͠·͢!!!!!!!
    http://cssnext.io/features/

    View Slide

  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ͷ୅ද֨

    View Slide

  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

    View Slide

  30. @apply
    :root {
    --danger-theme: {
    color: white;
    background-color: red;
    };
    }
    .danger {
    @apply --danger-theme;
    }
    .danger {
    color: white;
    background-color: red;
    }

    mixinతͳɺͨͩ͠Ҿ਺͸ͳͦ͛͞

    View Slide

  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;
    }
    ϝσΟΞΫΤϦΛָʹॻ͚Δ

    View Slide

  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;
    }
    ෳ਺ηϨΫλΛ·ͱΊΔ

    View Slide

  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ͳͲͰ΋Α͋͘Δ৭ͷؔ਺

    View Slide

  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;
    }

    ΧϯϚ۠੾ΓͰෳ਺ηϨΫλΛ

    View Slide

  35. ͜ΕΒ͸ݱࡏɺ

    W3C Ͱࡦఆதͷ࢓༷

    View Slide

  36. ϝϦοτ͸ɺকདྷతʹಈ͘CSSͰ͋Δ͜ͱ
    • cssnext ༻ʹ֮͑Δه๏͸ɺಠࣗ࢓༷Ͱ͸ͳ͘

    ͜Ε͔Βͷ CSS ͷඪ४࢓༷ʹͳ͍ͬͯ͘ (͸ͣ)
    • Sass / Stylus ͳͲͷಠࣗߏจ altCSS ͱͷҧ͍͸͜͜
    • ֮͑ͨ͜ͱ͕কདྷແବʹͳΒͳ͍͜ͱΛظ଴…!?

    View Slide

  37. ݱ࣌఺Ͱͷ࣮༻ੑ͸ɺͲΜͳ΋Μ͔
    • ΧελϜɾϓϩύςΟ͸ɺܧঝ΍ɺJS͔Βͷૢ࡞͕Ͱ͖ͳ͍
    • @apply ͸Ҿ਺ͳ͠
    • ϑΝΠϧͷ @import ͕Ͱ͖ͳ͍
    • PostCSS ͷ postcss-import ϓϥάΠϯͰɺผ్ରԠՄೳ
    • ࡦఆதͷ࢓༷͕มΘΔϦεΫ
    • ݱ࣌఺Ͱ͸ɺ͜ͷ͋ͨΓΛڐ༰Ͱ͖Δ͔Ͳ͏͔͕෼͔Ε໨

    View Slide

  38. ·ͱΊ

    View Slide

  39. ·ͱΊ
    • ΧελϜɾϓϩύςΟศརͦ͏ɺϞμϯϒϥ΢β͸ରԠࡁΈ
    • cssnext Λ͍·౿ΈࠐΜͰ࢖͍͔ͬͯ͘͸֤ࣗ͝൑அΛ…

    ͱ͍͏ײ૝ͱɺকདྷੑ΋େ͍ʹ
    • ৽͍͠ CSS ͸͔͜͜Β਎ۙʹ޿͕͍͖ͬͯͦ͏ɺ

    ͞ΘͬͯΈΑ͏

    View Slide