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
39
Other Decks in Programming
See All in Programming
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.5k
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
seike460
PRO
0
160
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
260
人には人それぞれのサービス層がある
shimabox
3
450
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.5k
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
4
470
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
1
240
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
メモリリークが発生した時にpprofを使用して原因特定した話
zono33lhd
0
100
tsconfigのオプションで変わる型世界
keisukeikeda
1
120
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Site-Speed That Sticks
csswizardry
7
590
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Bash Introduction
62gerente
614
210k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Language of Interfaces
destraynor
158
25k
What's in a price? How to price your products and services
michaelherold
245
12k
Visualization
eitanlees
146
16k
Being A Developer After 40
akosma
91
590k
Building Applications with DynamoDB
mza
95
6.4k
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
ͳʹͳ͍ϖʔδ