What’s New In CSS?
A presentation at W3C AC Meeting in in Quebec City, QC, Canada by Rachel Andrew
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew What’s New In CSS? Rachel Andrew, CSS WG member on behalf of Fronteers.
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew Notable Publications since TPAC https://www.w3.org/TR/css-transforms-1/ https://www.w3.org/TR/css-values-3/ https://www.w3.org/TR/css-scroll-snap-1/ https://www.w3.org/TR/css-break-3/ https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-contain-1/ https://www.w3.org/TR/selectors-3/
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew Lots of new things for the web platform
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew CSS Grid Level 2 - subgrid https://www.w3.org/TR/css-grid-2/
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew .grid { display: grid; grid-column: 3 / 6; grid-template-columns: repeat(9, 1fr); grid-row: 1 / 3; grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { }
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew Conic Gradients https://www.w3.org/TR/css-images-4/#conic-gradients
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew .cone { width: 200px; height: 200px; background: conic-gradient(orange, green, orange); border-radius: 50%; margin: 20px; }
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew .chart { width: 200px; height: 200px; background: conic-gradient(red 35%, green 35%, green 65%, orange 65%, orange 90%, yellow 90%); border-radius: 50%; margin: 20px; }
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew .pacman { width: 200px; height: 200px; background: conic-gradient(yellow 0%, yellow 15%, white 15%, white 35%, yellow 35%); border-radius: 50%; margin: 20px; }
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew CSS Scrollbars https://www.w3.org/TR/css-scrollbars-1/
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew .list { height: 400px; width: 250px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: rebeccapurple hotpink; }
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew CSS Scroll Snap https://www.w3.org/TR/css-scroll-snap-1/
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew body { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; } img { width: 31vw; height: 300px; margin: 0 3.5vw 0 0; object-fit: cover; scroll-snap-align: start; }
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew .list { height: 400px; width: 250px; overflow-y: scroll; scroll-snap-type: y mandatory; } .list li { scroll-snap-align: start; }
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew CSS Containment https://www.w3.org/TR/css-contain-1/
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew .box { contain: strict; }
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew Example by Manuel Rego Casasnovas: https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/
Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew Thank you! https://noti.st/rachelandrew/Kr6L2U/whats-new-in-css
A lightning talk for the W3C AC Meeting. This is a somewhat biased look at new things in CSS - biased in terms of these being things that mostly have some implementation. Also in terms of these being things I know that authors are especially interested in right now.
Code
The following code examples from the presentation can be tried out live.
Resources
The following resources were mentioned during the presentation or are useful additional information.
