CSS Variable をもっと活用する / Kyoto.js 18

Presentation at Kyoto.js 18, Feb. 3, 2023

* Pokémon Cards Holographic effect in CSS
- https://poke-holo.simey.me/
- Breakdown: https://www.joshdance.com/100/day50/
* デモ
- https://codepen.io/spring-raining/pen/PoBxmNG

Transcript

1. CSS Variable Λ΋ͬͱ׆༻͢Δ 2023/02/03 Kyoto.js 18 @spring-raining
2. ࣗݾ঺հ • HN: @spring-raining / ͸Δ͞Ί • ؔ੢ग़਎ 2019೥ब৬ͯ͠౦ژ΁ 2022೥໊ݹ԰ʹҾӽ͠
3. Kyoto.js͕ ։࠵͞Εͳ͔ͬͨ3೥ؒ ͍Ζ͍Ζͳ͜ͱ͕͋ͬͨ
4. ϑϩϯτΤϯυͷਐԽ
6. Ͱ͸CSSͷਐԽ͸ʁ
7. ɹɹɹɹɹɹɹͷొ৔ͰมΘͬͨʁ • Tailwind CSS͕ීٴͨ͜͠ͱͰɺ͔֬ʹCSSʹରͯ͜͠Ε·Ͱͱ͸ҟ ͳΔߟ͑ํ͕Ͱ͖ͨ (utility- fi rst) • ͨͩɺCSSࣗମ͕มΘͬͨΘ͚Ͱ͸ͳ͍ • CSSࣗମͷมԽͱ͍͑͹ʁ
8. CSS Variable
9. CSS VariableͷՄೳੑ • ීஈCSS Variable͸ͲͷΑ͏ʹ࢖͍ͬͯ·͔͢ʁ • ͋Γ͕ͪͳ࢖͍ํˠ • ࢲ͸·ͩ·ͩCSS Variable͸े෼׆༻͞Ε͍ͯͳ͍Α͏ʹࢥ͍·͢
10. ࠷େͷಛ௃ CSS Variable͸ ಺༰Λಈతʹม͑ΒΕΔ
11. ׆༻ྫΛ2ͭ঺հ
12. ׆༻ྫ1 Pointer eventͱͷ࿈ܞ
13. Pokémon Cards Holographic e ff ect in CSS • https://poke-holo.simey.me/ • Breakdown: https://www.joshdance.com/100/day50/ • Pure CSSͰτϨʔσΟϯάΧʔυͷϗϩάϥϜΛදݱ͍ͯ͠Δ
14. ϗϩάϥϜͷ࢓૊Έ • Ұ௨Γ༡ΜͰ΋Βͬͨͱ͜ΖͰ… • ҰମͲͷΑ͏ʹ੍ޚ͍ͯ͠Δͷ͔ʁ
15. มΘ͍ͬͯΔͷ͸ ͜ͷ෦෼͚ͩ
16. ͬ͘͟Γͱͨ͠ॲཧͷྲྀΕ pointermove event Svelte/motion ͷ SpringετΞʹΑΔ Πʔδϯά --pointer-x/y --rotate-x/y --translate-x/y ϗϩάϥϜͷݟͨ໨ Λ੍ޚ͢ΔελΠϧ ΧʔυͷҐஔɾճస Λ੍ޚ͢ΔελΠϧ
17. ͬ͘͟Γͱͨ͠ॲཧͷྲྀΕ pointermove event Svelte/motion ͷ SpringετΞʹΑΔ Πʔδϯά --pointer-x/y --rotate-x/y --translate-x/y ϗϩάϥϜͷݟͨ໨ Λ੍ޚ͢ΔελΠϧ ΧʔυͷҐஔɾճస Λ੍ޚ͢ΔελΠϧ JS CSS
18. ैདྷͷCSS-in-JSͷߟ͑ํ pointermove event Svelte/motion ͷ SpringετΞʹΑΔ Πʔδϯά ϗϩάϥϜͷݟͨ໨ Λ੍ޚ͢ΔελΠϧ ΧʔυͷҐஔɾճస Λ੍ޚ͢ΔελΠϧ JavaScriptΛ࢖ͬͯ ৭ʑ͕Μ͹Δ CSSΛఘΊͯ 
 WebGLͰ࣮૷
19. ैདྷͷCSS-in-JSͷߟ͑ํ pointermove event Svelte/motion ͷ SpringετΞʹΑΔ Πʔδϯά ϗϩάϥϜͷݟͨ໨ Λ੍ޚ͢ΔελΠϧ ΧʔυͷҐஔɾճస Λ੍ޚ͢ΔελΠϧ JavaScriptΛ࢖ͬͯ ৭ʑ͕Μ͹Δ CSSΛఘΊͯ 
 WebGLͰ࣮૷ JS CSS
