2023 CSS - Speaker Deck

Slide 1

Slide 1 text

2023೥ʹ࢖͑ΔΑ͏ʹͳͬͨCSS ʙ৽͍͠Ξχϝʔγϣϯ΍ϨΠΞ΢τख๏ʙ

Slide 2

Slide 2 text

੢ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayﬁsher_zari @t.nishihara710 @crayﬁsher-zari.bsky.social

Slide 3

Slide 3 text

ීஈ͸͜ΜͳهࣄΛॻ͍͍ͯ·͢ ಠཱͨ͠CSS translateɾrotateɾscale ϓϩύςΟ͔ͩΒͰ͖Δɺ ๛͔ͳΞχϝʔγϣϯςΫχοΫʂ ҙ֎ͱԞਂ͍CSSͷfont-weightͷ࿩ https://ics.media/entry/230830/ https://ics.media/entry/230309/ NEW !

Slide 4

Slide 4 text

࠷ۙ࢖͑ΔΑ͏ʹͳͬͨCSS ɾίϯςφΫΤϦ ɾ:has() ٙࣅΫϥε ɾࡾ֯ؔ਺ ɾಠཱͨ͠ transform ϓϩύςΟ ɾεΫϩʔϧۦಈΞχϝʔγϣϯ ɾίϯςφΫΤϦ΍ has() Λ࢖ͬͨɺμογϡϘʔυը໘ ɾεΫϩʔϧۦಈΞχϝʔγϣϯΛ࢖ͬͨσʔλϏδϡΞϥΠθʔγϣϯ Ͱ͖ΔΑ͏ʹͳͬͨϨΠΞ΢τ΍৽͍͠දݱྫ

Slide 5

Slide 5 text

ίϯςφΫΤϦ

Slide 6

Slide 6 text

ίϯςφΫΤϦͱ͸ ...ʁ ਌ཁૉͷ෯ʹԠͨ͡ CSSͷग़͠෼͚͕Մೳ ϝσΟΞΫΤϦͷ਌ཁૉόʔδϣϯΈ͍ͨͳΠϝʔδ 2023೥2݄͔Β࢖༻Մೳ

Slide 7

Slide 7 text

ϝσΟΞΫΤϦ͕ܭଌ͢Δ෯ ίϯςφΫΤϦ͕ܭଌ͢Δ෯ ϝσΟΞΫΤϦͱͷҧ͍

Slide 8

Slide 8 text

ίϯςφΫΤϦͷϝϦοτ ஫ҙ఺ ίϯϙʔωϯτ୯ҐͷϨεϙϯγϒ͕΍Γ΍͘͢ͳΔ ਌ཁૉ͕ඞཁͳͷͰɺHTMLઃܭʹ޻෉͕ඞཁ

Slide 9

Slide 9 text

:has() ٙࣅΫϥε

Slide 10

Slide 10 text

:has() ٙࣅΫϥεͱ͸ ...ʁ ಛఆͷࢠཁૉΛ΋ͬͨ ηϨΫλʔ͕Մೳ ࢠཁૉʹԠͨ͡ηϨΫλʔ͸ըظత FirefoxҎ֎Ͱ࢖༻Մೳ

Slide 11

Slide 11 text

:has() ٙࣅΫϥεͷϝϦοτ ࢠཁૉͷঢ়ଶʹԠͨ͡਌ཁૉͷελΠϧมߋ͕Մೳ ˠಈతͳঢ়ଶมߋʹରͯ͠ॊೈʹରԠͰ͖Δ ʂ

Slide 12

Slide 12 text

ࡾ֯ؔ਺

Slide 13

Slide 13 text

CSSͷࡾ֯ؔ਺ͱ͸ ...ʁ ࡾ֯ؔ਺Λ͔ͭͬͨ ஋ͷࢦఆ͕Մೳ 2023೥3݄͔Β࢖༻Մೳ ΈΜͳͷτϥ΢Ϛ sin, cos, tan asin, acos, atan ͕࢖༻Մೳ

Slide 14

Slide 14 text

ࡾ֯ؔ਺͸ԁʹؔ͢Δ࠲ඪ͕ಘҙ transform: translate( calc(cos(30deg) * var(--r)), calc(sin(0deg) * var(--r)) ); 30deg r cos(30deg) ʷ r sin(30deg) ʷ r x = y ΢Σϒͷ৔߹ɺԼ޲͖͕ y ࠲ඪͷਖ਼ํ޲ʹͳΔͷͰ ਺ֶͱҧ͏ͷͰগ͠஫ҙ

