CSS 2019 Tour

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

Grouping topics by area

• Syntax and language features
• UI and Interaction
• Layout
• Typography
• Painting and FX
• Other things

Syntax & language features

Upcoming:

CSS Shadow Parts (Chrome 69+ under flag)

Constructable Stylesheets (Chrome 73+)

Future?

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

or

@switch {
	media((width < 300px)) {
		…
	}
	default {
		…
	}
}

UI & Interaction

Landed:

CSS Scroll Anchoring (Chrome 56+)

CSS Overscroll Behavior (Chrome 63+)

CSS Scroll Snap (Chrome 69+) (demo)

Upcoming:

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

scrollbar-color and scrollbar-width

::selection, ::spelling-error, ::grammar-error

Stabilize and standardize appearance

Future?

Spatial navigation (demo1, demo2)

caret-shape & caret-animation

Layout

Upcoming:

Subgrid

line-clamp

Future?

aspect-ratio

Multicol fragmentation (Illustration)

Fragmentation on Demand

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

Typography

Landed:

Variable Fonts

Upcoming:

line-breaking controls (Presentation, Video)

Future?

Initial letter

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

Hyphenation Controls

Spacing Controls

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

Text decoration controls

Paintinng and FX

Landed:

Conic gradient (Chrome 69+)

background: conic-gradient(at 69% 11%, pink, cyan 33%, blue, pink 80%);

Upcoming:

Houdini css paint (Chrome 65+ with flag)

--circle-color: green;
background: paint(circles),
            conic-gradient(at 69% 11%, pink, blue 33%, cyan, pink 80%);

Other things

Upcoming:

User Preference Media Features

@media (inverted-colors: none | inverted) {…}
@media (prefers-reduced-motion: no-preference | reduce) {…}
@media (prefers-reduced-transparency: no-preference | reduce) {…}
@media (prefers-contrast: no-preference | high | low) {…}
@media (prefers-color-scheme: no-preference | light | dark) {…}

Input Events (Chrome 60+)