CSS Talk Vol.2 発表資料です (2017.01.28 @ TAM) https://taminc.doorkeeper.jp/events/54947
ΧελϜɾϓϩύςΟͱ cssnextCSS Talk vol.2 2017.01.28 matsuo @ TAM
View Slide
ࣗݾհ• দඌߒࢤ• TAM inc. CTOɾΤϯδχΞɾςΫχΧϧσΟϨΫλ ͱͱαʔόʔαΠυΤϯδχΞɺݱࡏͷϝΠϯݴޠ PHP + JS• PHPΧϯϑΝϨϯεؔ ελοϑ ΄͔• TAM डୗத৺ͷWEB੍࡞ϓϩμΫγϣϯ େࡕɾ౦ژɾγϯΨϙʔϧɾϩϯυϯ
ࠓͷ༰• CSSͷΧελϜɾϓϩύςΟͱɺcssnext ͕ ݸਓతʹؾʹͳͬͨͷͰௐͯΈ·ͨ͠• ݱ࣌Ͱʮ͏ʙΜʯͱࢥͬͨ͋Γɺ ·ͩ͜Ε͔Βͱ͍ͬͨҹ…
(1) CSS ͷ ΧελϜɾϓϩύςΟ
ͬͯͳʹ https://drafts.csswg.org/css-variables/
༁͢ͱCSS Custom Properties for Cascading VariablesܧঝͰ͖ΔมͷͨΊͷΧελϜ͢ΔϓϩύςΟ͏ΜɺΑ͘Θ͔ΒΜ
࣮ࡍͷίʔυγϯϓϧ• ϋΠϑϯ2͔ͭΒ࢝·Δ ϓϩύςΟͱΛɺ ࣗͰఆٛͰ͖Δ• ͦΕΛ var() Ͱར༻Ͱ͖Δ:root { --main-color: #06c; --accent-color: #006; } .foo { color: var(--main-color); }
Ϟμϯϒϥβ͢Ͱʹ࣮ࡁΈIE → × Edge → 15 ͔Β?http://caniuse.com/#search=custom%20properties
ͦΕͬͯ Sass ͷมͱͲ͏ҧ͏ͷʁ
CSSΒ͘͠ɺܧঝͰ͖Δ:root { --col: black; }.info { --col: blue; }#warn { --col: red; }p {color: var(--col);}blackbluered
CSSΒ͘͠ɺৄࡉ͕͋Δ:root { --col: black; }.info { --col: blue; }#warn { --col: red; }.safe {--col: green !important;}p {color: var(--col);}redgreen
• ΧελϜϓϩύςΟͷΛɺJS͔ΒࢀরɾઃఆͰ͖Δ • ΧελϜϓϩύςΟΛܦ༝͠ɺ1ߦͰҰؾʹݟͨΛม͑ΒΕΔ• αϯϓϧ http://codepen.io/pen/KavvvJJavaScript ͔ΒΛࢀরɾઃఆͰ͖Δvalue = getComputedStyle(elm).getPropertyValue('--foo');elm.style.setProperty('--bar', value);
Custom Properties for Cascading VariablesܧঝͰ͖ΔมͷͨΊͷ ࣗલϓϩύςΟ
ʙ ୈ1෦ ʙ ϞμϯϒϥβͳΒɺ͙͢ʹͰ͑Δ IEܥͲ͏͢Δ? → ୈ2෦ʹͭͮ͘
(2) PostCSS / cssnext
PostCSS• CSSΛม͢ΔͨΊͷ node.jsπʔϧ• ຊମػೳΛͨͣɺϓϥάΠϯͰ֦ு͍ͯ͘͠• ͪͳΈʹ Autoprefixer PostCSS ͷϓϥάΠϯ• ϓϥάΠϯΛࣗ࡞Ͱ͖ΔͳͲΧελϚΠζੑ͕ߴ͍ ΦϨΦϨڥʹͳΓ͍͢ݒ೦…?http://postcss.org/
cssnext• PostCSS ͷϓϥάΠϯू• W3C Ͱࡦఆ͕ਐΊΒΕ͍ͯΔ CSS ͷ৽͍͠ه๏Λɺ ઌऔΓͯ͑͠ΔΑ͏ʹͨ͠ͷ• JS Ͱ͍͏ babel (ES6 → ES5 ม) ͷΠϝʔδʹ͍ۙ?• קࠂલͷ༷Λઌߦ࣮͍ͯ͠ΔͷͰɺ༷มߋͷՄೳੑΔhttp://cssnext.io/Use tomorrow’s CSS syntax, today.
Πϝʔδfoo.cssPostCSSbar.csscssnextϞμϯͳจ๏ͷ CSS, ֦ுࢠ .css (ϒϥβରԠঢ়گʹ Αͬͯͦͷ··ಈ͘)PostCSS + cssnextϓϥάΠϯͰ τϥϯεύΠϧIEͳͲͰಈ͘CSSΛग़ྗ
PostCSS + cssnext ͰɺIEܥͰΧελϜɾϓϩύςΟ͕͑Δ?↓ࢼͯ͠Έͨ
ڥߏங (ΘΓͱ؆୯)• npm Ͱ postcss-cli ͱ postcss-cssnext ΛΠϯετʔϧ• ઃఆϑΝΠϧΛ 1ͭ༻ҙ (.json)• `postcss -wc ઃఆϑΝΠϧ໊` Ͱ watch & ੜ• ڥαϯϓϧ https://github.com/matsuoshi/cssnext-setup
ͯͬͱΓૣ͘ࢼ͢ͳΒ• codepen Ͱ PostCSS cssnext ରԠࡁΈɺ ϒϥβ্ͰࢼͤΔ• WebStorm / PhpStorm ରԠͯ͠ΔΆ͍? (ະݕূ)http://codepen.io/
PostCSS + cssnext ͰมΛࢼ͢:root {--main-color: black;}.foo {color: var(--main-color);}.foo {color: black;}→cssnext css
……ΉΉΉʁ:root { --main-color: black;} .bar {--main-color: red;} .foo, .bar { color: var(--main-color); }.bar {--main-color: red;}.foo, .bar {color: black;}→ࢼ͢cssnext css
ܧঝ͕Ͱ͖ͳ͍……!!!• cssnext ͷ੍ݶͰɺΧελϜɾϓϩύςΟ :root ʹ͔͠ॻ͚ͳ͍• ͭ·Γܧঝ͢ΔΑ͏ͳ͍ํͰ͖ͳ͍• ܧঝʹରԠͨ͠ϒϥβʹͱͬͯɺ cssnext Λ௨͢͜ͱͰɺ௨͢લͱ࣮ߦ݁Ռ͕มΘͬͯ͠·͏ (Ωπ͍)
ଞͷσϝϦοτ• τϥϯεύΠϧͯ͠ IEͰಈ͘Α͏ͳCSSʹ͍ͯ͠ΔͨΊɺ JavaScript ͔ΒΧελϜɾϓϩύςΟͷࢀরɾઃఆෆՄ• ΈΛߟ͑ΔͱɺܧঝJS͔Βͷૢ࡞ɺ ͓ͦΒ͘ cssnext ͷΈͰࠓޙରԠ͞Εͳ͍ͷͰ…… (JS ϙϦϑΟϧͰͷ࣮ݱՄೳੑ͋Δ?)
ʙ ୈ2෦ ʙ
ؾΛͱΓͳ͓ͯ͠ cssnext ͷφΠεͳ༷ͨͪΛ հ͠·͢!!!!!!!http://cssnext.io/features/
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ͷද֨
nestinga {color: red;& span {color: white;}@nest span & {color: blue;}}a {color: red}a span {color: white}span a {color: blue}→ωετɺඞͣ & Λ͚ͭͯॻ͘cssnext css
@apply:root {--danger-theme: {color: white;background-color: red;};}.danger {@apply --danger-theme;}.danger {color: white;background-color: red;}→mixinతͳɺͨͩ͠Ҿͳͦ͛͞
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;}ϝσΟΞΫΤϦΛָʹॻ͚Δ
custom selectors@custom-selector :--heading h1, h2, h3, h4, h5, h6;:--heading {font-weight: normal;}h1, h2, h3, h4, h5, h6 {font-weight: normal;}ෳηϨΫλΛ·ͱΊΔ
colora {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ͳͲͰΑ͋͘Δ৭ͷؔ
: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;}→ΧϯϚ۠ΓͰෳηϨΫλΛ
͜ΕΒݱࡏɺ W3C Ͱࡦఆதͷ༷
ϝϦοτɺকདྷతʹಈ͘CSSͰ͋Δ͜ͱ• cssnext ༻ʹ֮͑Δه๏ɺಠ༷ࣗͰͳ͘ ͜Ε͔Βͷ CSS ͷඪ४༷ʹͳ͍ͬͯ͘ (ͣ)• Sass / Stylus ͳͲͷಠࣗߏจ altCSS ͱͷҧ͍͜͜• ֮͑ͨ͜ͱ͕কདྷແବʹͳΒͳ͍͜ͱΛظ…!?
ݱ࣌Ͱͷ࣮༻ੑɺͲΜͳΜ͔• ΧελϜɾϓϩύςΟɺܧঝɺJS͔Βͷૢ࡞͕Ͱ͖ͳ͍• @apply Ҿͳ͠• ϑΝΠϧͷ @import ͕Ͱ͖ͳ͍• PostCSS ͷ postcss-import ϓϥάΠϯͰɺผ్ରԠՄೳ• ࡦఆதͷ༷͕มΘΔϦεΫ• ݱ࣌Ͱɺ͜ͷ͋ͨΓΛڐ༰Ͱ͖Δ͔Ͳ͏͔͕͔Ε
·ͱΊ
·ͱΊ• ΧελϜɾϓϩύςΟศརͦ͏ɺϞμϯϒϥβରԠࡁΈ• cssnext Λ͍·౿ΈࠐΜͰ͍͔֤ͬͯࣗ͘͝அΛ… ͱ͍͏ײͱɺকདྷੑେ͍ʹ• ৽͍͠ CSS ͔͜͜Βۙʹ͕͍͖ͬͯͦ͏ɺ ͞ΘͬͯΈΑ͏