IE to Edge"LJIJSP0ZBNBEB
View Slide
FrontEnd devat PixelGrid, Inc.Akihiro Oyamada@yomotsu
A distribution of Chromium,A fork of WebKit
DEMOhttps://github.com/codegrid/2022-goodbye-ie/#readme
QJDUVSFͰϨεϙϯγϒը૾srcset="small.jpg"media="(max-width: 680px)">src="large.jpg"alt="藍色の空に浮かぶ雲">
͍Ζ͍ΖͳJOQVUλΠϓmonth, week は Safari15 未対応
EFUBJMTͰ؆қΞίʔσΟΦϯJSなしでもアコーディオンはできますか?はい、可能です
EJBMPHͰϞʔμϧπʔϧνοϓ簡易モーダルcloseopen
BEPXOMPBEͰϦϯΫઌΛอଘ壁紙画像ダウンロード
"1/( 8FC1 8FC.
GJMUFSΛ͔ͭͬͨ৭ૢ࡞IPWFSʹʁ.link {transition: filter .2s;}.link:hover {filter: brightness( 1.2 );}
CBDLESPQGJMUFSͰॏͳΓ෦ʹϑΟϧλʔ.flyout__menu {position: absolute;background: rgba( 255, 255, 255, .5 );-webkit-backdrop-filter: blur( 3px );backdrop-filter: blur( 3px );}Firefoxでは要フラグ、接頭辞不要Chromium系は接頭辞不要Safariでは-webkit-接頭辞が必要
NJYCMFOENPEFͰ৭ϒϨϯυ.block {background: url( "./img_01.jpg" ) 50% 50% / cover;}.block__text {color: #66f;mix-blend-mode: multiply;}
എܠը૾ʹ͠ͳ͍ͰදࣔʂPCKFDUGJU.image-container {width: 100%;height: 300px;}.image-container img {display: block;object-fit: cover;width: 100%;height: 100%;}
XFCLJU͔ͭ͑ΔʂXFCLJUUFYUTUSPLFͰԑऔΓจࣈ.text {-webkit-text-stroke-width: 2px;-webkit-text-stroke-color: #000;color: yellow;}Firefoxでも-webkit-接頭辞が必要WebKit, Chromium系は-webkit-必須
ςΩετͷృΓʹը૾άϥσCBDLHSPVOEDMJQUFYU.text {color: transparent;background-image: url( "bg.png" );-webkit-background-clip: text;background-clip: text;}Firefoxは接頭辞なしWebKit, Chromium系は-webkit-必須
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-接頭辞が必要
άϥσͷϚεΫͳΒXFCLJUNBTL.image-container0 {-webkit-mask: url( “./mask.svg" );mask: url( “./mask.svg" );/* ※ file: の URL で CORS の制限を受けるので注意。*/}clip-pathと違い、グラデーションも可能Firefoxは接頭辞なしWebKit, Chromium系は-webkit-必須
ܧঝΛͤΔJOJUJBMɺVOTFUɺSFWFSU#main em {color: red;font-style: normal;}.myDiv em {all: unset;}
WBSͰมԽ$44ͷΛ·ͱΊͯཧ:root {--color-main: #113568;--spacing-32: 32px;--spacing-16: 16px;}.heading {color: var(--color-main);margin: var(--spacing-32) auto 0;}
ม DPOTU MFUconst myName = '小山田晃浩';let myAge = 39;myAge = myAge + 1;
ΞϩʔؔͰলུconst onClick = () => {myAge += 1;}// これまでの書き方const onClick = function() {myAge += 1;}
ϞδϡʔϧͱΠϯϙʔτ<br/>import Swiper from 'https://unpkg.com/swiper@7/swiper-bundle.esm.browser.js';<br/>const swiper = new Swiper(...);<br/>
ϙϦϑΟϧͳ͠Ͱ͑ΔͦͷଞͷػೳPromise、async/await、class、Proxy、currentScript、new CustomEvent('....')、SymboladdEventListener() の {once: true}、IntersectionObserverなどなど
https://caniuse.com/?compare=ie+11,edge+95&compareCats=all
04͝ͱͷ&EHF04 Τϯδϯ දࣔ݁Ռͱ+4ػೳ8JOEPXT #MJOLʢ$ISPNJVNʣ5SJEFOUʢ*&NPEFʣ$ISPNFͱಉ༷NBD04 #MJOLʢ$ISPNJVNʣ $ISPNFͱಉ༷"OESPJE #MJOLʢ$ISPNJVNʣ $ISPNFͱಉ༷J04 8FC,JUʢ8,8FC7JFXʣ J044BGBSJʹ͍ۙ
Conclusion
w &EHFͰͰ͖Δ͜ͱ͕͕Δw ࠾༻ٕज़ͷݟ͠w ։ൃڥͷݟ͠
ྫ͑ʜ
αΠζׂ͕ݮͬͨʂ#FGPSF "GUFS
͏͙͢*&
ཟ৭ͷۭͷӢΑΓɺͬͱߴ͍ͱ͜Ζʹཱཱྀͪ·͢ΞδϡʔϧΫϥυ
Ͱɺ*&ͣͬͱΈΜͳͱ͍ͬ͠ΐͰ͢
ຊʹࠔͬͨΒʜ
*&ϞʔυͰ·ͨձ͑·͢ʂ
5)"/,4!ZPNPUTV