Modern CSS Tricks

Some modern CSS tricks I use frequently:

Container Queries

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Custom Properties with Fallbacks

.element {
  background: var(--custom-bg, #ffffff);
  color: var(--custom-color, var(--fallback-color, #000000));
}