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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for myzkyy myzkyy
March 15, 2024
Programming
7.4k
9

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

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

Avatar for myzkyy

myzkyy

March 15, 2024

More Decks by myzkyy

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

Other Decks in Programming

See All in Programming
ふにゃっとしない名前の付け方 〜哲学で茹で上げる、コシのあるソフトウェア設計〜
Avatar for akshimo shimomura
0
100
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
330
How We Benchmarked Quarkus: Patterns and anti-patterns
Avatar for Holly Cummins hollycummins
1
180
Explore CoroutineScope
Avatar for tomoEng11 tomoeng11
0
160
[RubyKaigi 2026] Require Hooks
Avatar for Vladimir Dementyev palkan
1
290
PicoRuby for IoT: Connecting to the Cloud with MQTT
Avatar for Y_uuu yuuu
2
750
AgentCore Optimizationを始めよう！
Avatar for matsukada licux
3
180
Road to RubyKaigi: Play Hard(ware)
Avatar for makicamel makicamel
1
540
AWSコミュニティ活動は顧客のクラウド推進に効くのか / Do AWS community activities help customers adopt the cloud?
Avatar for shiro seike seike460
PRO
0
170
継続的な負荷検証を目指して
Avatar for Kazuhiko Yamashita pyama86
0
160
実践ハーネスエンジニアリング：ステアリングループを実例から読み解く / Practical Harness Engineering: Understanding Steering Loops Through Real-World Examples
Avatar for nrs nrslib
1
360
ローカルLLMでどこまでコードが書けるか / How much code can be written on a local LLM
Avatar for Naoki Kishida kishida
2
290

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
270
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
1
24
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.2M
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
350
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
180
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.7k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
130
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.3k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.4k

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