Interop 2022

A presentation at W3C Developer meetup in September 2022 in Vancouver, BC, Canada by Rachel Andrew

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 4

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

Slide 5

Slide 5

“ 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

Slide 6

Slide 6

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

Slide 7

Slide 7

Slide 8

Slide 8

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

Slide 9

Slide 9

89$(0-‘

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

wpt.fyi/interop-2022 - September 2022

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

wpt.fyi/interop-2022 - September 2022

Slide 24

Slide 24

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

Slide 25

Slide 25

wpt.fyi/interop-2022 - September 2022

Slide 26

Slide 26

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

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

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

Slide 32

Slide 32

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

Slide 33

Slide 34

Slide 34

3&”#-+”B$”#

Slide 35

Slide 35

.item { contain: layout; }

Slide 36

Slide 36

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

Slide 37

Slide 37

Slide 38

Slide 38

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

Slide 39

Slide 39

K&%B,

Slide 40

Slide 40

Slide 41

Slide 41

4/%&77+”0

Slide 42

Slide 42

Slide 43

Slide 43

4A60%+<

Slide 44

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

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

Slide 47

Slide 47

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

Slide 48

Slide 48

Slide 49

Slide 49

:$6(3&B’-#

Slide 50

Slide 50

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

Slide 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

89-“D(1&A5 @rachelandrew