Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
IE to Edge
Search
yomotsu
February 03, 2022
Programming
1
340
IE to Edge
yomotsu
February 03, 2022
Tweet
Share
More Decks by yomotsu
See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
yomotsu
0
500
PBR in three.js
yomotsu
1
870
dialog要素でつくるモーダルダイアログ
yomotsu
0
980
A Camera Control Library for three.js
yomotsu
1
1.2k
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
540
WebXR: Beyond WebGL
yomotsu
2
1.8k
Non-DOM components with WebGL in Vue.js
yomotsu
5
12k
WebGL Libs for WebApp Frameworks
yomotsu
4
7.8k
How do you show assets loading?
yomotsu
1
990
Other Decks in Programming
See All in Programming
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
1
360
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
8
6.9k
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
250
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
530
gen_statem - OTP's Unsung Hero
whatyouhide
0
110
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
240
JavaOne 2025: Advancing Java Profiling
jbachorik
1
320
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
3
710
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
440
ミリしらMCP勉強会
watany
4
470
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
110
Featured
See All Featured
Building Your Own Lightsaber
phodgson
104
6.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
17
1.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Statistics for Hackers
jakevdp
798
220k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Transcript
IE to Edge "LJIJSP0ZBNBEB
None
FrontEnd dev at PixelGrid, Inc. Akihiro Oyamada @yomotsu
None
None
None
None
None
None
A distribution of Chromium, A fork of WebKit
DEMO https://github.com/codegrid/2022-goodbye-ie/#readme
QJDUVSFͰϨεϙϯγϒը૾ <picture> <source srcset="small.jpg" media="(max-width: 680px)" > <img src="large.jpg" alt="藍色の空に浮かぶ雲"
> </picture>
None
͍Ζ͍Ζͳ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 未対応
None
EFUBJMTͰ؆қΞίʔσΟΦϯ <details> <summary>JSなしでもアコーディオンはできますか?</summary> はい、可能です </details>
None
EJBMPHͰ Ϟʔμϧπʔϧνοϓ <dialog> <p>簡易モーダル</p> <button onclick="document.querySelector( 'dialog' ).close()"> close </button>
</dialog> <button onclick="document.querySelector( 'dialog' ).showModal()"> open </button>
None
EJBMPHͰ Ϟʔμϧπʔϧνοϓ <dialog> <p>簡易モーダル</p> <button onclick="document.querySelector( 'dialog' ).close()"> close </button>
</dialog> <button onclick="document.querySelector( 'dialog' ).showModal()"> open </button>
BEPXOMPBEͰϦϯΫઌΛอଘ <a href=“./wallpaper.jpg" download>壁紙画像ダウンロード</a>
"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>
None
None
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 MFU const myName = '小山田晃浩'; let myAge =
39; myAge = myAge + 1;
ΞϩʔؔͰলུ const onClick = () => { myAge += 1;
} // これまでの書き方 const onClick = function() { myAge += 1; }
ϞδϡʔϧͱΠϯϙʔτ <script type="module"> import Swiper from 'https://unpkg.com/swiper@7/swiper-bundle.esm.browser.js'; const swiper =
new Swiper(...); </script> </body> </html>
ϙϦϑΟϧͳ͠Ͱ͑Δ ͦͷଞͷػೳ Promise、async/await、class、Proxy、currentScript、 new CustomEvent('....')、Symbol addEventListener() の {once: true}、 IntersectionObserver
などなど
https://caniuse.com/?compare=ie+11,edge+95&compareCats=all
04͝ͱͷ&EHF 04 Τϯδϯ දࣔ݁Ռͱ+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
͏͙͢*&
ཟ৭ͷۭͷ ӢΑΓɺͬͱߴ͍ͱ͜Ζʹ ཱཱྀͪ·͢ Ξδϡʔϧ Ϋϥυ
Ͱɺ*&ͣͬͱ ΈΜͳͱ͍ͬ͠ΐͰ͢
ຊʹࠔͬͨΒʜ
*&ϞʔυͰ·ͨձ͑·͢ʂ
None
None
None
5)"/,4 !ZPNPUTV