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
tebasaki
March 15, 2024
Programming
9
6.8k
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
2024.03.15 福岡フロントエンド勉強会 #1
tebasaki
March 15, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Git Lint
bkuhlmann
4
750
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
180
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
710
Let's learn code review
riofujimon
2
440
Rethinking UI building strategies @ SFI 2024
letelete
0
270
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
380
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Visualization
eitanlees
136
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Building Applications with DynamoDB
mza
88
5.6k
The Language of Interfaces
destraynor
151
23k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Scaling GitHub
holman
457
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
We Have a Design System, Now What?
morganepeng
43
6.8k
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
ͳʹͳ͍ϖʔδ