Slide 15

Slide 15 text

CSSࡾ֯ؔ਺ͷϝϦοτ ֯౓Λར༻ͨ͠ࢦఆ͕ՄೳʹͳΔ ԁܗͷϨΠΞ΢τ͕΍Γ΍͘͢ͳΔ ༨ஊ ؒ઀తʹ˽ 2 ΍КͷΑ͏ͳ਺ΛCSSͰѻ͑ΔΑ͏ʹͳͬͨ ˠCSSม਺ʹԫۚൺ΍നۜൺͷΑ͏ͳ஋Λࢉग़Ͱ͖Δ

Slide 16

Slide 16 text

ಠཱͨ͠transformϓϩύςΟ

Slide 17

Slide 17 text

ಠཱͨ͠transformϓϩύςΟͱ͸ ...ʁ translate, rotate, scale ͕ ಠཱͨ͠ϓϩύςΟͱͯ͠࢖༻Մೳ skew() ͸ಠཱͤͣ 2022 ೥8݄͔Β࢖༻Մೳ

Slide 18

Slide 18 text

ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ transform: translate transform: rotate ैདྷ͸2ͭཁૉ͕ඞཁ

Slide 19

Slide 19 text

ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ translate rotate ͜Ε͔Β͸1ͭཁૉͰՄೳ

Slide 20

Slide 20 text

ಠཱͨ͠transformϓϩύςΟͷϝϦοτ ෳࡶͳΞχϝʔγϣϯ΋هड़͠΍͘͢ͳΓɺ Πʔδϯάͷௐ੔΋ಠཱͯ͠ௐ੔Ͱ͖Δ

Slide 21

Slide 21 text

εΫϩʔϧۦಈΞχϝʔγϣϯ

Slide 22

Slide 22 text

εΫϩʔϧۦಈΞχϝʔγϣϯͱ͸ ...ʁ εΫϩʔϧྔʹԠͨ͡ ஈ֊తͳΞχϝʔγϣϯ͕Մೳ ࠓ·ͰJavaScript ͕ඞཁͩͬͨΑ͏ͳදݱ΋Ͱ͖Δʂ ChromeɺEdgeͷΈ࢖༻Մೳ

Slide 23

Slide 23 text

εΫϩʔϧۦಈΞχϝʔγϣϯͷϝϦοτ ύϥϥοΫεͷΑ͏ͳදݱ΋CSSͷΈͰՄೳ ޻෉࣍ୈͰ͍Ζ͍Ζͳදݱ͕Ͱ͖Δ ஫ҙ఺ ಛఆ஍఺·Ͱ͖ͨΒΞχϝʔγϣϯΛ࣮ߦ͢ΔΑ͏ͳ ൃՐܕͷ΋ͷ͸Ͱ͖ͳ͍

Slide 24

Slide 24 text

࣮૷ྫ

Slide 25

Slide 25 text

ίϯςφΫΤϦͱ :has() ٙࣅΫϥε https://ics-creative.github.io/pwa_night_vol55/container_query/

Slide 26

Slide 26 text

ࡾ֯ؔ਺ͱಠཱͨ͠ transformϓϩύςΟ https://ics-creative.github.io/pwa_night_vol55/container_query/

Slide 27

Slide 27 text

εΫϩʔϧۦಈΞχϝʔγϣϯ https://ics-creative.github.io/pwa_night_vol55/scroll_driven/

Slide 28

Slide 28 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ICS Ͱ͸ϑϩϯτΤϯυΤϯδχΞΛืूத https://ics-web.jp/recruit/

Slide 29

Slide 29 text

ࢀߟจݙ CSS͚ͩͰεΫϩʔϧΞχϝʔγϣϯ͕࡞ΕΔʂ ʁ ৽ٕज़ Scroll-driven Animations ͱ͸ https://ics.media/entry/230718/ ಠཱͨ͠CSS translateɾrotateɾscaleϓϩύςΟ͔ͩΒͰ͖Δɺ๛͔ͳΞχϝʔγϣϯςΫχοΫʂ https://ics.media/entry/230309/ CSSͷࡾ֯ؔ਺Λཧղ͠Α͏ ʂ sin()ͱcos() ͰͰ͖Δදݱ https://ics.media/entry/230126/