#1: CSS Grid

Gives us an unprecedented level of control over where our elements are placed on a page

CSS grid basics

Define your grid.

Place items in the grid.

From the simple…

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
}

…to the elaborate

#2: CSS Custom Properties

Provides us dynamic variables in native CSS, comes with scoping, inheritance and the cascade.

:root {
  --spacer: 0.5em;
  --columns: 1;
}

.card {
  background-color: #fff;
  max-width: calc((100% / var(--columns, 1)) - var(--spacer, 0.5em) * 2);
  border: 1px solid #6f777e;
  margin: var(--spacer, 0.5em);
  padding: var(--spacer, 0.5em);
}

/* Modify the variable values at specific breakpoints */
@media screen and (min-width: 480px) {
  :root {
    --spacer: 0.75em;
    --columns: 2;
  }
}

@media screen and (min-width: 720px) {
  :root {
    --spacer: 1em;
    --columns: 3;
  }
}

See the Pen Single Custom Property, Multiple Calcs by Dan Wilson (@danwilson) on CodePen.

Code by Dan Wilson from Making Custom Properties (CSS Variables) More Dynamic

/* Retrieves and sanitises the value of a custom property. */
const getVariable = (styles, propName) => String(styles.getPropertyValue(propName)).trim()

/* Sets the value of a custom property at the document level */
const setVariable = (propName, value) => {
  document.documentElement.style.setProperty(propName, value)
}

Code based off CSS Custom Properties (CSS Variables) Sample by Sérgio Gomes

#3: Feature Queries

Built-in feature detection with native CSS

Using @supports (AKA feature queries)

.selector {
  /* Styles that are supported in old browsers */
}

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}

Styles for every browser

Self-updating designs