IE to Edge - Speaker Deck

Slide 1

Slide 1 text

IE to Edge "LJIJSP0ZBNBEB

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

FrontEnd dev at PixelGrid, Inc. Akihiro Oyamada @yomotsu

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

A distribution of Chromium, A fork of WebKit

Slide 11

Slide 11 text

DEMO https://github.com/codegrid/2022-goodbye-ie/#readme

Slide 12

Slide 12 text

QJDUVSFͰϨεϙϯγϒը૾ 藍色の空に浮かぶ雲

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

͍Ζ͍ΖͳJOQVUλΠϓ month, week は Safari15 未対応

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

EFUBJMTͰ؆қΞίʔσΟΦϯ JSなしでもアコーディオンはできますか？はい、可能です

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

EJBMPHͰ Ϟʔμϧ΍πʔϧνοϓ

簡易モーダル

close open

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

EJBMPHͰ Ϟʔμϧ΍πʔϧνοϓ

簡易モーダル

close open

Slide 21

Slide 21 text

BEPXOMPBEͰϦϯΫઌΛอଘ 壁紙画像ダウンロード

Slide 22

Slide 22 text

"1/( 8FC1 8FC.

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

GJMUFSΛ͔ͭͬͨ৭ૢ࡞ IPWFSʹ΋ʁ .link { transition: filter .2s; } .link:hover { filter: brightness( 1.2 ); }

Slide 26

Slide 26 text

CBDLESPQGJMUFSͰ ॏͳΓ෦෼ʹϑΟϧλʔ .flyout__menu { position: absolute; background: rgba( 255, 255, 255, .5 ); -webkit-backdrop-filter: blur( 3px ); backdrop-filter: blur( 3px ); } Firefoxでは要フラグ、接頭辞不要 Chromium系は接頭辞不要 Safariでは-webkit-接頭辞が必要

Slide 27

Slide 27 text

NJYCMFOENPEFͰ ৭ϒϨϯυ .block { background: url( "./img_01.jpg" ) 50% 50% / cover; } .block__text { color: #66f; mix-blend-mode: multiply; }

Slide 28

Slide 28 text

എܠը૾ʹ͠ͳ͍Ͱ΋ දࣔʂPCKFDUGJU .image-container { width: 100%; height: 300px; } .image-container img { display: block; object-fit: cover; width: 100%; height: 100%; }

Slide 29

Slide 29 text

XFCLJU΋͔ͭ͑Δʂ XFCLJUUFYUTUSPLFͰԑऔΓจࣈ .text { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #000; color: yellow; } Firefoxでも-webkit-接頭辞が必要 WebKit, Chromium系は-webkit-必須

Slide 30

Slide 30 text

ςΩετͷృΓʹը૾΍άϥσ CBDLHSPVOEDMJQUFYU .text { color: transparent; background-image: url( "bg.png" ); -webkit-background-clip: text; background-clip: text; } Firefoxは接頭辞なし WebKit, Chromium系は-webkit-必須

Slide 31

Slide 31 text

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-接頭辞が必要

Slide 32

Slide 32 text

άϥσͷϚεΫͳΒ XFCLJUNBTL .image-container0 { -webkit-mask: url( “./mask.svg" ); mask: url( “./mask.svg" ); /* ※ file: の URL で CORS の制限を受けるので注意。*/ } clip-pathと違い、グラデーションも可能 Firefoxは接頭辞なし WebKit, Chromium系は-webkit-必須

Slide 33

Slide 33 text

ܧঝΛ໭ͤΔ JOJUJBMɺVOTFUɺSFWFSU #main em { color: red; font-style: normal; } .myDiv em { all: unset; }

Slide 34

Slide 34 text

WBSͰม਺Խ $44ͷ஋Λ·ͱΊͯ؅ཧ :root { --color-main: #113568; --spacing-32: 32px; --spacing-16: 16px; } .heading { color: var(--color-main); margin: var(--spacing-32) auto 0; }

Slide 35

Slide 35 text

ม਺͸ DPOTU΍ MFU const myName = '小山田晃浩'; let myAge = 39; myAge = myAge + 1;

Slide 36

Slide 36 text

Ξϩʔؔ਺Ͱলུ const onClick = () => { myAge += 1; } // これまでの書き方 const onClick = function() { myAge += 1; }

Slide 37

Slide 37 text

ϞδϡʔϧͱΠϯϙʔτ import Swiper from 'https://unpkg.com/swiper@7/swiper-bundle.esm.browser.js'; const swiper = new Swiper(...);

Slide 38

Slide 38 text

ϙϦϑΟϧͳ͠Ͱ࢖͑Δ ͦͷଞͷػೳ Promise、async/await、class、Proxy、currentScript、 new CustomEvent('....')、Symbol addEventListener() の {once: true}、 IntersectionObserver などなど

Slide 39

Slide 39 text

https://caniuse.com/?compare=ie+11,edge+95&compareCats=all

Slide 40

Slide 40 text

04͝ͱͷ&EHF 04 Τϯδϯ දࣔ݁Ռͱ+4ػೳ 8JOEPXT #MJOLʢ$ISPNJVNʣ 5SJEFOUʢ*&NPEFʣ $ISPNFͱಉ༷ NBD04 #MJOLʢ$ISPNJVNʣ $ISPNFͱಉ༷ "OESPJE #MJOLʢ$ISPNJVNʣ $ISPNFͱಉ༷ J04 8FC,JUʢ8,8FC7JFXʣ J044BGBSJʹ͍ۙ