2023 CSS

2023年に使えるようになったCSSでレイアウトや表現について紹介します。

Transcript

1. 2023೥ʹ࢖͑ΔΑ͏ʹͳͬͨCSS ʙ৽͍͠Ξχϝʔγϣϯ΍ϨΠΞ΢τख๏ʙ
2. ੢ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari @t.nishihara710 @crayfisher-zari.bsky.social
3. ීஈ͸͜ΜͳهࣄΛॻ͍͍ͯ·͢ ಠཱͨ͠CSS translateɾrotateɾscale ϓϩύςΟ͔ͩΒͰ͖Δɺ ๛͔ͳΞχϝʔγϣϯςΫχοΫʂ ҙ֎ͱԞਂ͍CSSͷfont-weightͷ࿩ https://ics.media/entry/230830/ https://ics.media/entry/230309/ NEW !
4. ࠷ۙ࢖͑ΔΑ͏ʹͳͬͨCSS ɾίϯςφΫΤϦ ɾ:has() ٙࣅΫϥε ɾࡾ֯ؔ਺ ɾಠཱͨ͠ transform ϓϩύςΟ ɾεΫϩʔϧۦಈΞχϝʔγϣϯ ɾίϯςφΫΤϦ΍ has() Λ࢖ͬͨɺμογϡϘʔυը໘ ɾεΫϩʔϧۦಈΞχϝʔγϣϯΛ࢖ͬͨσʔλϏδϡΞϥΠθʔγϣϯ Ͱ͖ΔΑ͏ʹͳͬͨϨΠΞ΢τ΍৽͍͠දݱྫ
5. ίϯςφΫΤϦ
6. ίϯςφΫΤϦͱ͸ ...ʁ ਌ཁૉͷ෯ʹԠͨ͡ CSSͷग़͠෼͚͕Մೳ ϝσΟΞΫΤϦͷ਌ཁૉόʔδϣϯΈ͍ͨͳΠϝʔδ 2023೥2݄͔Β࢖༻Մೳ
7. ϝσΟΞΫΤϦ͕ܭଌ͢Δ෯ ίϯςφΫΤϦ͕ܭଌ͢Δ෯ ϝσΟΞΫΤϦͱͷҧ͍
8. ίϯςφΫΤϦͷϝϦοτ ஫ҙ఺ ίϯϙʔωϯτ୯ҐͷϨεϙϯγϒ͕΍Γ΍͘͢ͳΔ ਌ཁૉ͕ඞཁͳͷͰɺHTMLઃܭʹ޻෉͕ඞཁ
9. :has() ٙࣅΫϥε
10. :has() ٙࣅΫϥεͱ͸ ...ʁ ಛఆͷࢠཁૉΛ΋ͬͨ ηϨΫλʔ͕Մೳ ࢠཁૉʹԠͨ͡ηϨΫλʔ͸ըظత FirefoxҎ֎Ͱ࢖༻Մೳ
11. :has() ٙࣅΫϥεͷϝϦοτ ࢠཁૉͷঢ়ଶʹԠͨ͡਌ཁૉͷελΠϧมߋ͕Մೳ ˠಈతͳঢ়ଶมߋʹରͯ͠ॊೈʹରԠͰ͖Δ ʂ
12. ࡾ֯ؔ਺
13. CSSͷࡾ֯ؔ਺ͱ͸ ...ʁ ࡾ֯ؔ਺Λ͔ͭͬͨ ஋ͷࢦఆ͕Մೳ 2023೥3݄͔Β࢖༻Մೳ ΈΜͳͷτϥ΢Ϛ sin, cos, tan asin, acos, atan ͕࢖༻Մೳ
14. ࡾ֯ؔ਺͸ԁʹؔ͢Δ࠲ඪ͕ಘҙ transform: translate( calc(cos(30deg) * var(--r)), calc(sin(0deg) * var(--r)) ); 30deg r cos(30deg) ʷ r sin(30deg) ʷ r x = y ΢Σϒͷ৔߹ɺԼ޲͖͕ y ࠲ඪͷਖ਼ํ޲ʹͳΔͷͰ ਺ֶͱҧ͏ͷͰগ͠஫ҙ
15. CSSࡾ֯ؔ਺ͷϝϦοτ ֯౓Λར༻ͨ͠ࢦఆ͕ՄೳʹͳΔ ԁܗͷϨΠΞ΢τ͕΍Γ΍͘͢ͳΔ ༨ஊ ؒ઀తʹ˽ 2 ΍КͷΑ͏ͳ਺ΛCSSͰѻ͑ΔΑ͏ʹͳͬͨ ˠCSSม਺ʹԫۚൺ΍നۜൺͷΑ͏ͳ஋Λࢉग़Ͱ͖Δ
16. ಠཱͨ͠transformϓϩύςΟ
17. ಠཱͨ͠transformϓϩύςΟͱ͸ ...ʁ translate, rotate, scale ͕ ಠཱͨ͠ϓϩύςΟͱͯ͠࢖༻Մೳ skew() ͸ಠཱͤͣ 2022 ೥8݄͔Β࢖༻Մೳ
18. ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ transform: translate transform: rotate ैདྷ͸2ͭཁૉ͕ඞཁ
19. ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ translate rotate ͜Ε͔Β͸1ͭཁૉͰՄೳ
20. ಠཱͨ͠transformϓϩύςΟͷϝϦοτ ෳࡶͳΞχϝʔγϣϯ΋هड़͠΍͘͢ͳΓɺ Πʔδϯάͷௐ੔΋ಠཱͯ͠ௐ੔Ͱ͖Δ
21. εΫϩʔϧۦಈΞχϝʔγϣϯ
22. εΫϩʔϧۦಈΞχϝʔγϣϯͱ͸ ...ʁ εΫϩʔϧྔʹԠͨ͡ ஈ֊తͳΞχϝʔγϣϯ͕Մೳ ࠓ·ͰJavaScript ͕ඞཁͩͬͨΑ͏ͳදݱ΋Ͱ͖Δʂ ChromeɺEdgeͷΈ࢖༻Մೳ
23. εΫϩʔϧۦಈΞχϝʔγϣϯͷϝϦοτ ύϥϥοΫεͷΑ͏ͳදݱ΋CSSͷΈͰՄೳ ޻෉࣍ୈͰ͍Ζ͍Ζͳදݱ͕Ͱ͖Δ ஫ҙ఺ ಛఆ஍఺·Ͱ͖ͨΒΞχϝʔγϣϯΛ࣮ߦ͢ΔΑ͏ͳ ൃՐܕͷ΋ͷ͸Ͱ͖ͳ͍
24. ࣮૷ྫ
25. ίϯςφΫΤϦͱ :has() ٙࣅΫϥε https://ics-creative.github.io/pwa_night_vol55/container_query/
26. ࡾ֯ؔ਺ͱಠཱͨ͠ transformϓϩύςΟ https://ics-creative.github.io/pwa_night_vol55/container_query/
27. εΫϩʔϧۦಈΞχϝʔγϣϯ https://ics-creative.github.io/pwa_night_vol55/scroll_driven/
28. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ICS Ͱ͸ϑϩϯτΤϯυΤϯδχΞΛืूத https://ics-web.jp/recruit/
29. ࢀߟจݙ 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/