Did you know?

[jessew@mk.cpluspatch.com]

Did you know? CSS has these features now, as of 2025!

CSS Nesting

.card {
  padding: 1rem;
  background: white;
  border-radius: 8px;

  & .title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    
    &:hover {
      color: blue;
    }
  }

  & .content {
    line-height: 1.6;
    
    & p {
      margin-bottom: 1rem;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

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

  &.featured {
    border: 2px solid gold;
    
    & .title {
      color: gold;
    }
  }

  @media (max-width: 768px) {
    padding: 0.5rem;
    
    & .title {
      font-size: 1.2rem;
    }
  }
}

Container Queries (@container)

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

@container (min-width: 300px) {
  .card-content { font-size: 1.2rem; }
}

Cascade Layers (@layer)

@layer base, components, utilities;
@layer base { h1 { color: blue; } }
@layer utilities { .text-red { color: red !important; } }

:has() Relational Pseudo-class

.card:has(img) { padding-top: 0; }
.form:has(:invalid) { border: 2px solid red; }

Subgrid

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

color-mix() Function

.element { 
  background: color-mix(in srgb, blue 70%, white);
  border: 1px solid color-mix(in oklch, var(--primary) 80%, black);
}

View Transitions API

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

@supports with Selector Testing

@supports selector(:has(*)) {
  .parent:has(.child) { background: green; }
}

Math Functions (clamp(), min(), max())

.responsive {
  width: clamp(300px, 50vw, 800px);
  font-size: max(1rem, 2vw);
}

CSS Scroll-Driven Animations

@keyframes reveal {
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}

.scroll-animate {
  animation: reveal linear;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

Individual Transform Properties

.element {
  translate: 50px 100px;
  rotate: 45deg;
  scale: 1.2;
}

accent-color for Form Controls

input[type="checkbox"], input[type="radio"] {
  accent-color: #ff6b6b;
}