Interop 2022

A presentation at CSS Day in June 2022 in Amsterdam, Netherlands by Rachel Andrew

Slide 1

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

Slide 2

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

Slide 3

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

Slide 4

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

Slide 5

“ 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

Slide 6

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

Slide 7

Slide 8

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

Slide 9

9:$ 2/’

Slide 10

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

Slide 11

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

Slide 12

Slide 13

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

Slide 14

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

Slide 15

Slide 16

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

Slide 17

wpt.fyi/interop-2022 - June 2022

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

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

Slide 23

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

Slide 24

wpt.fyi/interop-2022 - June 2022

Slide 25

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

Slide 26

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

Slide 27

Slide 28

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

Slide 29

Slide 30

Slide 31

L+$08&0

Slide 32

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

Slide 33

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

Slide 34

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.

Slide 35

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

Slide 36

Slide 37

Slide 38

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

Slide 39

wpt.fyi/interop-2022 - June 2022

Slide 40

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

Slide 41

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

Slide 42

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

Slide 43

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

Slide 44

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

Slide 45

1&+&%>C.0ST Take two colors and return the result of mixing them in a specified color space by a specified amount.

Slide 46

.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); }

Slide 47

Slide 48

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

Slide 49

: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); }

Slide 50

Slide 51

5&”#/.”C$”#

Slide 52

.item { contain: layout; }

Slide 53

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

Slide 54

Slide 55

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

Slide 56

L&%C-

Slide 57

Slide 58

61%&++.”2

Slide 59

Slide 60

6B82%.=

Slide 61

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

Slide 62

Slide 63

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