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
73
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
大規模Hive-Trino移行PJの事例紹介
lycorptech_jp
PRO
0
18
Trinoの長期運用から学んだこと
lycorptech_jp
PRO
2
220
Secure and Private Federated Learning with Differential Privacy
lycorptech_jp
PRO
2
110
Kotlin Fest 2024 - Pocket Code Battle 問題解説
lycorptech_jp
PRO
2
36
差分プライバシー入門
lycorptech_jp
PRO
2
99
Adopting ZGC in HBase for LINE Messaging
lycorptech_jp
PRO
2
710
Exploit the smart speaker at Pwn2Own
lycorptech_jp
PRO
1
84
システム化で乗り切る1200クラスタのKaaS運用
lycorptech_jp
PRO
3
200
LINEヤフーのウェブアクセシビリティ
lycorptech_jp
PRO
3
400
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
41k
Go言語で行うメール解析
keyl0ve
0
260
組織横断型であるがゆえの楽しみと苦しみ
yoshiiryo1
1
880
20240711 LLM Tech Night #3 by LayerX - LT資料
mntsq
0
270
Implementation Dependencies in the Commonly Used SQL
nori_shinoda
4
250
データベース12: 正規化(2/2) - データ従属性に基づく正規化
trycycle
0
170
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
12k
プロジェクト推進におけるLLMチューニング
layerx
PRO
2
240
LLMのエコシステム / Ecosystem of LLM
oracle4engineer
PRO
5
340
AWS CDK Conference Japan 2024 OP
tomoki10
0
370
ゼロから始めるプロジェクトマネジメント Key Points
shinchit
0
340
Embracing Python, AI, and Heuristics: Optimal Paths for Impactful Software
willingc
PRO
0
530
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Making Projects Easy
brettharned
110
5.7k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.3k
Docker and Python
trallard
37
2.8k
The Pragmatic Product Professional
lauravandoore
29
6k
Producing Creativity
orderedlist
PRO
339
39k
Happy Clients
brianwarren
94
6.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
How to Ace a Technical Interview
jacobian
274
23k
The Art of Programming - Codeland 2020
erikaheidi
47
12k
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; }