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

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. ͍Ζ͍Ζͳ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 未対応
  2. "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>
  3. CBDLESPQGJMUFSͰ ॏͳΓ෦෼ʹϑΟϧλʔ .flyout__menu { position: absolute; background: rgba( 255, 255,

    255, .5 ); -webkit-backdrop-filter: blur( 3px ); backdrop-filter: blur( 3px ); } Firefoxでは要フラグ、接頭辞不要 Chromium系は接頭辞不要 Safariでは-webkit-接頭辞が必要
  4. NJYCMFOENPEFͰ ৭ϒϨϯυ .block { background: url( "./img_01.jpg" ) 50% 50%

    / cover; } .block__text { color: #66f; mix-blend-mode: multiply; }
  5. ςΩετͷృΓʹը૾΍άϥσ CBDLHSPVOEDMJQUFYU .text { color: transparent; background-image: url( "bg.png" );

    -webkit-background-clip: text; background-clip: text; } Firefoxは接頭辞なし WebKit, Chromium系は-webkit-必須
  6. 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-接頭辞が必要
  7. άϥσͷϚεΫͳΒ XFCLJUNBTL .image-container0 { -webkit-mask: url( “./mask.svg" ); mask: url(

    “./mask.svg" ); /* ※ file: の URL で CORS の制限を受けるので注意。*/ } clip-pathと違い、グラデーションも可能 Firefoxは接頭辞なし WebKit, Chromium系は-webkit-必須
  8. WBSͰม਺Խ $44ͷ஋Λ·ͱΊͯ؅ཧ :root { --color-main: #113568; --spacing-32: 32px; --spacing-16: 16px;

    } .heading { color: var(--color-main); margin: var(--spacing-32) auto 0; }
  9. Ξϩʔؔ਺Ͱলུ const onClick = () => { myAge += 1;

    } // これまでの書き方 const onClick = function() { myAge += 1; }
  10. 04͝ͱͷ&EHF 04 Τϯδϯ දࣔ݁Ռͱ+4ػೳ 8JOEPXT #MJOLʢ$ISPNJVNʣ 5SJEFOUʢ*&NPEFʣ $ISPNFͱಉ༷ NBD04 #MJOLʢ$ISPNJVNʣ

    $ISPNFͱಉ༷ "OESPJE #MJOLʢ$ISPNJVNʣ $ISPNFͱಉ༷ J04 8FC,JUʢ8,8FC7JFXʣ J044BGBSJʹ͍ۙ