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
個人軟體時代
ethanhuang13
0
240
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
190
AIエージェント開発、DevOps and LLMOps
ymd65536
1
360
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
610
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
990
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
190
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
290
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
180
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
940
tool ディレクティブを導入してみた感想
sgash708
1
150
Understanding Ruby Grammar Through Conflicts
yui_knk
1
180
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Practical Orchestrator
shlominoach
190
11k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Designing for Performance
lara
610
69k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A Tale of Four Properties
chriscoyier
160
23k
Into the Great Unknown - MozCon
thekraken
40
2k
Typedesign – Prime Four
hannesfritz
42
2.8k
Producing Creativity
orderedlist
PRO
347
40k
GraphQLとの向き合い方2022年版
quramy
49
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
ͳʹͳ͍ϖʔδ