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
280
IE to Edge
yomotsu
February 03, 2022
Tweet
Share
More Decks by yomotsu
See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
yomotsu
0
120
PBR in three.js
yomotsu
1
730
dialog要素でつくるモーダルダイアログ
yomotsu
0
860
A Camera Control Library for three.js
yomotsu
1
910
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
500
WebXR: Beyond WebGL
yomotsu
2
1.5k
Non-DOM components with WebGL in Vue.js
yomotsu
5
12k
WebGL Libs for WebApp Frameworks
yomotsu
4
7.7k
How do you show assets loading?
yomotsu
1
940
Other Decks in Programming
See All in Programming
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
340
Netty Chicago Java User Group 2024-04-17
sullis
0
180
雑に思考を整理する技術と効能
konifar
60
29k
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
What We Can Learn From OSS
inouehi
0
420
Elm 0.19.0 Changes
bkuhlmann
0
490
PHPはいつから死んでいるかの調査
chiroruxx
1
400
Ruby Pattern Matching
bkuhlmann
0
930
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
180
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
32
12k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
The Language of Interfaces
destraynor
151
23k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Documentation Writing (for coders)
carmenintech
60
3.9k
KATA
mclloyd
15
12k
Why Our Code Smells
bkeepers
PRO
331
56k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
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