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

Slide 1

Slide 1 text

CSS Variable Λ΋ͬͱ׆༻͢Δ 2023/02/03 Kyoto.js 18 @spring-raining

Slide 2

Slide 2 text

ࣗݾ঺հ • HN: @spring-raining / ͸Δ͞Ί • ؔ੢ग़਎ 2019೥ब৬ͯ͠౦ژ΁ 2022೥໊ݹ԰ʹҾӽ͠

Slide 3

Slide 3 text

Kyoto.js͕ ։࠵͞Εͳ͔ͬͨ3೥ؒ ͍Ζ͍Ζͳ͜ͱ͕͋ͬͨ

Slide 4

Slide 4 text

ϑϩϯτΤϯυͷਐԽ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Ͱ͸CSSͷਐԽ͸ʁ

Slide 7

Slide 7 text

ɹɹɹɹɹɹɹͷొ৔ͰมΘͬͨʁ • Tailwind CSS͕ීٴͨ͜͠ͱͰɺ͔֬ʹCSSʹରͯ͜͠Ε·Ͱͱ͸ҟ ͳΔߟ͑ํ͕Ͱ͖ͨ (utility- fi rst) • ͨͩɺCSSࣗମ͕มΘͬͨΘ͚Ͱ͸ͳ͍ • CSSࣗମͷมԽͱ͍͑͹ʁ

Slide 8

Slide 8 text

CSS Variable

Slide 9

Slide 9 text

CSS VariableͷՄೳੑ • ීஈCSS Variable͸ͲͷΑ͏ʹ࢖͍ͬͯ·͔͢ʁ • ͋Γ͕ͪͳ࢖͍ํˠ • ࢲ͸·ͩ·ͩCSS Variable͸े෼׆༻͞Ε͍ͯͳ͍Α͏ʹࢥ͍·͢

Slide 10

Slide 10 text

࠷େͷಛ௃ CSS Variable͸ ಺༰Λಈతʹม͑ΒΕΔ

Slide 11

Slide 11 text

׆༻ྫΛ2ͭ঺հ

Slide 12

Slide 12 text

׆༻ྫ1 Pointer eventͱͷ࿈ܞ

Slide 13

Slide 13 text

Pokémon Cards Holographic e ff ect in CSS • https://poke-holo.simey.me/ • Breakdown: https://www.joshdance.com/100/day50/ • Pure CSSͰτϨʔσΟϯάΧʔυͷϗϩάϥϜΛදݱ͍ͯ͠Δ

Slide 14

Slide 14 text

ϗϩάϥϜͷ࢓૊Έ • Ұ௨Γ༡ΜͰ΋Βͬͨͱ͜ΖͰ… • ҰମͲͷΑ͏ʹ੍ޚ͍ͯ͠Δͷ͔ʁ

Slide 15

Slide 15 text

มΘ͍ͬͯΔͷ͸ ͜ͷ෦෼͚ͩ

Slide 16

Slide 16 text

ͬ͘͟Γͱͨ͠ॲཧͷྲྀΕ pointermove event Svelte/motion ͷ SpringετΞʹΑΔ Πʔδϯά --pointer-x/y --rotate-x/y --translate-x/y ϗϩάϥϜͷݟͨ໨ Λ੍ޚ͢ΔελΠϧ ΧʔυͷҐஔɾճస Λ੍ޚ͢ΔελΠϧ

Slide 17

Slide 17 text

ͬ͘͟Γͱͨ͠ॲཧͷྲྀΕ pointermove event Svelte/motion ͷ SpringετΞʹΑΔ Πʔδϯά --pointer-x/y --rotate-x/y --translate-x/y ϗϩάϥϜͷݟͨ໨ Λ੍ޚ͢ΔελΠϧ ΧʔυͷҐஔɾճస Λ੍ޚ͢ΔελΠϧ JS CSS

Slide 18

Slide 18 text

ैདྷͷCSS-in-JSͷߟ͑ํ pointermove event Svelte/motion ͷ SpringετΞʹΑΔ Πʔδϯά ϗϩάϥϜͷݟͨ໨ Λ੍ޚ͢ΔελΠϧ ΧʔυͷҐஔɾճస Λ੍ޚ͢ΔελΠϧ JavaScriptΛ࢖ͬͯ ৭ʑ͕Μ͹Δ CSSΛఘΊͯ   WebGLͰ࣮૷

Slide 19

Slide 19 text

ैདྷͷCSS-in-JSͷߟ͑ํ pointermove event Svelte/motion ͷ SpringετΞʹΑΔ Πʔδϯά ϗϩάϥϜͷݟͨ໨ Λ੍ޚ͢ΔελΠϧ ΧʔυͷҐஔɾճస Λ੍ޚ͢ΔελΠϧ JavaScriptΛ࢖ͬͯ ৭ʑ͕Μ͹Δ CSSΛఘΊͯ   WebGLͰ࣮૷ JS CSS

Slide 20

Slide 20 text

JS/CSSؒͷڥքͱͯ͠ͷCSS Variable • CSS Variableͷ಺༰ΛखͰॻ͘ʮఆ਺ʯͱͯ͠ͷ࢖͍ํ͸ɺͦΕ͸ͦ ΕͰϝϦοτ͕͋Δ͚ͲͦΕ͚ͩͰ͸ͳ͍ • JSͷ೚ҙͷ৘ใΛCSSͷੈքʹ࣋ͪࠐΉʮม਺ʯͱͯ͠ͷ໾ׂ • ͔͠΋ɺCSS Variable͸஋Λม͑Δͱଈ࠲ʹ൓ө͞ΕΔϦΞΫςΟ ϒͳม਺

