Starting with CSS3, specification work is separated into different modules.

Demo

:root {
    --grid: 4px;
}

• Custom properties are defined like regular properties starting with a --
• They are usually defined on the :root selector (but they don't have to)

div:after {
    content: "Current grid is "var(--grid, "unknown");
}

• Custom properties can be included via the var() method
• Property values are treated as "strings" by default
• The var() method allows to define a default value as second argument

div {
    margin-top: calc(var(--grid) * 3);
}

• Calculations must be wrapped with calc()

html {
    --bg-color: rebeccapurple;
}
body {
    --bg-color: hotpink;
}
div {
    background-color: var(--bg-color); /* hotpink */
}

• Custom properties cascade just like regular properties

const root = document.documentElement;
root.style.setProperty("--bg-color", "aliceblue")
root.style.getPropertyValue("--bg-color");

• Custom properties can be read and modified via JavaScript

Side note

CSS2 already provided a special variable:

div {
    border: 1px solid currentColor;
}

You should use it!

Mixins = a set of properties provided by a single custom property

:root {
    --toolbar-theme: {
        background-color: hsl(120, 70%, 95%);
        border-radius: 4px;
        border: 1px solid var(--theme-color, hotpink);
    };
}
.toolbar {
    @apply --toolbar-theme;
}

Caveat

• No official draft yet
• Example implementation only in Chrome/Opera behind flag

table.colortable {
  & td {
    text-align: center;
    &.c {
        text-transform: uppercase;
    }
    &:first-child, &:first-child + td {
        border: 1px solid black;
    }
  }
  & th {
    text-align: center;
    background: black;
    color :white;
  }
}

Caveat

• No official draft yet
• Even no example implementation yet

Demo

#page {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 12px;
}

• display: grid switches the formatting context to grid
• grid-template-{columns,rows} defines a grid template
• grid-gap defines the gap between columns and rows

#page {
    display: grid;
    grid-template-columns:
        [sidebar-left]
        200px
        [sidebar-right content-left]
        1fr
        [content-right];
}
#sidebar {
    grid-column: sidebar-left / sidebar-right;
}
#content {
    grid-column: content-left / content-right;
}

• It is also possible to name grid lines

#page {
    display: grid;
    grid-auto-flow: row dense;
}

• The auto-placement algorithm kicks in as soon as grid items are not explicitly placed on the grid
• grid-auto-flow defines where new grid cells are created and whether holes are allowed to be filled up

#page {
    display: grid;
    justify-content: center;
    justify-items: end;
    align-content: center;
    align-items: end;
}

• {justify,align}-content aligns all grid cells inside the container along the x/y axis
• {justify,align}-items aligns the contents of each grid item

You might know these already...

CSS Box Alignment Spec

Note

This is just a small excerpt of the grid layout module.
Check out the full syntax here.

CSS Custom Properties + Grid Layout = 💕

Example

Why another layout mode?

Was Flexbox not good enough?

Flexbox is not suited for page layout:

* with notable exceptions
jakearchibald.com/2014/dont-use-flexbox-for-page-layout

extensiblewebmanifesto.org

CSS Typed Object Model

myElement.styleMap.set("opacity", new CSSNumberValue(3));
myElement.styleMap.set("margin-left", new CSSSimpleLength(20, "px"));
myElement.styleMap.get("margin-left").value; // 20
myElement.styleMap.get("margin-left").type; // "px"

• Better performance because values don't need to be parsed/casted
• Easier style manipulation via JavaScript

CSS Properties and Values

CSS.registerProperty({
    name: "--stop-color",
    syntax: "<color>",
    inherits: false,
    initialValue: "rgba(0,0,0,0)"
});

.button {
    --stop-color: red;
    background:
        linear-gradient(var(--stop-color), black);
    transition: --stop-color 1s;
}

• Allows to define typed CSS properties with custom syntax and inheritance behavior
• Like CSS custom properties, but more low-level

Worklets

• A worklet is like a light-weight web worker
• Provides an API to extent the rendering engine
• Is thread-agnostic: it may or may not run on the main thread
• Has a minimal API on the JavaScript environment

Check out all the other specs:

Caveat

These specs are in a very early stage and the API is very likely to change.
They are far from production-ready.

• Scrolled-linked effects
• Intrinsic & Extrinsic Sizing (Demo)
• Will Change
• Containment