Interop 2022

!”#$%&’()*)) @rachelandrew

)*))(+,(-“($./+#+”0(1$-%(2&%(3445 • Cascade Layers • New color functions • subgrid • accent-color • Container Queries • …and more!

!”#$%&’$%-67$

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

“ 89$(:;3(9-,($,#-67+,9$<(,#-“<-%<,(2&%(+”#$%’%$#+”0( :$6=6-,$<(/&”#$”#> ?1(%$7$-,+”0(6%&@,$%,(@9+/9(<&(“&#(A”+2&%B71(,A”&%#( #9&,$(,#-“<-%<,C(6%&@,$%(B-D$%,(-%$(+”EA%+”0(:$6( <$F$7&’$%,C(6A,+”$,,$,(-“<(A,$%,(-7+D$> ” G-/D(&2(A”+2&%B(,A”&%#(2&%(:;3(,#-“<-%<,(B-D$,( A,+”0(-“<(<$F$7&’+”0(:$6=6-,$<(#$/9”&7&0+$,( A”“$/$,,-%+71(<+22+/A7#(-“<($.’$”,+F$> WaSP Baseline Standards Proposal, 1998, https://archive.webstandards.org/mission.html

4&2#@-%$(9-,(6A0,C(-“<(344(+,(/&B’7+/-#$<>

H$@(2$-#A%$,(7-“<( IA+/D71 Each browser has its own set of priorities.

89$(0-‘

https://2021.stateofcss.com/en-US/opinions/#css_pain_points_wins

https://insights.developer.mozilla.org/

JF$%1(6%&@,$%(@-“#,(#&(6$(6$##$%C(-“<(#&( +B’%&F$(#9$(‘7-#2&%B(2&%(<$F$7&’$%,>

!2($-/9(6%&@,$%(+B’7$B$”#,(&%(2+.$,(-(<+22$%$”#( 2$-#A%$C(#9$(0-‘(0$#,(@&%,$>

!”#$%&’()*))

wpt.fyi/interop-2022 - September 2022

!”/7A<$<(2$-#A%$,

K$-#A%$,(2%&B(3&B’-#()*)L

wpt.fyi/interop-2022 - September 2022

H$@(2$-#A%$,(2&%(!”#$%&’()*))

wpt.fyi/interop-2022 - September 2022

3-,/-<$(G-1$%,

@layer base, special; @layer special { .item { color: rgb(209,54,114); } } @layer base { .item { color: black; } }

3&7&%(4’-/$,(-“<(KA”/#+&”,

https://www.visibone.com/color/poster.html

H$@(/&7&%(2A”/#+&”,

/&7&%=B+.MN Take two colors and return the result of mixing them in a specified color space by a specified amount.

.box2 { background-color: color-mix(in lch, white 10%, darkblue); } .box3 { background-color: color-mix(in lch, white 30%, darkblue); } .box4 { background-color: color-mix(in lch, white 50%, darkblue); } .box5 { background-color: color-mix(in lch, white 70%, darkblue); }

3&”#-+”B$”#

.item { contain: layout; }

89$(O<+-7&0P($7$B$”#

https://web.dev/building-a-dialog-component/

K&%B,

4/%&77+”0

4A60%+<

https://gridbyexample.com/examples/#css-grid-level-2-examples

81’&0%-‘91(-“<(J”/&<+”0,

89$(+/ A”+#( Equal to the used advance measure of the “水” (CJK water ideograph, U+6C34) glyph.

Q+$@’&%#(R”+#,

:$6(3&B’-#

)*))(!”F$,#+0-#+&”

J-/9(2+.(+,(&”$(7$,,(#9+”0(1&A(%A”(+”#&>

J-/9(“$@(2$-#A%$(7-“<+”0(/%&,,=6%&@,$%(B-D$,( ,&(BA/9(B&%$(‘&,,+67$>

!”#$%&’()*);(‘%&’&,-7,(&’$”(4$’#$B6$%(LS#9 https://github.com/web-platform-tests/interop/blob/main/2023/README.md

89-“D(1&A5 @rachelandrew