全ブラウザ対応したcontainer queryは何がスゴイのか？

全ブラウザ対応になったCSSのコンテナクエリについて、基礎から一歩踏み込んだ内容までを解説します。

デモ①
SNSリアクションバー（container-type, @container）
https://codepen.io/tonkotsuboy/pen/PoBMMZw

デモ②
古都めぐり（cqw）
https://codepen.io/tonkotsuboy/pen/jOvOqOG

Zenn記事
https://zenn.dev/moneyforward/articles/css-container-query

Twitter
https://twitter.com/tonkotsuboy_com

3/1（水）に「TechFeed Experts Night#14 」で発表した内容です。
https://techfeed.io/events/techfeed-experts-night-14

Transcript

1. શϒϥ΢βରԠͨ͠
   DPOUBJOFS
   RVFSZ͸Կ͕εΰΠͷ͔ʁ ϚωʔϑΥϫʔυ
   ࣛ໺
   ૖ 
   5FDI'FFE
   &YQFSUT
   /JHIU
   ʙ
   ઈର໾ཱͭʂ࠷ઌ୺ͷ$44૯͟Β͍
2. ࣛ໺
   ૖
   !UPOLPUTVCPZ@DPN
3. ࣥචɿ+BWB4DSJQUίʔυϨγϐू
4. ࣥචɿ೔ܦιϑτ΢ΣΞ
5. !NFEJB
   ʹΑΔϨεϙϯγϒରԠͷ՝୊ 01
6. SNSͷϖʔδͷϦΞΫγϣϯόʔ։ൃ
7. SNSͷϖʔδͷϦΞΫγϣϯόʔ։ൃ
8. ਌ཁૉͷྖҬʹΑͬͯ2छྨͷαΠζ͕͋Δ ʮ͍͍ͶʯͳͲͷςΩετ͋Γ ΞΠίϯɾ਺஋ͷΈ
9. @mediaͷج४͸΢Πϯυ΢෯
10. ը໘෯1480pxҎ্ͷͱ͖ ʮ͍͍ͶʯͳͲͷςΩετ͋Γ ʮ͍͍ͶʯͳͲͷςΩετ͋Γ
11. ɹը໘෯ 1080pxҎ্1480pxະຬͷͱ͖ ʮ͍͍ͶʯͳͲͷςΩετ͋Γ ΞΠίϯɾ਺஋ͷΈ
12. ɹը໘෯859pxҎ্1080pxະຬͷͱ͖ ʮ͍͍ͶʯͳͲͷςΩετ͋Γ ʮ͍͍ͶʯͳͲͷςΩετ͋Γ
13. ը໘෯825pxҎ্859pxະຬͷͱ͖ ʮ͍͍ͶʯͳͲͷςΩετ͋Γ ΞΠίϯɾ਺஋ͷΈ
14. ը໘෯825pxະຬͷͱ͖ ·ͩ·ͩͨ͘͞Μͷ৚݅෼ذ͕͋Δ🤯
15. ͨ͘͞Μͷ @media Λॻ͔ͳ͍ͱ͍͚ͳ͍ @media (min-width: 1480px) { .reaction-bar-1 { /* テキスト表⽰ */ } .reaction-bar-2 { /* テキスト表⽰ */ } } @media (min-width: 1080px) and (max-width: 1480px) { .reaction-bar-1 { /* テキスト表⽰ */ } .reaction-bar-2 { /* アイコン・数値のみ */ } } @media (min-width: 859px) and (max-width: 1080px) { .reaction-bar-1 { /* テキスト表⽰ */ } .reaction-bar-2 { /* テキスト表⽰ */ } } @media (min-width: 825px) and (max-width: 859px) { .reaction-bar-1 { /* テキスト表⽰ */ } .reaction-bar-2 { /* アイコン・数値のみ */ } } /* 以下略 */ ︙ ը໘෯ 1080px Ҏ্ 1480px ະຬͷͱ͖ ϝΠϯΤϦΞɿ ςΩετදࣔ Լ෦ΤϦΞɿΞΠίϯɾ਺஋ͷΈ ը໘෯ 1480px Ҏ্ͷͱ͖ ϝΠϯΤϦΞɿ ςΩετදࣔ Լ෦ΤϦΞɿςΩετදࣔ ը໘෯ 859px Ҏ্ 1080px ະຬͷͱ͖ ϝΠϯΤϦΞɿ ςΩετදࣔ Լ෦ΤϦΞɿςΩετදࣔ ը໘෯ 825px Ҏ্ 859px ະຬͷͱ͖ ϝΠϯΤϦΞɿ ςΩετදࣔ Լ෦ΤϦΞɿΞΠίϯɾ਺஋ͷΈ ʜ
16. ߋʹ஫จ͕௥Ճ͞ΕΔ w φϏήʔγϣϯόʔͷ෯Λม͑ͨͷͰɺ 
 ϝΠϯΤϦΞͷ෯΋มΘΓ·ͨ͠
    w φϏήʔγϣϯ͸։ดػೳΛ΋ͨͤͨͷͰɺ 
 ։͍ͨͱ͖͚ͩ෯͕มΘΓ·͢
    w ˓˓QYͷͱ͖͚ͩϨΠΞ΢τ͕͓͔͍͠Ͱ͢
