$30 off During Our Annual Pro Sale. View Details »

IE to Edge

yomotsu
February 03, 2022

IE to Edge

yomotsu

February 03, 2022
Tweet

More Decks by yomotsu

Other Decks in Programming

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