A presentation at An Event Apart Spring Summit by Rachel Andrew
!”#$%&”’(#)*+,-.-/-,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
Take a look at any survey of web developers, and you’ll find browser compatibility and differences between browsers top the list of problems we all face. Maybe some things never change, but browser compatibility issues in 2022 are quite different to those we faced 10 or even 5 years ago. In this talk, Rachel will show you practical ways to cope with today’s browser differences. You’ll also find out how to keep track of when new features land cross-browser, and how to decide when a new feature is safe to use.
The following resources were mentioned during the presentation or are useful additional information.
