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
330
IE to Edge
yomotsu
February 03, 2022
Tweet
Share
More Decks by yomotsu
See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
yomotsu
0
470
PBR in three.js
yomotsu
1
850
dialog要素でつくるモーダルダイアログ
yomotsu
0
970
A Camera Control Library for three.js
yomotsu
1
1.2k
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
530
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
980
Other Decks in Programming
See All in Programming
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
790
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
0
100
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
120
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
640
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
Swift Testingのモチベを上げたい
stoticdev
2
150
Ça bouge du côté des animations CSS !
goetter
2
160
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
iOSでQRコード生成奮闘記
ktcryomm
2
110
Jakarta EE meets AI
ivargrimstad
0
530
AWS Step Functions は CDK で書こう!
konokenj
4
780
Featured
See All Featured
Site-Speed That Sticks
csswizardry
4
410
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Git: the NoSQL Database
bkeepers
PRO
428
65k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Adopting Sorbet at Scale
ufuk
75
9.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
RailsConf 2023
tenderlove
29
1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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