Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
カスタム・プロパティと cssnext #csstalk
Search
matsuo
January 28, 2017
Programming
2
2.2k
カスタム・プロパティと cssnext #csstalk
CSS Talk Vol.2 発表資料です (2017.01.28 @ TAM)
https://taminc.doorkeeper.jp/events/54947
matsuo
January 28, 2017
Tweet
Share
More Decks by matsuo
See All by matsuo
「偏愛マップ」ワークショップ導入 / eccentric love map
matsuoshi
0
1.4k
Backlogの運用ルールをチームみんなで決めた話 / JBUG Osaka 2
matsuoshi
2
1.2k
Speaker Deck のURLをなんとかする / speakerdeck's url
matsuoshi
3
1k
モブプログラミングやってみた (PHPカンファレンス関西2018懇親会LT) #phpkansai / mobmob
matsuoshi
0
1.9k
俺とTrelloと終わらんタスク (DevLOVE関西 "個人のタスクマネジメント"のコツや悩みを話す場 資料) #devkan
matsuoshi
7
8k
「みんなではじめるデザイン批評」 DevLOVE関西 ビブリオバトル
matsuoshi
0
150
Yeoman で Gulp環境をさらっと作る / gulp+yeoman
matsuoshi
1
59
Other Decks in Programming
See All in Programming
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
オートマトン学習しろ / Do automata learning
makenowjust
3
130
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
490
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
660
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
800
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
180
Why Prism?
kddnewton
4
1.7k
マルチモジュールにおけるテスト最適化
fxwx23
0
210
Rubyのobject_id
qnighy
6
1.3k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
26
3.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
4 Signs Your Business is Dying
shpigford
179
21k
How to name files
jennybc
75
98k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
The Mythical Team-Month
searls
218
43k
Clear Off the Table
cherdarchuk
91
320k
Documentation Writing (for coders)
carmenintech
65
4.3k
Docker and Python
trallard
39
3k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Transcript
ΧελϜɾϓϩύςΟͱ cssnext CSS Talk vol.2 2017.01.28 matsuo @ TAM
ࣗݾհ • দඌߒࢤ • 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); } <p> black </p> <p class="info"> blue </p> <p id="warn"> red </p>
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>
• ΧελϜϓϩύςΟͷΛɺJS͔ΒࢀরɾઃఆͰ͖Δ • ΧελϜϓϩύςΟΛܦ༝͠ɺ1ߦͰҰؾʹݟͨΛม͑ΒΕΔ • αϯϓϧ http://codepen.io/pen/KavvvJ JavaScript
͔ΒΛࢀরɾઃఆͰ͖Δ 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.css PostCSS bar.css cssnext Ϟμϯͳจ๏ͷ 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ͷද֨
nesting a { 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; } ෳηϨΫλΛ·ͱΊΔ
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ͳͲͰΑ͋͘Δ৭ͷؔ
: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
͔͜͜Βۙʹ͕͍͖ͬͯͦ͏ɺ ͞ΘͬͯΈΑ͏