17. ΢Πϯυ΢αΠζ͚ͩͰ
    ෳࡶͳϨεϙϯγϒରԠ͸ݶք͕͋Δ🤯
18. ͦ͜Ͱొ৔͢Δͷ͕
    ίϯςφΫΤϦ💐
19. ίϯςφΫΤϦ 02
20. ΢Πϯυ΢αΠζͰ͸ͳ͘
    ೚ҙͷཁૉͷαΠζΛج४ʹ͢Δ💐
21. ೚ҙͷཁૉͷαΠζΛج४ʹͰ͖Δ
22. ج४ͱͳΔཁૉʮίϯςφʯ ίϯςφ ίϯςφ
23. ج४ͱͳΔཁૉʮίϯςφʯ ίϯςφ େ͖ͳίϯςφɿʮ͍͍ͶʯͳͲͷςΩετදࣔ খ͞ͳίϯςφɿΞΠίϯɾ਺஋ͷΈ
24. ίϯςφΫΤϦΛ࢖͏3εςοϓ ᶃ
    ج४ͱͳΔίϯςφΛܾఆ͢Δ
    ᶄ
    ํ޲Λࢦఆ͢Δ
    ᶅ
    ΫΤϦΛॻ͘
25. ᶃ
    ج४ͱͳΔίϯςφΛܾఆ͢Δ
26. ࠓճ͸
    .reaction-bar
    ཁૉΛ
    ίϯςφʹ͠·͢ ᶃ ج४ͱͳΔίϯςφͷܾఆ <div class="reaction-bar"> <div class="reaction"> <button>返信ボタン</button> <span class="text">返信する</span> <span class="count">60</span> </div> <div class="reaction"> <button>いいねボタン</button> <span class="text">いいね</span> <span class="count">120</span> </div> <!-- 略 --> </div>
27. container-type͔containerϓϩύςΟΛઃఆ ϓϩύςΟ͕ઃఆ͞Εͨཁૉ͕ίϯςφʹͳΔ .reaction-bar { container-type: ◦◦; }
28. ᶄ
    ํ޲Λࢦఆ͢Δ
29. ࠓճ͸ΠϯϥΠϯํ޲ʢԣ෯ʣΛج४ʹ͢Δ ίϯςφ ΠϯϥΠϯํ޲ʢԣ෯ʣͷαΠζ͕େ͖͍ͱ͖ ΠϯϥΠϯํ޲ʢԣ෯ʣͷαΠζ͕খ͍͞ͱ͖
30. ͲͪΒͷํ޲Λج४ʹελΠϧΛ͋ͯΔ͔ʁ ΠϯϥΠϯ ϒϩοΫ ˞
    ਤͷΠϯϥΠϯɾϒϩοΫํ޲͸೔ຊޠ
31. ΠϯϥΠϯํ޲ͷΈ container-type: inline-size;
32. ΠϯϥΠϯํ޲ɾϒϩοΫํ޲ͷ྆ํ container-type: size;
33. ࠓճ͸ΠϯϥΠϯํ޲ʢԣ෯ʣΛج४ʹ͢Δ .reaction-bar { container-type: inline-size; }
34. ᶅ
    ΫΤϦΛॻ͘
