CSS5 - What's new for Web Developers?

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fade-in linear;
  animation-timeline: scroll(block root);
}

::view-transition-old(root) {
  animation: fade-out 0.5s;
}

::view-transition-new(root) {
  animation: fade-in 0.5s;
}

@media (aspect-ratio: 16/9) {
  .container {
    width: 100%;
  }
}

.card {
  padding: 1rem;

  /* Nested selector */
  & .title {
    font-size: 1.5rem;
  }

  /* Nested media query */
  @media (min-width: 768px) {
    padding: 2rem;
  }
}

/* Select a <div> that contains an <img> */
div:has(img) {
  border: 1px solid #ccc;
}

/* Select a list item with a checked checkbox */
li:has(input[type="checkbox"]:checked) {
  background: #e0f0ff;
}

.element {
  background: oklch(70% 0.3 150); /* Lightness, Chroma, Hue */
  color: lab(62% 50 60); /* Lightness, a-axis, b-axis */
}

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

.child-grid {
  display: grid;
  grid-template-columns: subgrid;
}

.container {
  display: masonry;
  masonry-columns: 4;
  gap: 1rem;
}

.tooltip {
  anchor-name: --my-anchor;
}

.popup {
  position: absolute;
  top: anchor(--my-anchor bottom);
  left: anchor(--my-anchor right);
}