Interop 2022

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

)*))(+&&,-(+.,$(/”($01.#.”2(3$/%(4&%(5667 • Cascade Layers • New color functions • subgrid • accent-color • Container Queries • …and more!

!”#$%&’$%/8+$

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

“ 9:$(;<5(:/-($-#/8+.-:$=(-#/”=/%=-(4&%(.”#$%’%$#.”2( ;$8>8/-$=(1&”#$”#? @3(%$+$/-.”2(8%&A-$%-(A:.1:(=&(“&#(B”.4&%C+3(-B”&%#( #:&-$(-#/”=/%=-D(8%&A-$%(C/,$%-(/%$(.”EB%.”2(;$8( =$F$+&’$%-D(8B-.”$—$-(/”=(B-$%-(/+.,$? ” G/1,(&4(B”.4&%C(-B”&%#(4&%(;<5(-#/”=/%=-(C/,$-( B-.”2(/”=(=$F$+&’.”2(;$8>8/-$=(#$1:”&+&2.$-( B”“$1$—/%.+3(=.44.1B+#(/”=($0’$”-.F$? WaSP Baseline Standards Proposal, 1998, https://archive.webstandards.org/mission.html

6&4#A/%$(:/-(8B2-D(/”=(566(.-(1&C’+.1/#$=?

H$A(4$/#B%$-(+/”=( IB.1,+3 Each browser has its own set of priorities.

9:$ 2/’

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

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

JF$%3(8%&A-$%(A/”#-(#&(8$(8$##$%D(/”=(#&( .C’%&F$(#:$(‘+/#4&%C(4&%(=$F$+&’$%-?

!4($/1:(8%&A-$%(.C’+$C$”#-(&%(4.0$-(/(=.44$%$”#( 4$/#B%$D(#:$(2/’(2$#-(A&%-$?

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

wpt.fyi/interop-2022 - June 2022

;:/#(1/”(3&B($0’$1#K

L$/#B%$-(4%&C(5&C’/#()*)M

wpt.fyi/interop-2022 - June 2022

9:$(/-‘$1#>%/#.&(‘%&’$%#3

/-‘$1#>%/#.&N(MO(P(QR

.wrapper { display: grid; grid-template-columns: 200px 350px; } .box16x9 { aspect-ratio: 16/9; } .box4x3 { aspect-ratio: 4/3; }

L+$08&0

.container { display: flex; gap: 1em; }

.container { display: flex; gap: 1em; align-items: self-start; }

L+&A>%$+/#.F$(/+.2”C$”#N(-#/%#(/”=(-$+4>-#/%# • • start: relates to the script direction of the container. self-start: relates to the script direction of the item.

6#.1,3(‘&-.#.&”.”2

H$A(4$/#B%$-(4&%(!”#$%&’()*))

wpt.fyi/interop-2022 - June 2022

5/-1/=$(G/3$%-

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

5&+&%(6’/1$-(/”=(LB”1#.&”-

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

H$A(1&+&%(4B”1#.&”-

1&+&%>C.0ST 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); }

1&+&%>1&”#%/-#ST Select from a list of colors the color with the highest contrast to a specified single color.

:root { —background: #ccc; } .box { background-color: var(—background); color: color-contrast(var(—background) vs #000, #fff); } .box2 { —background: pink; } .box3 { —background: rgb(155, 23, 23); } .box4 { —background: hsl(100, 90%, 35%); } .box5 { —background: lch(19.245% 44.2 57); }

5&”#/.”C$”#

.item { contain: layout; }

9:$(U=./+&2V($+$C$”#

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

L&%C-

61%&++.”2

6B82%.=

.grid { display: grid; grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end]; } .grid > * { grid-column: main ; } .grid > .full { grid-column: full; display: grid; grid-template-columns: subgrid; } .center { grid-column: main; }

.wrapper { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); /* no defined explicit rows */ grid-auto-rows: minmax(100px, auto); } .items { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(100px, auto); } .fullheight { background-color: rgb(209,54,114); grid-row: 1 / -1; }

93’&2%/’:3(/”=(J”1&=.”2-

9:$(.1 B”.#( Equal to the used advance measure of the “水” (CJK water ideograph, U+6C34) glyph.

W.$A’&%#(X”.#-

;$8(5&C’/#

)*))(!”F$-#.2/#.&”

J/1:(4.0(.-(&”$(+$—(#:.”2(3&B(%B”(.”#&?

J/1:(“$A(4$/#B%$(+/”=.”2(1%&—>8%&A-$%(C/,$-( -&(CB1:(C&%$(‘&—.8+$?

!”#$%&’ )*)<K https://github.com/web-platform-tests/interop-2022/issues/78

9:/”,(3&B7 @rachelandrew