Browser compatibility in an evergreen world

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

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

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

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

“

?&’@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

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

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

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

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

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

!”#$%&”’.D3%

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

:”&+,&’+’”&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.

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

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

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

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

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

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

?&’3+*

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

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

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

=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.

wpt.fyi/interop-2022 (March 2022)

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

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

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

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

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

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

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

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

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

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

@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; } }

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

K#/09-//%

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

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

K#%,:;;

OD,#*”&9-8&”

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

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

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

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

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

W&,,-13’.D0B-1

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

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

?&’(#%,’#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.

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

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

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

?+17’0#D< @rachelandrew