Modern CSS: Features You Should Be Using Today

.card {
  padding: 1rem;
  border-radius: 0.5rem;

  & .title {
    font-size: 1.25rem;
    font-weight: bold;
  }

  &:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  }

  @media (width >= 768px) {
    padding: 2rem;
  }
}

/* Style a form group that contains an invalid input */
.form-group:has(input:invalid) {
  border-color: red;
}

/* Style a card differently if it has an image */
.card:has(img) {
  grid-template-rows: 200px 1fr;
}

/* Change nav style when a dropdown is open */
nav:has(.dropdown[open]) {
  background: var(--nav-active-bg);
}

@layer base, components, utilities;

@layer base {
  a { color: blue; }
}

@layer components {
  .nav a { color: white; }  /* Wins over base regardless of specificity */
}

@layer utilities {
  .text-red { color: red !important; }  /* Wins over everything */
}

/* ❌ Physical — breaks in RTL languages */
.element {
  margin-left: 1rem;
  padding-right: 2rem;
  border-top: 1px solid;
}

/* ✅ Logical — works in any writing direction */
.element {
  margin-inline-start: 1rem;
  padding-inline-end: 2rem;
  border-block-start: 1px solid;
}

@view-transition {
  navigation: auto;
}

.hero-image {
  view-transition-name: hero;
}

::view-transition-old(hero) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(hero) {
  animation: fade-in 0.3s ease;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* Participate in 3 parent rows */
}

@supports (selector(:has(*))) {
  /* Use :has() */
}

@supports not (selector(:has(*))) {
  /* Fallback */
}