カスタム・プロパティと 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
   

   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