The case for modern CSS

Mozilla TechSpeakers

By Chen Hui Jing / @hj_chen

Writing CSS meme
CSS floats meme
CSS inheritence meme

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

💩

💩

💩

The no symbol
Basic CSS poll
CSS1 appendix
Evolution of browser capabilities for layout

#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.

Define a grid

Place items in the grid.

Place items in the grid

From the simple…

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

…to the elaborate

Isometric eCommerce CSSGrid
by Andy Barefoot
Scantron Answer Sheet (CSS grid demo)
by Jon Kantner
Ikko Tanaka (pure CSS)
by Yuan Chuan
CSS Grid as a mask
by Andy Barefoot

#2: CSS Custom Properties

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

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

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

Universal layout
Browsers that don't support feature queries
Enhanced layout
Browsers that do support feature queries

Self-updating designs

Wismut Labs website pre v52 Firefox
Pre v52 (before Grid)
Wismut Labs website pre v62 Firefox
Pre v62 (before Shapes)
Wismut Labs website post v62 Firefox
Current

Useful resources

🧡

💙

💛

Merci!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing

Font used is Zilla Slab, by Typotheque