IE to Edge

Transcript

1. IE to Edge "LJIJSP
   0ZBNBEB
3. FrontEnd dev at PixelGrid, Inc. Akihiro Oyamada @yomotsu
10. A distribution of Chromium, A fork of WebKit
11. DEMO https://github.com/codegrid/2022-goodbye-ie/#readme
12. QJDUVSFͰϨεϙϯγϒը૾ <picture> <source srcset="small.jpg" media="(max-width: 680px)" > <img src="large.jpg" alt="藍色の空に浮かぶ雲" > </picture>
14. ͍Ζ͍ΖͳJOQVUλΠϓ <input type="time" min="09:00" max="18:00"> <input type="date" min="2022-06-15"> <input type="month" min="2022-06"> <input type="week" value="2022-W24"> <input type="color" min="#ff0000"> month, week は Safari15 未対応
16. EFUBJMTͰ؆қΞίʔσΟΦϯ <details> <summary>JSなしでもアコーディオンはできますか？</summary> はい、可能です </details>
18. EJBMPHͰ Ϟʔμϧ΍πʔϧνοϓ <dialog> <p>簡易モーダル</p> <button onclick="document.querySelector( 'dialog' ).close()"> close </button> </dialog> <button onclick="document.querySelector( 'dialog' ).showModal()"> open </button>
20. EJBMPHͰ Ϟʔμϧ΍πʔϧνοϓ <dialog> <p>簡易モーダル</p> <button onclick="document.querySelector( 'dialog' ).close()"> close </button> </dialog> <button onclick="document.querySelector( 'dialog' ).showModal()"> open </button>
21. B
    EPXOMPBEͰϦϯΫઌΛอଘ <a href=“./wallpaper.jpg" download>壁紙画像ダウンロード</a>
22. "1/(
    8FC1
    8FC. <img src=“./apng.png" alt=““> <img src=“./webp.webp" alt=““> <video cotrols> <source src=“./hevc.mov" type=’video/mp4; “codecs=hvc1“’> <source src=“./vp9.webm" type=“video/webm“> </video>
25. GJMUFSΛ͔ͭͬͨ৭ૢ࡞ IPWFSʹ΋ʁ .link { transition: filter .2s; } .link:hover { filter: brightness( 1.2 ); }
26. CBDLESPQGJMUFSͰ ॏͳΓ෦෼ʹϑΟϧλʔ .flyout__menu { position: absolute; background: rgba( 255, 255, 255, .5 ); -webkit-backdrop-filter: blur( 3px ); backdrop-filter: blur( 3px ); } Firefoxでは要フラグ、接頭辞不要 Chromium系は接頭辞不要 Safariでは-webkit-接頭辞が必要
27. NJYCMFOENPEFͰ ৭ϒϨϯυ .block { background: url( "./img_01.jpg" ) 50% 50% / cover; } .block__text { color: #66f; mix-blend-mode: multiply; }
28. എܠը૾ʹ͠ͳ͍Ͱ΋ දࣔʂPCKFDUGJU .image-container { width: 100%; height: 300px; } .image-container img { display: block; object-fit: cover; width: 100%; height: 100%; }
29. XFCLJU΋͔ͭ͑Δʂ XFCLJUUFYUTUSPLFͰԑऔΓจࣈ .text { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #000; color: yellow; } Firefoxでも-webkit-接頭辞が必要 WebKit, Chromium系は-webkit-必須
30. ςΩετͷృΓʹը૾΍άϥσ CBDLHSPVOEDMJQ
    UFYU .text { color: transparent; background-image: url( "bg.png" ); -webkit-background-clip: text; background-clip: text; } Firefoxは接頭辞なし WebKit, Chromium系は-webkit-必須
31. DMJQQBUIͰΫϦοϐϯά Ξχϝʔγϣϯ΋Ͱ͖Δ .image-container { -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } Chromium系、Firefoxは接頭辞不要 Safariでは-webkit-接頭辞が必要
32. άϥσͷϚεΫͳΒ XFCLJUNBTL .image-container0 { -webkit-mask: url( “./mask.svg" ); mask: url( “./mask.svg" ); /* ※ file: の URL で CORS の制限を受けるので注意。*/ } clip-pathと違い、グラデーションも可能 Firefoxは接頭辞なし WebKit, Chromium系は-webkit-必須
33. ܧঝΛ໭ͤΔ JOJUJBMɺVOTFUɺSFWFSU #main em { color: red; font-style: normal; } .myDiv em { all: unset; }
34. WBSͰม਺Խ $44ͷ஋Λ·ͱΊͯ؅ཧ :root { --color-main: #113568; --spacing-32: 32px; --spacing-16: 16px; } .heading { color: var(--color-main); margin: var(--spacing-32) auto 0; }
35. ม਺͸ DPOTU
    ΍ MFU const myName = '小山田晃浩'; let myAge = 39; myAge = myAge + 1;
36. Ξϩʔؔ਺Ͱলུ const onClick = () => { myAge += 1; } // これまでの書き方 const onClick = function() { myAge += 1; }
37. ϞδϡʔϧͱΠϯϙʔτ <script type="module"> import Swiper from 'https://unpkg.com/swiper@7/swiper-bundle.esm.browser.js'; const swiper = new Swiper(...); </script> </body> </html>
38. ϙϦϑΟϧͳ͠Ͱ࢖͑Δ ͦͷଞͷػೳ Promise、async/await、class、Proxy、currentScript、 new CustomEvent('....')、Symbol addEventListener() の {once: true}、 IntersectionObserver などなど
39. https://caniuse.com/?compare=ie+11,edge+95&compareCats=all
40. 04͝ͱͷ&EHF 04 Τϯδϯ දࣔ݁Ռͱ+4ػೳ 8JOEPXT #MJOLʢ$ISPNJVNʣ
    5SJEFOUʢ*&NPEFʣ $ISPNFͱಉ༷ NBD04 #MJOLʢ$ISPNJVNʣ $ISPNFͱಉ༷ "OESPJE #MJOLʢ$ISPNJVNʣ $ISPNFͱಉ༷ J04 8FC,JUʢ8,8FC7JFXʣ J04
    4BGBSJʹ͍ۙ
41. Conclusion
42. w &EHFͰͰ͖Δ͜ͱ͕޿͕Δ w ࠾༻ٕज़ͷݟ௚͠ w ։ൃ؀ڥͷݟ௚͠
43. ྫ͑͹ʜ
44. αΠζׂ͕ݮͬͨʂ #FGPSF "GUFS
45. ΋͏͙͢*&͸
46. ཟ৭ͷۭͷ ӢΑΓ΋ɺ΋ͬͱߴ͍ͱ͜Ζʹ ཱཱྀͪ·͢ Ξδϡʔϧ Ϋϥ΢υ
47. Ͱ΋ɺ*&͸ͣͬͱ ΈΜͳͱ͍ͬ͠ΐͰ͢
48. ຊ౰ʹࠔͬͨΒʜ
49. *&ϞʔυͰ·ͨձ͑·͢ʂ
53. 5)"/,4 !ZPNPUTV