Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

ここ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
46

Other Decks in Programming

See All in Programming
WebRTC と Rust と 8K 60fps
Avatar for tnoho tnoho
2
1.9k
リリース時」テストから「デイリー実行」へ！開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
Avatar for goataka (GOAMI Takaaki) goataka
0
120
TypeScript 5.9 で使えるようになった import defer でパフォーマンス最適化を実現する
Avatar for おおいし bicstone
1
1.3k
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
120
connect-python: convenient protobuf RPC for Python
Avatar for Anuraag Agrawal anuraaga
0
400
LLMで複雑な検索条件アセットから脱却する！！ 生成的検索インタフェースの設計論
Avatar for po3rin po3rin
2
660
C-Shared Buildで突破するAI Agent バックテストの壁
Avatar for po3rin po3rin
0
380
Go コードベースの構成と AI コンテキスト定義
Avatar for ANDPAD inc andpad
0
120
JETLS.jl ─ A New Language Server for Julia
Avatar for abap34 abap34
1
340
モデル駆動設計をやってみよう ワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
Avatar for haru860 haru860
0
260
Microservices Platforms: When Team Topologies Meets Microservices Patterns
Avatar for Chris Richardson cer
PRO
1
1k
俺流レスポンシブコーディング 2025
Avatar for TAK tak_dcxi
14
8.5k

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.2k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
54k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k

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. ͳʹ΋ͳ͍ϖʔδ