Browser compatibility in an evergreen world

A presentation at An Event Apart Spring Summit in April 2022 in by Rachel Andrew

Slide 1

Slide 1

!”#$%&”’(#)*+,-.-/-,0’-1’ +1’&2&”3”&&1’$#”/4 @rachelandrew

Slide 2

Slide 2

Slide 3

Slide 3

5655’/##7%’/-7&’+1’&8(-,-13’0&+“‘9#”’:;;< • Cascade Layers • New color functions • subgrid • accent-color • Container Queries • …and more!

Slide 4

Slide 4

=1,&”#*&”+./&

Slide 5

Slide 5

div.content { width:400px; voice-family: “”}”“; voice-family:inherit; width:300px; } http://tantek.com/CSS/Examples/boxmodelhack.html

Slide 6

Slide 6

?&’@A:’?+%’&%,+./-%?&4’%,+14+”4%’9#”’-1,&”“&,-13’ @&.B.+%&4’(#1,&1,C !0’”&/&+%-13’.”#$%&”%’$?-(?’4#’1#,’D1-9#”)/0’%D**#”,’ ,?#%&’%,+14+”4%E’.”#$%&”’)+7&”%’+”&’-1FD”-13’@&.’ 4&2&/#&”%E’.D%-1&%%&%’+14’D%&”%’+/-7&C ” G+(7’#9’D1-9#”)’%D**#”,’9#”’@A:’%,+14+”4%’)+7&%’ D%-13’+14’4&2&/#-13’@&.B.+%&4’,&(?1#/#3-&%’ D11&(&%%+”-/0’4-99-(D/,’+14’&8&1%-2&C WaSP Baseline Standards Proposal, 1998, https://archive.webstandards.org/mission.html

Slide 7

Slide 7

;#9,$+”&’?+%’.D3%E’+14’:;;’-%’(#)*/-(+,&4C

Slide 8

Slide 8

Slide 9

Slide 9

H#$’%?#D/4’,?-%’+(&’#9’-)“#2&)&1,’”&9/&(,’-1’ #D”’.”#$%&”’%D**#”,’*#/-(-&%I

Slide 10

Slide 10

J#D’+”&’1#,’+’.+4’4&2&/#&”’-9’0#D’4#’1#,’ -))&4-+,&/0’+4#,’1&$’,?-13%C

Slide 11

Slide 11

