IE to Edge

Transcript

1. IE to Edge
   "LJIJSP0ZBNBEB
   

   View Slide

2. View Slide

3. FrontEnd dev
   at PixelGrid, Inc.
   Akihiro Oyamada
   @yomotsu
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. A distribution of Chromium,
    A fork of WebKit
    

    View Slide

11. DEMO
    https://github.com/codegrid/2022-goodbye-ie/#readme
    

    View Slide

12. QJDUVSFͰϨεϙϯγϒը૾
    
    srcset="small.jpg"
    media="(max-width: 680px)"
    >
    src="large.jpg"
    alt="藍色の空に浮かぶ雲"
    >
    
    

    View Slide

13. View Slide

14. ͍Ζ͍ΖͳJOQVUλΠϓ
    
    
    
    
    
    month, week は Safari15 未対応
    

    View Slide

15. View Slide

16. EFUBJMTͰ؆қΞίʔσΟΦϯ
    
    JSなしでもアコーディオンはできますか？
    はい、可能です
    
    

    View Slide

17. View Slide

18. EJBMPHͰ
    Ϟʔμϧ΍πʔϧνοϓ
    
    簡易モーダル
    
    close
    
    
    
    open
    
    

    View Slide

19. View Slide

20. EJBMPHͰ
    Ϟʔμϧ΍πʔϧνοϓ
    
    簡易モーダル
    
    close
    
    
    
    open
    
    

    View Slide

21. BEPXOMPBEͰϦϯΫઌΛอଘ
    壁紙画像ダウンロード
    

    View Slide

22. "1/( 8FC1 8FC.
    
    
    
    
    
    
    

    View Slide

23. View Slide

24. View Slide

25. GJMUFSΛ͔ͭͬͨ৭ૢ࡞
    IPWFSʹ΋ʁ
    .link {
    transition: filter .2s;
    }
    .link:hover {
    filter: brightness( 1.2 );
    }
    

    View Slide

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-接頭辞が必要
    

    View Slide

27. NJYCMFOENPEFͰ
    ৭ϒϨϯυ
    .block {
    background: url( "./img_01.jpg" ) 50% 50% / cover;
    }
    .block__text {
    color: #66f;
    mix-blend-mode: multiply;
    }
    

    View Slide

28. എܠը૾ʹ͠ͳ͍Ͱ΋
    දࣔʂPCKFDUGJU
    .image-container {
    width: 100%;
    height: 300px;
    }
    .image-container img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    }
    

    View Slide

29. XFCLJU΋͔ͭ͑Δʂ
    XFCLJUUFYUTUSPLFͰԑऔΓจࣈ
    .text {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #000;
    color: yellow;
    }
    Firefoxでも-webkit-接頭辞が必要
    WebKit, Chromium系は-webkit-必須
    

    View Slide

30. ςΩετͷృΓʹը૾΍άϥσ
    CBDLHSPVOEDMJQUFYU
    .text {
    color: transparent;
    background-image: url( "bg.png" );
    -webkit-background-clip: text;
    background-clip: text;
    }
    Firefoxは接頭辞なし
    WebKit, Chromium系は-webkit-必須
    

    View Slide

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-接頭辞が必要
    

    View Slide

32. άϥσͷϚεΫͳΒ
    XFCLJUNBTL
    .image-container0 {
    -webkit-mask: url( “./mask.svg" );
    mask: url( “./mask.svg" );
    /* ※ file: の URL で CORS の制限を受けるので注意。*/
    }
    clip-pathと違い、グラデーションも可能
    Firefoxは接頭辞なし
    WebKit, Chromium系は-webkit-必須
    

    View Slide

33. ܧঝΛ໭ͤΔ
    JOJUJBMɺVOTFUɺSFWFSU
    #main em {
    color: red;
    font-style: normal;
    }
    .myDiv em {
    all: unset;
    }
    

    View Slide

34. WBSͰม਺Խ
    $44ͷ஋Λ·ͱΊͯ؅ཧ
    :root {
    --color-main: #113568;
    --spacing-32: 32px;
    --spacing-16: 16px;
    }
    .heading {
    color: var(--color-main);
    margin: var(--spacing-32) auto 0;
    }
    

    View Slide

35. ม਺͸ DPOTU΍ MFU
    const myName = '小山田晃浩';
    let myAge = 39;
    myAge = myAge + 1;
    

    View Slide

36. Ξϩʔؔ਺Ͱলུ
    const onClick = () => {
    myAge += 1;
    }
    // これまでの書き方
    const onClick = function() {
    myAge += 1;
    }
    

    View Slide

37. ϞδϡʔϧͱΠϯϙʔτ
    <br/>import Swiper from 'https://unpkg.com/swiper@7/swiper-bundle.esm.browser.js';<br/>const swiper = new Swiper(...);<br/>
    

    View Slide

38. ϙϦϑΟϧͳ͠Ͱ࢖͑Δ
    ͦͷଞͷػೳ
    Promise、async/await、class、Proxy、currentScript、
    new CustomEvent('....')、Symbol
    addEventListener() の {once: true}、
    IntersectionObserver
    などなど
    

    View Slide

39. https://caniuse.com/?compare=ie+11,edge+95&compareCats=all
    

    View Slide

40. 04͝ͱͷ&EHF
    04 Τϯδϯ දࣔ݁Ռͱ+4ػೳ
    8JOEPXT #MJOLʢ$ISPNJVNʣ
    5SJEFOUʢ*&NPEFʣ
    $ISPNFͱಉ༷
    NBD04 #MJOLʢ$ISPNJVNʣ $ISPNFͱಉ༷
    "OESPJE #MJOLʢ$ISPNJVNʣ $ISPNFͱಉ༷
    J04 8FC,JUʢ8,8FC7JFXʣ J044BGBSJʹ͍ۙ
    

    View Slide

41. Conclusion
    

    View Slide

42. w &EHFͰͰ͖Δ͜ͱ͕޿͕Δ
    w ࠾༻ٕज़ͷݟ௚͠
    w ։ൃ؀ڥͷݟ௚͠
    

    View Slide

43. ྫ͑͹ʜ
    

    View Slide

44. αΠζׂ͕ݮͬͨʂ
    #FGPSF "GUFS
    

    View Slide

45. ΋͏͙͢*&͸
    

    View Slide

46. ཟ৭ͷۭͷ
    ӢΑΓ΋ɺ΋ͬͱߴ͍ͱ͜Ζʹ
    ཱཱྀͪ·͢
    Ξδϡʔϧ
    Ϋϥ΢υ
    

    View Slide

47. Ͱ΋ɺ*&͸ͣͬͱ
    ΈΜͳͱ͍ͬ͠ΐͰ͢
    

    View Slide

48. ຊ౰ʹࠔͬͨΒʜ
    

    View Slide

49. *&ϞʔυͰ·ͨձ͑·͢ʂ
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. 5)"/,4
    !ZPNPUTV
    

    View Slide