Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web UIの黄金時代 - WebとCSSの最新アップデート
Search
LY Corporation Tech
PRO
June 12, 2024
Technology
2
56
Web UIの黄金時代 - WebとCSSの最新アップデート
「Recap: Google I/O 2024」の発表資料です。
https://lycorptech-jp.connpass.com/event/319039/
LY Corporation Tech
PRO
June 12, 2024
Tweet
Share
More Decks by LY Corporation Tech
See All by LY Corporation Tech
Adopting ZGC in HBase for LINE Messaging
lycorptech_jp
PRO
2
420
Exploit the smart speaker at Pwn2Own
lycorptech_jp
PRO
1
73
システム化で乗り切る1200クラスタのKaaS運用
lycorptech_jp
PRO
3
190
LINEヤフーのウェブアクセシビリティ
lycorptech_jp
PRO
3
330
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
800
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
7
4.3k
Yahoo! 知恵袋フロントエンドをリアーキテクトしている話
lycorptech_jp
PRO
7
3.4k
UIコンポーネント Vue3マイグレーション体験記
lycorptech_jp
PRO
0
330
スタンプショップの推薦枠に2-stage制を導入した事例紹介
lycorptech_jp
PRO
1
330
Other Decks in Technology
See All in Technology
Go Global! In the AWS Community Global Initiatives
hiroramos4
PRO
1
120
20240619_今すぐ試せるCopilot
ponponmikankan
4
570
PHPカンファレンス福岡2024 【超特急】SQLアンチパターン総おさらいLT
ytsuzaki
0
360
私の推しサービス:Elastic Kubernetes Service(EKS)
daitak
1
180
AWS サポート直伝! AWS SAW を使ってトラブルシューティングを効率化しよう
furuton
0
110
良いユニットテストの性質を整理してたら考えるべき設計も見えてきたの
bun913
12
5.1k
こんなに違うよ MySQLとPostgreSQL /
sakaik
17
10k
MySQLのリリースモデルの変更点と最新アップデート / MySQLNewReleaseModel
yoshiakiyamasaki
2
260
AI Risk Solution Study
tkhresk
0
110
品質活動を事業に結びつけるためのQA文化の築き方 / how to build QA culture
mii3king
1
980
AWSセキュリティを「日本語で」学習していくための良いコンテンツをまとめてみた
cmusudakeisuke
0
12k
AWSの生成AIサービス Amazon Bedrock入門!(2024/6月版)
minorun365
PRO
2
170
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
23
2k
Building Flexible Design Systems
yeseniaperezcruz
321
37k
WebSockets: Embracing the real-time Web
robhawkes
59
7.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
23
1.5k
Adopting Sorbet at Scale
ufuk
69
8.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
22
1.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
20
1.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Happy Clients
brianwarren
93
6.5k
BBQ
matthewcrist
80
8.9k
Transcript
-:$PSQPSBUJPO 8FC6*ͷԫۚ࣌ 8FCͱ$44ͷ࠷৽Ξοϓσʔτ 3FDBQ(PPHMF*0 5BNBEB"LJIJSP TQSJOHSBJOJOH
-:$PSQPSBUJPO ͜ͷηογϣϯͰऔΓ্͛Δ͜ͱ w (PPHMF*0Ͱൃද͞ΕͨҎԼͷηογϣϯΛத৺ʹऔΓ্͛·͢ w 8FCͷ༰Ͱ͕͢ɺ"OESPJEͳํʹ͔ΔൣғͰհ͠·͢ w ࣌ؒͷڐ͢ݶΓݸผͷ༰ΛऔΓ্͛·͢ IUUQTJPHPPHMFFYQMPSFECBBFBGCEEDBDGEG IUUQTJPHPPHMFFYQMPSFDBBDEE
-:$PSQPSBUJPO l"HPMEFOFSBGPS8FC6*z
-:$PSQPSBUJPO 8FC6*ͷԫ͕ۚ࣌౸དྷ w *&ͷαϙʔτऴྃʹΑΓɺશͯͷओཁͳϒϥβͰࣗಈΞοϓσʔτ ͷԸܙΛड͚ΒΕΔΑ͏ʹͳͬͨ w ݹ͍ϒϥβΛαϙʔτ͠ଓ͚Δඞཁ͕ͳ͘ͳΓɺ͜Ε͔Β৽͍͠ 8FC"1*Λੵۃతʹಋೖ͢Δ͜ͱ͕Ͱ͖Δ w 8FC6*Ͱ࣮ݱՄೳͳ͜ͱ͕ͲΜͲΜ૿͍͑ͯΔ
-:$PSQPSBUJPO ۙՃ͞ΕΔ8FC"1*ͷಛ w શ͘৽͍֓͠೦͕૿͑Δɺͱ͍͏͜ͱͦΕ΄Ͳͳ͍ w ͜Ε·Ͱ+BWB4DSJQUΛΘͳ͍ͱ࣮ݱͰ͖ͳ͔ͬͨ6*͕ɺ)5.- $44ͷΈͰɺ͘͠ΑΓগͳ͍+BWB4DSJQUίʔυͰ࣮ݱͰ͖ΔΑ͏ ʹͳΔύλʔϯ͕ଟ͍ w ৽͘͠8FCΛֶͿʹͱͯྑ͍λΠϛϯά
w ٯʹݱঢ়ͷࣝͷ··ͰকདྷԽͯ͠͠·͏Մೳੑʜʁ
-:$PSQPSBUJPO #BTFMJOF w ͦΕͧΕͷػೳͷαϙʔτঢ়گΛ؆୯ʹ Ѳ͢ΔͨΊͷڞ௨ͷج४ w 8"গͳ͘ͱϲ݄Ҏ্֤ϕʔεϥΠϯ ϒϥβͰαϙʔτ͞Ε͍ͯΔ w /"࠷৽ͷϕʔεϥΠϯϒϥβͰαϙʔ
τ͞Ε͍ͯΔ w -"ݶఆ͞Εͨϒϥβͷαϙʔτ IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT(MPTTBSZ#BTFMJOF$PNQBUJCJMJUZ
-:$PSQPSBUJPO ͕࣌ؒͳ͘ͳΔ·Ͱ ࠷ۙͷΞοϓσʔτʹ͍ͭͯհ
-:$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>
-:$PSQPSBUJPO $POUBJOFSRVFSJFT 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%; } }
-:$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Λදࣔ
-:$PSQPSBUJPO UFYUXSBQCBMBODF w ͦΕͧΕͷߦ͕ಉ͙͡Β͍ͷ͞ʹͳΔΑ͏ɺۉʹվߦͤ͞Δ p { text-wrap: balance; }
-:$PSQPSBUJPO XPSECSFBLBVUPQISBTF w #VEPV9ʹΑΔຊޠͷઅ۠Γͷ݁Ռʹͱ͖ͮɺࣗવͳҐஔͰ ͷվߦΛࢼΈΔ p { word-break: auto-phrase; }