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
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
920
PEPCは何を変えようとしていたのか
ken7253
2
240
AIプログラミング雑キャッチアップ
yuheinakasaka
18
4.4k
Ruby on cygwin 2025-02
fd0
0
180
GoとPHPのインターフェイスの違い
shimabox
2
210
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
Formの複雑さに立ち向かう
bmthd
1
940
CloudNativePGを布教したい
nnaka2992
0
110
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
310
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Embracing the Ebb and Flow
colly
84
4.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Unsuck your backbone
ammeep
669
57k
The Invisible Side of Design
smashingmag
299
50k
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