Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブ...

Avatar for myzkyy myzkyy
March 15, 2024
Programming
9
7.3k

ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!

2024.03.15 福岡フロントエンド勉強会 #1
Avatar for myzkyy

myzkyy

March 15, 2024
Tweet

More Decks by myzkyy

See All by myzkyy
社内月次MTG資料: 『努力は仕組み化できる - 自分も・他人も「やるべきこと」が無理なく続く努力の行動経済学』の紹介
Avatar for myzkyy myzkyy
0
41

Other Decks in Programming

See All in Programming
プロダクト志向ってなんなんだろうね
Avatar for RightTouch righttouch
PRO
0
140
Rubyでやりたい駆動開発 / Ruby driven development
Avatar for chobishiba chobishiba
1
130
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
Avatar for アキキー akihisaikeda
3
300
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
Avatar for hideki kinjyo o0h
PRO
1
160
F#で自在につくる静的ブログサイト - 関数型まつり2025
Avatar for pizzacat83 pizzacat83
0
310
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
2
510
Datadog RUM 本番導入までの道
Avatar for Shintaro Matsumoto shinter61
1
310
Kotlin エンジニアへ送る：Swift 案件に参加させられる日に備えて～似てるけど色々違う Swift の仕様 / from Kotlin to Swift
Avatar for Elvis Shi lovee
1
250
Effect の双対、Coeffect
Avatar for ゆきくらげ yukikurage
5
1.4k
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
160
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
Avatar for Yuki Nakata chikuwait chikuwait
0
390
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
184
28k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
6.1k
Done Done
Avatar for chrislema chrislema
184
16k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.4k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k

