Web UIの黄金時代 - WebとCSSの最新アップデート

「Recap: Google I/O 2024」の発表資料です。
https://lycorptech-jp.connpass.com/event/319039/

1. ˜
   -:
   $PSQPSBUJPO 8FC
   6*ͷԫۚ࣌୅
   
   8FCͱ$44ͷ࠷৽Ξοϓσʔτ 3FDBQ
   (PPHMF
   *0
    
   5BNBEB
   "LJIJSP
   TQSJOHSBJOJOH
2. ˜
   -:
   $PSQPSBUJPO ͜ͷηογϣϯͰऔΓ্͛Δ͜ͱ w (PPHMF
   *0Ͱൃද͞ΕͨҎԼͷηογϣϯΛத৺ʹऔΓ্͛·͢
   w 8FCͷ಺༰Ͱ͕͢ɺ"OESPJEͳํʹ΋෼͔ΔൣғͰ঺հ͠·͢
   w ࣌ؒͷڐ͢ݶΓݸผͷ಺༰ΛऔΓ্͛·͢ IUUQTJPHPPHMFFYQMPSFECBBFBGCEEDBDGEG IUUQTJPHPPHMFFYQMPSFDBBDEE
3. ˜
   -:
   $PSQPSBUJPO l"
   HPMEFO
   FSB
   GPS
   8FC
   6*z
4. ˜
   -:
   $PSQPSBUJPO 8FC
   6*ͷԫۚ࣌୅͕౸དྷ w *&ͷαϙʔτऴྃʹΑΓɺશͯͷओཁͳϒϥ΢βͰࣗಈΞοϓσʔτ ͷԸܙΛड͚ΒΕΔΑ͏ʹͳͬͨ
   w ݹ͍ϒϥ΢βΛαϙʔτ͠ଓ͚Δඞཁ͕ͳ͘ͳΓɺ͜Ε͔Β͸৽͍͠ 8FC
   "1*Λੵۃతʹಋೖ͢Δ͜ͱ͕Ͱ͖Δ
   w 8FC
   6*Ͱ࣮ݱՄೳͳ͜ͱ͕ͲΜͲΜ૿͍͑ͯΔ
5. ˜
   -:
   $PSQPSBUJPO ۙ೥௥Ճ͞ΕΔ8FC
   "1*ͷಛ௃ w શ͘৽͍֓͠೦͕૿͑Δɺͱ͍͏͜ͱ͸ͦΕ΄Ͳͳ͍
   w ͜Ε·Ͱ+BWB4DSJQUΛ࢖Θͳ͍ͱ࣮ݱͰ͖ͳ͔ͬͨ6*͕ɺ)5.- $44ͷΈͰɺ΋͘͠͸ΑΓগͳ͍+BWB4DSJQUίʔυͰ࣮ݱͰ͖ΔΑ͏ ʹͳΔύλʔϯ͕ଟ͍
   w ৽͘͠8FCΛֶͿʹ͸ͱͯ΋ྑ͍λΠϛϯά
   w ٯʹݱঢ়ͷ஌ࣝͷ··Ͱ͸কདྷ௠෗Խͯ͠͠·͏Մೳੑ΋ʜʁ
6. ˜
   -:
   $PSQPSBUJPO #BTFMJOF w ͦΕͧΕͷػೳͷαϙʔτঢ়گΛ؆୯ʹ೺ Ѳ͢ΔͨΊͷڞ௨ͷج४
   w 8"
   গͳ͘ͱ΋ϲ݄Ҏ্֤ϕʔεϥΠϯ ϒϥ΢βͰαϙʔτ͞Ε͍ͯΔ
   w /"
   ࠷৽ͷϕʔεϥΠϯϒϥ΢βͰαϙʔ τ͞Ε͍ͯΔ
   w -"
   ݶఆ͞Εͨϒϥ΢βͷαϙʔτ IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT(MPTTBSZ#BTFMJOF$PNQBUJCJMJUZ
7. ˜
   -:
   $PSQPSBUJPO ͕࣌ؒͳ͘ͳΔ·Ͱ
   ࠷ۙͷΞοϓσʔτʹ͍ͭͯ঺հ
8. ˜
   -:
   $PSQPSBUJPO 1PQPWFS w ϖʔδͷ্ʹผͷίϯςϯπΛදࣔ͢Δ
   w ʮΫϦοΫ͢Δ͜ͱͰԿ͔Λදࣔ͢Δʯͱ͍͏࣮૷͕+4Λ࢖Θͣʹ࣮ ݱՄೳ <button popovertarget="p">Show popover</button> <div popover id="p"> Popover content <button popovertarget="p" popovertargetaction="hide"> Hide popover </button> </div>
9. ˜
   -:
   $PSQPSBUJPO $POUBJOFS
   RVFSJFT w ͋Δཁૉ
   $POUBJOFS
   ͷେ͖͞ʹԠͯ͡ɺͦͷࢠཁૉͷ$44ͷద༻ Λग़͠෼͚Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳΔ <div class="container"> <p> Lorem ipsum, dolor sit amet … </p> </div> .container { container-type: inline-size; } @container (inline-size > 500px) { p { font-size: 150%; } }
10. ˜
    -:
    $PSQPSBUJPO MJHIUEBSL w $44ͰMJHIUDPMPSͱEBSLDPMPSͷͭͷ஋Λࢦఆ͢Δ৭ؔ਺
    w DPMPSTDIFNFϓϩύςΟͰͲͪΒͷ৭Λදࣔ͢Δ͔Λ੍ޚͰ͖Δ body { color-scheme: light dark; color: light-dark(red, blue); } body { color-scheme: light; color: light-dark(red, blue); } 04ͷઃఆʹԠͯ͡੾Γସ͑ ڧ੍తʹMJHIUDPMPSΛදࣔ
11. ˜
    -:
    $PSQPSBUJPO UFYUXSBQ
    CBMBODF w ͦΕͧΕͷߦ͕ಉ͙͡Β͍ͷ௕͞ʹͳΔΑ͏ɺۉ౳ʹվߦͤ͞Δ p { text-wrap: balance; }
12. ˜
    -:
    $PSQPSBUJPO XPSECSFBL
    BVUPQISBTF w #VEPV9ʹΑΔ೔ຊޠͷ෼અ۠੾Γͷ݁Ռʹ΋ͱ͖ͮɺࣗવͳҐஔͰ ͷվߦΛࢼΈΔ p { word-break: auto-phrase; }