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
42
Other Decks in Programming
See All in Programming
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.3k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
110
NEWT Backend Evolution
xpromx
1
150
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
PHPカンファレンス関西2025 基調講演
sugimotokei
5
930
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
120
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
190
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
150
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
140
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How to Ace a Technical Interview
jacobian
278
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Gamification - CAS2011
davidbonilla
81
5.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
What's in a price? How to price your products and services
michaelherold
246
12k
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
ͳʹͳ͍ϖʔδ