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
LINEヤフーTech (LY Corporation Tech)
PRO
June 12, 2024
Technology
2
140
Web UIの黄金時代 - WebとCSSの最新アップデート
「Recap: Google I/O 2024」の発表資料です。
https://lycorptech-jp.connpass.com/event/319039/
LINEヤフーTech (LY Corporation Tech)
PRO
June 12, 2024
Tweet
Share
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
340
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
300
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
440
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
350
LINEスキマニのフロントエンド開発にDenoを採用した理由
lycorptech_jp
PRO
0
90
「コード品質向上のテクニック」連載継続の秘訣
lycorptech_jp
PRO
0
77
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
280
Arakawa 101 Or How To Build a Data App by Python
lycorptech_jp
PRO
0
53
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
17
3.8k
Other Decks in Technology
See All in Technology
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
83k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
280
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
日経のデータベース事業とElasticsearch
hinatades
PRO
0
250
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
180
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
230
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
7
450
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
850
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
270
Featured
See All Featured
Facilitating Awesome Meetings
lara
52
6.2k
Side Projects
sachag
452
42k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
4 Signs Your Business is Dying
shpigford
182
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
BBQ
matthewcrist
87
9.5k
How to Ace a Technical Interview
jacobian
276
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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; }