Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

WWDC23 · 35 min · Safari & Web

What’s new in CSS

Explore the latest advancements in CSS. Learn techniques and best practices for working with wide-gamut color, creating gorgeous typography, and writing simple and robust code. We’ll also peer into the future and preview upcoming layout and typography features.

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 5 snippets

Masonry layout, example 1 markdown · at 2:49 ↗ 
main {
	display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	grid-template-rows: masonry;
}
Masonry layout, example 2 markdown · at 3:20 ↗ 
main {
	display: grid;
  grid-template-columns: 1fr 2fr 3fr;
	grid-template-rows: masonry;
}
Masonry layout, example 3 markdown · at 3:24 ↗ 
main {
	display: grid;
  grid-template-columns: 10rem 1fr minmax(100px, 300px);
	grid-template-rows: masonry;
}
Margin trim markdown · at 5:28 ↗ 
.card {
  background-color: #fcf5e7;
  padding: 2rlh;
  margin-trim: block;
}
h2, p {
  margin: 1rlh 0;
}
Color gamut media query markdown · at 7:25 ↗ 
.card {
  background-color: #fcf5e7;
  padding: 2rlh;
  margin-trim: block;
}
h2, p {
  margin: 1rlh 0;
}

Resources