CSS 2020 Tour

• More than 100 specifications
• Around 600 properties and descriptors
• ⇨ Cannot cover everything

Grouping topics by area

• Syntax and language features
• UI and Interaction
• Colors and Preferences
• Layout
• Typography
• Houdini

Syntax & language features

Upcoming:

Range syntax for media queries (Landed in Firefox, Chrome bug)

 media (max-width: 300px) {
	…
}

becomes

@media (width <= 300px) {
 	…
}

@supports: selector() (Firefox 69+)

Future?

Custom Cascade Origins

An idea from Jen Simmons & Miriam Suzzane

Cascade Origins

Custom Cascade Origins

Why Custom Cascade Origins

UI & Interaction

Work In Progress:

Stabilize and standardize appearance

Spatial navigation (demo1, demo2)

Upcoming:

:focus-visible (Chrome 67+, with a flag)

scrollbar-color and scrollbar-width (Firefox 64+)

::spelling-error, ::grammar-error

Future?

caret-shape & caret-animation

Scrollbar gutters

User Preferences & Colors

Landed:

@media (prefers-reduced-motion) (Chrome 74+)

@media (prefers-color-scheme), aka. “dark mode” (Chrome 76+)

Upcoming:

Forced Colors (Edge proposal)

Inverted Colors (Safari9.1+)

Future?

@media (prefers-reduced-transparency: no-preference | reduce) {…}
@media (prefers-contrast: no-preference | high | low) {…}

Layout

Work In Progress:

line-clamp

Upcoming:

Subgrid (Firefox 71+)

Future?

Masonry Layout

Multicol fragmentation (Illustration)

Fragmentation on Demand

Evolution of line-clamp (1)

line-clamp allows authors to suppress
the text after a certain number of lines a…

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

Evolution of line-clamp (2)

line-clamp allows authors to suppress
the text after a certain number of lines…

p {
  line-clamp: 2;
}

p {
  line-clamp: 2;
  block-ellipsis: "…";
}

Evolution of line-clamp (3)

line-clamp allows authors to suppress
the text after a certain (continued)

p {
  line-clamp: 2;
  block-ellipsis: "(continued)";
}

p {
  continue: discard;
  max-lines: 2;
  block-elipsis: "…";
}

Beyond line-clamp

article { continue: fragments; }
article:nth-fragment(1) {
	max-lines: 3;
	font-size: 1.5em;
}
article:nth-fragment(2) {
	columns: 3;
}

Typography

Work In Progress:

line-breaking controls (Presentation, Full Video, Short Video)

Future?

Line height controls (line-sizing & leading-trim)

Hyphenation Controls

Spacing Controls

text-wrap-inside / text-wrap-before / text-wrap-after

Text decoration controls

Houdini

Infrastructure:

Worklets (Spec: ✅, Chrome: 65+)

Typed OM (Spec: WIP, Chrome: 66+)

CSS Properties and Values API (JS) (Spec: ✅, Chrome: 66+)

CSS Properties and Values API (@property) (Spec: ✅, Chrome: ❌)

Applications:

CSS Painting API (Spec: ✅, Chrome: 65+)

CSS Layout API (Spec: WIP Chrome: WIP)

Possible future developments:

Font Metrics API

CSS Parser API

Houdini example—Part 1

CSS.registerProperty({
	name: '--circle-color',
	syntax: '<color>',
	initialValue: 'black',
	inherits: false
});

@property --circle-color {
	syntax: "<color>";
	initial-value: black;
	inherits: false;
}

Houdini example—Part 2

CSS.paintWorklet.addModule('circle.js');

registerPaint('circle', class {
 static get inputProperties() {return ['--circle-color'];}
 paint(ctx, geom, properties) {
  const color = properties.get('--circle-color');
  const x = geom.width / 2;
  const y = geom.height / 2;
  const radius = Math.min(x, y);
  ctx.fillStyle = color.toString();
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
  ctx.fill();
 }
});

Houdini example—Part 3

.circled {
  --circle-color: pink;
  background: paint(circle);
}

.circled {
  animation: colors linear infinite 5s;
}
@keyframes colors {
  0% { --circle-color: green; }
  40% { --circle-color: purple; }
  60% { --circle-color: orange; }
  100% { --circle-color: green; }
}