A presentation at CSS Day in in Amsterdam, Netherlands by Rachel Andrew
!”#$%&’()*)) @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
For the first time ever, all major browser vendors, and other stakeholders, have come together to solve the top browsers compatibility issues identified by web developers. Interop 2022 will improve the experience of developing for the web in 15 key areas. In this talk, you’ll find out how we got here, what the project focuses on, how success will be measured, and how you can track progress.
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