35. @containerͰίϯςφʹԠͨ͡ελΠϧ @container (max-width: 560px) { /* コンテナが560px以下のときにだけのスタイル */ }
36. 560pxҎԼͷͱ͖͚ͩ.textΛফ͢ .reaction-bar { container-type: inline-size; } @container (max-width: 560px) { .reaction-bar .text { display: none; } } <div class="reaction-bar"> <div class="reaction"> <button>返信ボタン</button> <span class="text">返信する</span> <span class="count">60</span> </div> <div class="reaction"> <button>いいねボタン</button> <span class="text">いいね</span> <span class="count">120</span> </div> <!-- 略 --> </div> )5.- $44
37. σϞ IUUQTDEQOJPQFOEFCVH1P#..;X
38. ίϯςφΫΤϦ͸
    3FBDU౳ͷίϯϙʔωϯτ։ൃͱ
    ૬ੑ͕Α͍
39. ίϯςφ͕޿͍͔Ͳ͏͔͚ͩΛߟ͑Ε͹Α͍ ίϯςφ ΠϯϥΠϯํ޲ͷαΠζ͕େ͖͍ͱ͖ ΠϯϥΠϯํ޲ͷαΠζ͕খ͍͞ͱ͖
40. ϦΞΫγϣϯόʔ୲౰ऀ͕ؾʹ͢Δͷ͸ίϯςφ͚ͩ ϦΞΫγϣϯόʔΛ࡞Δਓ શମΛ࡞Δਓ
41. ίϯςφʹର͢Δׂ߹αΠζ 03
42. DRX
    DRI
43. cqwɿίϯςφ෯ʹର͢Δׂ߹αΠζ ίϯςφ 100cqw
44. cqhɿίϯςφߴ͞ʹର͢Δׂ߹αΠζ ίϯςφ 100cqh
45. ׆༻ྫ
46. ίϯςφ෯ʹରͯ͠5จࣈʹ͍ͨ͠
47. ίϯςφ෯ʹରͯ͠5จࣈʹ͍ͨ͠ ίϯςφ
48. 100cqwΛ5෼ׂ͢Δ 20cqw(100cqw / 5)
49. .text-container { width: 30dvw; container-type: inline-size; } .text-container .text { font-size: 19cqw; } ίϯςφͱfont-sizeͷࢦఆ <div class="text-container"> <p class="text">古都めぐり</p> </div> )5.- $44
50. .text-container { width: 30dvw; container-type: inline-size; } .text-container .text { font-size: 19cqw; } ίϯςφͱfont-sizeͷࢦఆ <div class="text-container"> <p class="text">古都めぐり</p> </div> )5.- $44 DRXʹͨ͠৔߹ɺίϯςφαΠζʹΑͬͯ͸ 
 'JSFGPY΍4BGBSJͰ៉ྷʹ෼ׂͰ͖ͳ͍ͷͰɺগ͠খ͞Ίʹ͓ͯ͘͠
51. ਌ཁૉͷαΠζ͕มΘͬͯ΋5จࣈ IUUQTDEQOJPQFOEFCVHK0W0R0(
52. ରԠϒϥ΢β 04
53. @container, container-type, cqw͸શϒϥ΢βରԠࡁΈ IUUQTDBOJVTFDPNDTTDPOUBJOFSRVFSJFT
54. @container, container-type, cqw͸શϒϥ΢βରԠࡁΈ IUUQTDBOJVTFDPNDTTDPOUBJOFSRVFSJFT ʹରԠ💐
55. ·ͱΊ
56. ίϯςφΫΤϦΛ࢖͏ͱ
    ΢Πϯυ΢Ͱ͸ͳ͘೚ҙͷαΠζΛج४ʹ
    ϨεϙϯγϒରԠ͕Մೳ
57. ίϯςφαΠζ͑͞ؾʹ͢Ε͹Α͍ͷͰ
    ίϯϙʔωϯτ։ൃ͕ศརʹͳΔ
58. ίϯςφΫΤϦؔ࿈$44
    container-type: inline-size; @container cqw, cqh
59. هࣄͰ΋ৄ͘͠ղઆ͍ͯ͠·͢ IUUQT[FOOEFWNPOFZGPSXBSEBSUJDMFTDTTDPOUBJOFSRVFSZ
60. Thank y ! @tonkotsuboy_com @matsu_eri 5XJUUFSͰ͸࠷৽ϑϩϯτΤϯυٕज़Λൃ৴͍ͯ͠·͢