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
310
IE to Edge
yomotsu
February 03, 2022
Tweet
Share
More Decks by yomotsu
See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
yomotsu
0
360
PBR in three.js
yomotsu
1
810
dialog要素でつくるモーダルダイアログ
yomotsu
0
940
A Camera Control Library for three.js
yomotsu
1
1.1k
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
520
WebXR: Beyond WebGL
yomotsu
2
1.7k
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
970
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
590
みんなでプロポーザルを書いてみた
yuriko1211
0
280
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
Quine, Polyglot, 良いコード
qnighy
4
650
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.1k
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
役立つログに取り組もう
irof
28
9.6k
CSC509 Lecture 11
javiergs
PRO
0
180
Jakarta EE meets AI
ivargrimstad
0
660
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
140
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Documentation Writing (for coders)
carmenintech
65
4.4k
Embracing the Ebb and Flow
colly
84
4.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
For a Future-Friendly Web
brad_frost
175
9.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Designing the Hi-DPI Web
ddemaree
280
34k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
How to Ace a Technical Interview
jacobian
276
23k
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