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
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブ...
Search
myzkyy
March 15, 2024
Programming
9
7.3k
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
2024.03.15 福岡フロントエンド勉強会 #1
myzkyy
March 15, 2024
Tweet
Share
More Decks by myzkyy
See All by myzkyy
社内月次MTG資料: 『努力は仕組み化できる - 自分も・他人も「やるべきこと」が無理なく続く努力の行動経済学』の紹介
myzkyy
0
41
Other Decks in Programming
See All in Programming
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
280
Bytecode Manipulation 으로 생산성 높이기
bigstark
1
350
從零到一:搭建你的第一個 Observability 平台
blueswen
1
930
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
160
XSLTで作るBrainfuck処理系
makki_d
0
200
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
150
イベントストーミングから始めるドメイン駆動設計
jgeem
4
840
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
550
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
1k
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
510
Passkeys for Java Developers
ynojima
3
860
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fireside Chat
paigeccino
37
3.5k
Visualization
eitanlees
146
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
930
How GitHub (no longer) Works
holman
314
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Statistics for Hackers
jakevdp
799
220k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Documentation Writing (for coders)
carmenintech
71
4.9k
Rails Girls Zürich Keynote
gr2m
94
14k
Transcript
͜͜1ʙ2͘Β͍Ͱ ͑ΔΑ͏ʹͳͬͨ Σϒͷ৽ػೳʹ͍ͭͯ ϥϯμϜʹΔ! 2024.03.15 ԬϑϩϯτΤϯυษڧձ #1 ओཁϒϥβʔͷ࠷৽൛ ͕ͯ͢ରԠͨ͠ (
)
ͳʹͳ͍ϖʔδ
CSS͕ωετʹରԠ CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting 10લʹཉ͔ͬͨ͠ɻ
Ϗϡʔϙʔτͷछྨ͕૿͑ͨ CSS lvh / svh / dvh [new]
lvh ද͕ࣔಈతʹมԽ͢ΔϒϥβʔͷUIʢΞυϨεόʔɺπʔϧόʔʣͷྖ ҬΛؚΉϏϡʔϙʔτߴ͞
svh ද͕ࣔಈతʹมԽ͢ΔϒϥβʔͷUIʢΞυϨεόʔɺπʔϧόʔʣͷྖ ҬΛؚ·ͳ͍Ϗϡʔϙʔτߴ͞
dvh πʔϧόʔͷදࣔঢ়ଶʹ͋ΘͤͯಈతʹมԽ͢ΔϏϡʔϙʔτߴ͞
lvh ද͕ࣔಈతʹมԽ͢ΔϒϥβʔͷUIʢΞυϨεόʔɺπʔϧόʔʣͷྖ ҬΛؚΉϏϡʔϙʔτߴ͞ svh ද͕ࣔಈతʹมԽ͢ΔϒϥβʔͷUIʢΞυϨεόʔɺπʔϧόʔʣͷྖ ҬΛؚ·ͳ͍Ϗϡʔϙʔτߴ͞ dvh πʔϧόʔͷදࣔঢ়ଶʹ͋ΘͤͯಈతʹมԽ͢ΔϏϡʔϙʔτߴ͞ ※ ैདྷͷvhϒϥβʔͷʮσϑΥϧτͷߴ͞ʯͱͳΓɺϒϥβʔͷ࣮ґଘʢ͓ͦΒ͘lvhͱಉ͡ʹͳΔʣɻ
※ ͪΖΜlvw, svw, dvw͋Δͷ͕ͩɺ্هͷʮද͕ࣔಈతʹมԽ͢ΔϒϥβʔͷUIʯʹεΫϩʔϧόʔͷྖҬ ؚ·Εͳ͍ͷͰɺ͋·Γ࣮༻্ͷҙຯͳ͍Α͏ʹࢥ͏ ·ͱΊ
svmin / svmax / lvmin / lvmax / dvmin /
dvmax / vmin / vmax [new] Ϗϡʔϙʔτͷॎԣͷ͏ͪେ͖͍ or খ͍͞ΛऔΕΔ
transformػೳଟ͗͢ˠׂ CSS scale, rotate, translate͕ͦΕͧΕಠཱͨ͠ϓϩύςΟʹͳͬͨɻ ʢskewͳ͔ͥͳ͍ʣ ΞχϝʔγϣϯͰ͏ͱ͖ʹศརɻ
top, right, bottom, left ·ͱΊͯࢦఆͰ͖ΔΑ͏ʹͳͬͨ CSS →
accent-colorϓϩύςΟͰ ϥδΦϘλϯɾνΣοΫϘο Ϋεͷ৭͕؆୯ʹมߋՄೳʹ CSS CSS Render
range syntax CSS → ैདྷͷه๏ͩͱʮmax-widthͱҰக͢Δ߹Ͳ͚ͬͪͩͬʁʯͱͳΓ͕ͪͩͬͨͷͰɺͦ ͏͍͏؍ͰΘ͔Γ͘͢ͳͬͨɻ
container queries CSS ΟϯυαΠζͰͳ͘ҙͷཁૉͷαΠζʹجͮ͘CSSΓସ͕࣮͑ݱՄೳʹɻ https://developer.mozilla.org/en-US/docs/Web/CSS/container-type
ʢࢲݟʣ ίϯϙʔωϯτ͕ࣗͷදࣔྖҬʹԠͯ͡ܝग़߲ͷαΠζײΛௐ͢Δͱ͍࣮ͬͨ ͕JavaScriptͳ͠Ͱൺֱత؆୯ʹ࣮Ͱ͖ΔΑ͏ʹͳͬͨɻ ͨͩίϯςφʔίϯϙʔωϯτͷϧʔτཁૉʹݶఆ͢ΔͳͲԿΒ͔ͷنଇੑΛ࣋ͨͤ ͳ͍ͱϋΠίϯςΩετ͗͢Δ࣮ʹͳͬͯ͠·͏͔͠Εͳ͍ɻ
:has selector CSS ಛఆͷཁૉΛؚΜͰ͍Δ͜ͱΛ݅ʹελΠϧద༻͕Մೳʹ ※্هઆ໌ҰྫͰ͋Γɺ:hasηϨΫλʔͷػೳΛཏతʹઆ໌͍ͯ͠ͳ͍ https://developer.mozilla.org/en-US/docs/Web/CSS/:has imgΛแ͢Δh2ཁૉʹελΠϧΛద༻
ʢࢲݟʣ ෳࡶͳCSSηϨΫλʔͷ༻ՄಡੑΛԼͤ͞Δɻ :hasͷ༻͕ఆ͞ΕΔଟ͘ͷέʔεʹ͓͍ͯɺ۪ʹΫϥε͚͢Δ͔ɺReactίϯ ϙʔωϯτͰJavaScriptʹΑΔग़͚͠Λ͓͜ͳͬͨ΄͏͕Մಡੑͷ؍Ͱྑ͍ͱࢥ ͏ɻ
ྻͷඇഁյૢ࡞ Array.prototype.toSorted(); Array.prototype.toReverted(); Array.prototype.toSpliced(); Array.prototype.with(); ES
None
Promise.withResolvers ES ֎෦͔Β resolve / reject ͘͢͠ͳͬͨɻ
Object.groupBy() Map.groupBy() ES https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy
None
PopoverAPI HTML HTML͚ͩͰϙοϓΦʔόʔද͕࣮ࣔͰ͖Δ More examples: https://mdn.github.io/dom-examples/popover-api/ • popovertargetactionଐੑͰด͡ΔϘλϯ࡞ΕΔ • .togglePopover()
ͰJavaScript͔Βͷද੍ࣔޚՄೳ • ::backdropٙࣅཁૉͰഎܠΛ҉͘͢Δ͜ͱՄೳ
<dialog>ཁૉͱPopover APIͷҧ͍ʢ͋Δ͍ซ༻ʣʹ͍ͭͯѲ͓ͯ͘͜͠ͱΛਪ https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#concepts_and_usage
ͳʹͳ͍ϖʔδ