!&’+’)+3*-&E’-(7’D‘&1#D3?’71#$/&43&’,#’ 71#$’$?&1’+’1&$’,?-13’)-3?,’%#/2&’+’*”#./&)C

Slide 12

Slide 12

H#$’%?#D/4’$&’+**”#+(?’.”#$%&”’ (#)*+,-.-/-,0’,#4+0I

Slide 13

Slide 13

!”#$%&”’.D3%

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

G&+”1’?#$’,#’-%#/+,&’+14’-4&1,-90’.D3%

Slide 18

Slide 18

:”&+,&’+’”&4D(&4’,&%,’(+%& • Use a shareable environment such as CodePen, Glitch or jsFiddle. • Remove everything that doesn’t change the buggy behavior. • Don’t forget polyfills, post-processors, framework CSS or JavaScript.

Slide 19

Slide 19

K”#./&)’&8-%,%’.&,$&&1’7&0.#+”4’+14’(?+-“

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

!”#$%&”’.D3’,”+(7&”% • https://bugzilla.mozilla.org/home • https://bugs.webkit.org/describecomponents.cgi?product=WebKit • https://bugs.chromium.org/p/chromium/issues/list

Slide 23

Slide 23

L1(&’0#D’D14&”%,+14’+’.D3E’ -,M%’#9,&1’*#%%-./&’,#’$#”7’”#D14’-,C

Slide 24

Slide 24

=’9#D14’+’1&$’.D3<

Slide 25

Slide 25

N&*#”,’-,’,#’,?&’.”#$%&“‘0#D’,?-17’?+%’,?&’-%%D&’ D%-13’,?&-“’.D3’,”+(7&”C

Slide 26

Slide 26

O44’0#D”’”&4D(&4’,&%,’(+%&’,#’,?&’.D3

Slide 27

Slide 27

Slide 28

Slide 28

?&’3+*

Slide 29

Slide 29

P8*&”-)&1,+/’-)*/&)&1,+,-#1%

Slide 30

Slide 30

:#1,+-1&“‘QD&”-&% Experimentation started in Chrome, lots of changes as the specification is refined.

Slide 31

Slide 31

K”-#”-,-R+,-#1’

Slide 32

Slide 32

=1,&”#*’5655’9#(D%’+”&+% Cascade layers, CSS Color Spaces, Color functions, new viewport units, scrolling, subgrid, the contain property, the <dialog> element, form controls, typography and encodings, web compat, flexbox, grid, position: sticky, aspect-ratio, CSS transforms.

Slide 33

Slide 33

wpt.fyi/interop-2022 (March 2022)

Slide 34

Slide 34

H#$’%?#D/4’$&.’4&2&/#&”%’4&+/’$-,?’,?&’3+’ .&,$&&1’-)*/&)&1,+,-#1%I’

Slide 35

Slide 35

S%-13’,?&’(+%(+4&

Slide 36

Slide 36

.box { color: color-contrast(var(—background) vs #000, #fff); }

Slide 37

Slide 37

.box { background-color: var(—background); color: color-contrast(var(—background) vs #000, #fff); }

Slide 38

Slide 38

<div class=”example”> <div class=”sidebar”>Sidebar</div> <div class=”content”>…</div> </div> .container { display: grid; grid-template-columns: 1fr 3fr; } .sidebar { float: left; }

Slide 39

Slide 39

T&+,D”&’QD&”-&%’ U%D**#”,%

Slide 40

Slide 40

T&+,D”&’VD&”-&%’,&%,’-9’+’.”#$%&”’(+1’+”%&’+’ +”,-(D/+”’”#&”,0’+14’2+/D&’*+-“

Slide 41

Slide 41

@supports (gap: 1em) { /* code used if gap is supported in any context */ }

Slide 42

Slide 42

@supports not selector(:is(a, b)) { /* Fallback for when :is() is unsupported */ }

Slide 43

Slide 43

P1?+1(-13’(#)*#1&1,%’$-,?’9&+,D”&’VD&”-&%

Slide 44

Slide 44

Slide 45

Slide 45

Slide 46

Slide 46

;D.3”-4’-%’+”,’#9’=1,&”#‘5655C’=,M%’(#)-13’,#’ 0#D”’.”#$%&”’%##1C

Slide 47

Slide 47

@supports (grid-template-rows: subgrid) { .pricing { grid-template-rows: auto 1fr auto; row-gap: 0; } .pricing > li { grid-row: 1 / -1; grid-template-rows: subgrid; } }

Slide 48

Slide 48

@supports (contain: inline-size) { /* Container query code here / } @supports not (contain: inline-size) { / Media query based fallback */ }

Slide 49

Slide 49

K#/09-//%

Slide 50

Slide 50

Slide 51

Slide 51

const supportsContainerQueries = “container” in document.documentElement.style; if (!supportsContainerQueries) { import(“container-query-polyfill”); }

Slide 52

Slide 52

O’#/09-//’-1,”#4D(&%’+1#,?&”’/+(&’9#”’.D330’ .&?+2-#”’,#’(“&&*’-1

Slide 53

Slide 53

K#%,:;;

Slide 54

Slide 54

OD,#*”&9-8&”

Slide 55

Slide 55

@”-,&’,#)#”“#$M%’:;;’,#4+0’$-,?’ #%,(%%B“&%&,B&12

Slide 56

Slide 56

a{ color: rgb(0, 0, 255, 0.9); &:hover { color: rebeccapurple; } }

Slide 57

Slide 57

a{ color: rgba(0, 0, 255, 0.9); } a:hover { color: rebeccapurple; }

Slide 58

Slide 58

Slide 59

Slide 59

J#D’?+2&’#*,-#1%

Slide 60

Slide 60

:?##%&’#*,-#1%’,?+,’+//#$’0#D’,#’&+%-/0’”&)#2&’ ,?&’9+//.+(7’(#4&’$?&1’1#’/#13&”’”&VD-“&4C

Slide 61

Slide 61

W&,,-13’.D0B-1

Slide 62

Slide 62

@&’?+2&’,#’”&4&9-1&’,?&’1+”“+,-2&’+”#D14’ .”#$%&”’%D**#”,’$-,?’#D”’,&+)’#”’(/-&1,%C

Slide 63

Slide 63

X&9-1&’$?+,’0#D’)&+1’$?&1’0#D’,+/7’+.#D,’ Y.”#$%&”’%D**#”,ZC

Slide 64

Slide 64

?&’(#%,’#9’Y)+7&’-,’/##7’,?&’%+)&Z • Development is more time-consuming and expensive. • Additional code makes the site slower. • Complex fallback code needs maintenance creating an ongoing cost. • Developer frustration and burnout.

Slide 65

Slide 65

;?#$’&8+)/&%’#9’%-,&%’,?+,’4#’“#3”&%%-2&’ &1?+1(&)&1,’$&//E’#”’.D-/4’#D,’+’(#)*#1&1,’#”’,$#C

Slide 66

Slide 66

@&’?+2&’,#’)#2&’+$+0’9”#)’+1’-4&+’#9’.”#$%&”’ %D**#”,’,?+,’-%’,-&4’,#’*+%,’”&/&+%&’%(?&4D/&%C

Slide 67

Slide 67

TD,D”&B*”##9’4&2&/#*)&1,

Slide 68

Slide 68

?+17’0#D< @rachelandrew