Slide 21

Slide 21 text

JSͷ஋ΛCSSʹ࣋ͪࠐΉϝϦοτ • σόοά͕༰қʹͳΔ • CSS͸εςʔτϨε; ஋Λม͑Ε͹೚ҙͷঢ়ଶΛ࠶ݱͰ͖Δ • खܰʹύϑΥʔϚϯεͷྑ͍Ξχϝʔγϣϯ͕࣮૷Ͱ͖Δ • CSSࣗମ͸ݶΒΕͨؔ਺͚ͩΛ࢖͏ͷͰɺύϑΥʔϚϯεʹ͍ͭͯ ߟྀ͢Δ͜ͱ͕গͳ͍

Slide 22

Slide 22 text

Ͳͷ৘ใΛCSSʹ࣋ͪࠐΉ͔ʁ • ʮcalc()ͰܭࢉͰ͖Δ͔Ͳ͏͔ʯ͕Ұͭͷ໨҆ • ࡾ֯ؔ਺ (sin(), atan2()) ͳͲͷ௥ՃʹΑΓɺܭࢉͰ͖Δ஋͸૿͑ͯ ͍Δ

Slide 23

Slide 23 text

׆༻ྫ2 ύϥϥοΫεεΫϩʔϧ

Slide 24

Slide 24 text

ύϥϥοΫεεΫϩʔϧ • ͜͜Ͱݴ͏ύϥϥοΫεεΫϩʔϧͱ͸ɺεΫϩʔϧͨ͠େ͖͞ʹԠ ͯ͡ཁૉ͕มܗ͢Δԋग़ͷ͜ͱ • https://www.apple.com/jp/iphone-14-pro/ తͳ • εΫϩʔϧҐஔΛͦͷ··CSSʹ࣋ͪࠐΊ͹ྑ͍ͷͰ͸ʁ

Slide 25

Slide 25 text

εΫϩʔϧҐஔ͚ͩΛCSSʹ࣋ͪࠐΉ • ୯७ʹεΫϩʔϧҐஔ͕มΘͬͨΒCSS VariableΛॻ͖׵͑ΔJS const cb = () => { document.body.style.setProperty('--scroll-position', window.scrollY); }; document.addEventListener('scroll', () => { requestAnimationFrame(cb); });

Slide 26

Slide 26 text

σϞ https://codepen.io/spring-raining/ pen/PoBxmNG

Slide 27

Slide 27 text

CSS VariableΛ࢖ͬͨ ελΠϧͷকདྷ

Slide 28

Slide 28 text

CSS Painting API • CSS Houdiniͱݺ͹ΕΔAPIͷҰͭ • JSͰ࣮૷ͨ͠Paint workoutͱݺ͹ΕΔඳըϓϩάϥϜΛCSS͔Βར༻ ͢ΔͨΊͷAPI

Slide 29

Slide 29 text

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; }

Slide 30

Slide 30 text

ͭ·ΓͲ͏͍͏͜ͱʁ DOM Events ϦονͳCSSදݱ JavaScriptͰ ࠷௿ݶͷ࣮૷ Paint WorkletͰ   ΑΓߴ౓ͳඳը CSS Variables paint()

Slide 31

Slide 31 text

ͭ·ΓͲ͏͍͏͜ͱʁ DOM Events ϦονͳCSSදݱ JavaScriptͰ ࠷௿ݶͷ࣮૷ Paint WorkletͰ   ΑΓߴ౓ͳඳը CSS Variables paint() JS CSS JS

Slide 32

Slide 32 text

·ͱΊ • Pure CSSͷදݱྗ͸࣮֬ʹ্͕͍ͬͯΔ • CSS Variable͸JSͱCSSΛͭͳ͙ڮ౉͠ • CSSݏ͍ͳਓ΋Ͱ͖Ε͹৮ͬͯ΄͍͠ ָ͍͠Αʂ

Slide 33

Slide 33 text

Appendix ະདྷͷCSS ͜͏ͳ͍ͬͯͯ΄͍͠

Slide 34

Slide 34 text

ཁ๬1: @keyframes ΁ͷϚοϐϯά • CSS Animation͸جຊతʹ࣌ؒ (duration) Ͱ੍ޚ͢Δ࢓૊Έ • Web Animations API΋ pause() ΍ reverse() ఔ౓͔͠ͳ͍ • Ξχϝʔγϣϯͷ࣌ؒͷਐߦΛCSS VariableͰ੍ޚͰ͖ΔͱҰؾʹ׆ ༻ൣғ͕޿͕Γͦ͏

Slide 35

Slide 35 text

ཁ๬2: CSS Variableͷ஋ʹ΋ͱͮ͘৚݅෼ذ • ৚݅ʹԠͯ͡ϓϩύςΟΛग़͠෼͚ΔΠϝʔδ • display: if-else(var(--condition), block, none); • ৭ʑࢼ͚ͨ͠Ͳࢥ͍͔ͭͳ͔ͬͨ… • ͍͍Ҋ͕͋Ε͹ڭ͍͑ͯͩ͘͞