20. JS/CSSؒͷڥքͱͯ͠ͷCSS Variable • CSS Variableͷ಺༰ΛखͰॻ͘ʮఆ਺ʯͱͯ͠ͷ࢖͍ํ͸ɺͦΕ͸ͦ ΕͰϝϦοτ͕͋Δ͚ͲͦΕ͚ͩͰ͸ͳ͍ • JSͷ೚ҙͷ৘ใΛCSSͷੈքʹ࣋ͪࠐΉʮม਺ʯͱͯ͠ͷ໾ׂ • ͔͠΋ɺCSS Variable͸஋Λม͑Δͱଈ࠲ʹ൓ө͞ΕΔϦΞΫςΟ ϒͳม਺
21. JSͷ஋ΛCSSʹ࣋ͪࠐΉϝϦοτ • σόοά͕༰қʹͳΔ • CSS͸εςʔτϨε; ஋Λม͑Ε͹೚ҙͷঢ়ଶΛ࠶ݱͰ͖Δ • खܰʹύϑΥʔϚϯεͷྑ͍Ξχϝʔγϣϯ͕࣮૷Ͱ͖Δ • CSSࣗମ͸ݶΒΕͨؔ਺͚ͩΛ࢖͏ͷͰɺύϑΥʔϚϯεʹ͍ͭͯ ߟྀ͢Δ͜ͱ͕গͳ͍
22. Ͳͷ৘ใΛCSSʹ࣋ͪࠐΉ͔ʁ • ʮcalc()ͰܭࢉͰ͖Δ͔Ͳ͏͔ʯ͕Ұͭͷ໨҆ • ࡾ֯ؔ਺ (sin(), atan2()) ͳͲͷ௥ՃʹΑΓɺܭࢉͰ͖Δ஋͸૿͑ͯ ͍Δ
23. ׆༻ྫ2 ύϥϥοΫεεΫϩʔϧ
24. ύϥϥοΫεεΫϩʔϧ • ͜͜Ͱݴ͏ύϥϥοΫεεΫϩʔϧͱ͸ɺεΫϩʔϧͨ͠େ͖͞ʹԠ ͯ͡ཁૉ͕มܗ͢Δԋग़ͷ͜ͱ • https://www.apple.com/jp/iphone-14-pro/ తͳ • εΫϩʔϧҐஔΛͦͷ··CSSʹ࣋ͪࠐΊ͹ྑ͍ͷͰ͸ʁ
25. εΫϩʔϧҐஔ͚ͩΛCSSʹ࣋ͪࠐΉ • ୯७ʹεΫϩʔϧҐஔ͕มΘͬͨΒCSS VariableΛॻ͖׵͑ΔJS const cb = () => { document.body.style.setProperty('--scroll-position', window.scrollY); }; document.addEventListener('scroll', () => { requestAnimationFrame(cb); });
26. σϞ https://codepen.io/spring-raining/ pen/PoBxmNG
27. CSS VariableΛ࢖ͬͨ ελΠϧͷকདྷ
28. CSS Painting API • CSS Houdiniͱݺ͹ΕΔAPIͷҰͭ • JSͰ࣮૷ͨ͠Paint workoutͱݺ͹ΕΔඳըϓϩάϥϜΛCSS͔Βར༻ ͢ΔͨΊͷAPI
29. CSS Painting API registerPaint( 'boxbg', class { static get contextOptions() { return { alpha: true }; } static get inputProperties() { return ['--boxColor']; } paint(ctx, size, props) { ctx.fillStyle = props.get('--boxColor'); ctx.fillRect(0, 0, size.width, size.height); } } ); li { background-image: paint(boxbg); --boxColor: blue; }
30. ͭ·ΓͲ͏͍͏͜ͱʁ DOM Events ϦονͳCSSදݱ JavaScriptͰ ࠷௿ݶͷ࣮૷ Paint WorkletͰ 
 ΑΓߴ౓ͳඳը CSS Variables paint()
31. ͭ·ΓͲ͏͍͏͜ͱʁ DOM Events ϦονͳCSSදݱ JavaScriptͰ ࠷௿ݶͷ࣮૷ Paint WorkletͰ 
 ΑΓߴ౓ͳඳը CSS Variables paint() JS CSS JS
32. ·ͱΊ • Pure CSSͷදݱྗ͸࣮֬ʹ্͕͍ͬͯΔ • CSS Variable͸JSͱCSSΛͭͳ͙ڮ౉͠ • CSSݏ͍ͳਓ΋Ͱ͖Ε͹৮ͬͯ΄͍͠ ָ͍͠Αʂ
33. Appendix ະདྷͷCSS ͜͏ͳ͍ͬͯͯ΄͍͠
34. ཁ๬1: @keyframes ΁ͷϚοϐϯά • CSS Animation͸جຊతʹ࣌ؒ (duration) Ͱ੍ޚ͢Δ࢓૊Έ • Web Animations API΋ pause() ΍ reverse() ఔ౓͔͠ͳ͍ • Ξχϝʔγϣϯͷ࣌ؒͷਐߦΛCSS VariableͰ੍ޚͰ͖ΔͱҰؾʹ׆ ༻ൣғ͕޿͕Γͦ͏
35. ཁ๬2: CSS Variableͷ஋ʹ΋ͱͮ͘৚݅෼ذ • ৚݅ʹԠͯ͡ϓϩύςΟΛग़͠෼͚ΔΠϝʔδ • display: if-else(var(--condition), block, none); • ৭ʑࢼ͚ͨ͠Ͳࢥ͍͔ͭͳ͔ͬͨ… • ͍͍Ҋ͕͋Ε͹ڭ͍͑ͯͩ͘͞