Tips CSS Modern yang Wajib Kamu Tahu

CSS terus berkembang dengan fitur-fitur baru yang powerful. Berikut beberapa tips CSS modern yang bisa langsung kamu terapkan.

1. CSS Custom Properties (Variables)

Custom properties membuat kode CSS lebih maintainable:

:root {
  --primary: #7c5cfc;
  --radius: 12px;
}

.card {
  background: var(--primary);
  border-radius: var(--radius);
}

2. Container Queries

Tidak seperti media queries yang berdasarkan viewport, container queries memungkinkan styling berdasarkan ukuran parent:

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

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

3. Scroll-driven Animations

Animasi yang dipicu oleh scroll, tanpa JavaScript:

.parallax {
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

4. Nesting (Native!)

CSS nesting kini didukung secara native di browser modern:

.card {
  padding: 1rem;

  & h2 {
    font-size: 1.5rem;
  }

  &:hover {
    transform: scale(1.02);
  }
}

5. Backdrop Filter

Efek glassmorphism yang elegan:

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Terus eksplorasi dan eksperimen dengan fitur CSS terbaru! ✨