Modern CSS Features — CSS Styling

clamp() — fluid responsive sizing

clamp() for fluid typography

css

/* clamp(minimum, preferred, maximum) */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* Minimum: 2rem (32px)
     Preferred: 5vw (5% of viewport width)
     Maximum: 4rem (64px)
     Smoothly scales between min and max — no media queries */
}

.container {
  padding: clamp(1rem, 5vw, 4rem);
}

:is() and :where() — cleaner selectors

:is() and :where()

css

/* Instead of this */
header a, nav a, footer a, aside a {
  text-decoration: none;
}

/* Write this */
:is(header, nav, footer, aside) a {
  text-decoration: none;
}

/* :where() works the same but has 0 specificity — easier to override */
:where(h1, h2, h3) {
  line-height: 1.2;
}

CSS nesting

Native CSS nesting (no Sass needed)

css

.card {
  background: #201D15;
  padding: 1.5rem;

  /* Nest selectors inside — no need for Sass anymore */
  & h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  & p {
    color: #998870;
  }

  &:hover {
    border-color: #3E3A30;
  }

  & .card-footer {
    border-top: 1px solid #2E2A22;
    padding-top: 1rem;
  }
}

Container queries

Container queries — style based on parent size, not viewport

css

/* Define a container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Apply styles when the CONTAINER is wide enough */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}
/* This is better than media queries for components —
   the card adapts to its own container, not the whole screen */