Transcript

  1. ͜͜1ʙ2೥͘Β͍Ͱ ࢖͑ΔΑ͏ʹͳͬͨ ΢Σϒͷ৽ػೳʹ͍ͭͯ ϥϯμϜʹ஻Δ! 2024.03.15 ෱ԬϑϩϯτΤϯυษڧձ #1 ओཁϒϥ΢βʔͷ࠷৽൛ ͕͢΂ͯରԠͨ͠ (

    )

  2. ͳʹ΋ͳ͍ϖʔδ

  3. CSS͕ωετʹରԠ CSS

  4. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting 10೥લʹཉ͔ͬͨ͠ɻ

  5. Ϗϡʔϙʔτͷछྨ͕૿͑ͨ CSS lvh / svh / dvh [new]

  6. lvh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚΉϏϡʔϙʔτߴ͞

  7. svh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚ·ͳ͍Ϗϡʔϙʔτߴ͞

  8. dvh πʔϧόʔͷදࣔঢ়ଶʹ͋ΘͤͯಈతʹมԽ͢ΔϏϡʔϙʔτߴ͞

  9. lvh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚΉϏϡʔϙʔτߴ͞ svh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚ·ͳ͍Ϗϡʔϙʔτߴ͞ dvh πʔϧόʔͷදࣔঢ়ଶʹ͋ΘͤͯಈతʹมԽ͢ΔϏϡʔϙʔτߴ͞ ※ ैདྷͷvh͸ϒϥ΢βʔͷʮσϑΥϧτͷߴ͞ʯͱͳΓɺϒϥ΢βʔͷ࣮૷ґଘʢ͓ͦΒ͘lvhͱಉ͡ʹͳΔʣɻ

    ※ ΋ͪΖΜlvw, svw, dvw΋͋Δͷ͕ͩɺ্هͷʮද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʯʹεΫϩʔϧόʔͷྖҬ ͸ؚ·Εͳ͍ͷͰɺ͋·Γ࣮༻্ͷҙຯ͸ͳ͍Α͏ʹࢥ͏ ·ͱΊ

  10. svmin / svmax / lvmin / lvmax / dvmin /

    dvmax / vmin / vmax [new] Ϗϡʔϙʔτͷॎԣͷ͏ͪେ͖͍஋ or খ͍͞஋ΛऔΕΔ

  11. transformػೳଟ͗͢ˠ෼ׂ CSS scale, rotate, translate͕ͦΕͧΕಠཱͨ͠ϓϩύςΟʹͳͬͨɻ ʢskew͸ͳ͔ͥͳ͍ʣ ΞχϝʔγϣϯͰ࢖͏ͱ͖ʹศརɻ

  12. top, right, bottom, left ·ͱΊͯࢦఆͰ͖ΔΑ͏ʹͳͬͨ CSS →

  13. accent-colorϓϩύςΟͰ ϥδΦϘλϯɾνΣοΫϘο Ϋεͷ৭͕؆୯ʹมߋՄೳʹ CSS CSS Render

  14. range syntax CSS → ैདྷͷه๏ͩͱʮmax-widthͱҰக͢Δ৔߹͸Ͳ͚ͬͪͩͬʁʯͱͳΓ͕ͪͩͬͨͷͰɺͦ ͏͍͏؍఺Ͱ΋Θ͔Γ΍͘͢ͳͬͨɻ

  15. container queries CSS ΢Οϯυ΢αΠζͰ͸ͳ͘೚ҙͷཁૉͷαΠζʹجͮ͘CSS੾Γସ͕࣮͑ݱՄೳʹɻ https://developer.mozilla.org/en-US/docs/Web/CSS/container-type

  16. ʢࢲݟʣ ίϯϙʔωϯτ͕ࣗ਎ͷදࣔྖҬʹԠͯ͡ܝग़߲໨ͷαΠζײΛௐ੔͢Δͱ͍࣮ͬͨ૷ ͕JavaScriptͳ͠Ͱൺֱత؆୯ʹ࣮૷Ͱ͖ΔΑ͏ʹͳͬͨɻ ͨͩίϯςφʔ͸ίϯϙʔωϯτͷϧʔτཁૉʹݶఆ͢ΔͳͲԿΒ͔ͷنଇੑΛ࣋ͨͤ ͳ͍ͱϋΠίϯςΩετ͗͢Δ࣮૷ʹͳͬͯ͠·͏͔΋͠Εͳ͍ɻ

  17. :has selector CSS ಛఆͷཁૉΛؚΜͰ͍Δ͜ͱΛ৚݅ʹελΠϧద༻͕Մೳʹ ※্هઆ໌͸ҰྫͰ͋Γɺ:hasηϨΫλʔͷػೳΛ໢ཏతʹઆ໌͍ͯ͠ͳ͍ https://developer.mozilla.org/en-US/docs/Web/CSS/:has imgΛ಺แ͢Δh2ཁૉʹελΠϧΛద༻

  18. ʢࢲݟʣ ෳࡶͳCSSηϨΫλʔͷ࢖༻͸ՄಡੑΛ௿Լͤ͞Δɻ :hasͷ࢖༻͕૝ఆ͞ΕΔଟ͘ͷέʔεʹ͓͍ͯ͸ɺ۪௚ʹΫϥε෼͚͢Δ͔ɺReactίϯ ϙʔωϯτ಺ͰJavaScriptʹΑΔग़͠෼͚Λ͓͜ͳͬͨ΄͏͕Մಡੑͷ؍఺Ͱྑ͍ͱࢥ ͏ɻ

  19. ഑ྻͷඇഁյૢ࡞ Array.prototype.toSorted(); Array.prototype.toReverted(); Array.prototype.toSpliced(); Array.prototype.with(); ES

  20. None

  21. Promise.withResolvers ES ֎෦͔Β resolve / reject ͠΍͘͢ͳͬͨɻ

  22. 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

  23. None

  24. PopoverAPI HTML HTML͚ͩͰϙοϓΦʔόʔද͕࣮ࣔ૷Ͱ͖Δ More examples: https://mdn.github.io/dom-examples/popover-api/ • popovertargetactionଐੑͰด͡ΔϘλϯ΋࡞ΕΔ • .togglePopover()

    ͰJavaScript͔Βͷද੍ࣔޚ΋Մೳ • ::backdropٙࣅཁૉͰഎܠΛ҉͘͢Δ͜ͱ΋Մೳ

  25. <dialog>ཁૉͱPopover APIͷҧ͍ʢ͋Δ͍͸ซ༻ʣʹ͍ͭͯ೺Ѳ͓ͯ͘͜͠ͱΛਪ঑ https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#concepts_and_usage

  26. ͳʹ΋ͳ͍ϖʔδ