The case for modern CSS

What we don't understand, we fear.
What we fear, we judge as evil.
What we judge as evil, we attempt to control.
And what we cannot control…we attack.

—Anonymous

#1: CSS Grid

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

From the simple…

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

Modify variable values on the fly

/* CSS that is applied to this presentation */
:root {
  --accent-colour: #ff4f5e
}

h2 {
  color: var(--accent-colour, #ff4f5e)
}

Credit to Mike Riethmuller for inspiring this live demo

: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;
  }
}

/* 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

And you can't get more dynamic than combining custom properties with Javascript. With the getPropertyValue() method, we can access the value of a custom property. While the setProperty() method lets us modify the value at runtime. [5.17]

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 */
  }
}

The case for modern CSS

#1: CSS Grid

CSS grid basics

From the simple…

…to the elaborate

#2: CSS Custom Properties

Modify variable values on the fly

#3: Feature Queries

Using `@supports` (AKA feature queries)

Styles for every browser

Self-updating designs

Useful resources

Merci!