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