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

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/

Notable Publications since TPAC

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 - subgridhttps://www.w3.org/TR/css-grid-2/

Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew

.subitem {grid-column: 3 / 6;grid-row: 1 / 3;

}

.grid {display: grid;grid-template-columns: repeat(9, 1fr);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;

}

Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew

Rachel Andrew, Fronteers. Slides: https://noti.st/rachelandrew

Conic Gradientshttps://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 Scrollbarshttps://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 Snaphttps://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 Containmenthttps://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