Giới thiệu

Năm 2025, CSS đã tiến rất xa với hàng loạt tính năng mới, giúp lập trình viên Front-End viết code ngắn gọn hơn, hiệu quả hơn, và giảm phụ thuộc vào JavaScript. Bài viết này tổng hợp 25 CSS Tricks bạn nên biết để bắt kịp xu hướng.

1. Container Queries & Units


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

@container (width > 480px) {
  .card__meta {
    display: grid;
    grid-template-columns: 1fr auto;
  }
}

2. Pseudo-class :has()


.form-group:has(input:invalid) {
  border-color: #e11d48;
}

3. CSS Subgrid


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

.article {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

4. Scroll-Driven Animations


@scroll-timeline progress { source: auto; axis: block; }

.hero {
  animation: fade 1s linear both;
  animation-timeline: progress;
}

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

5. Anchor Positioning


.button { anchor-name: --btn; }

.tooltip {
  position: absolute;
  position-anchor: --btn;
  inset-area: top;
}

6. CSS Nesting


.card {
  > h3 { margin-bottom: .5rem; }
  &:hover { transform: translateY(-2px); }
}

7. Cascade Layers


@layer reset, base, components;

@layer reset {
  *,*::before,*::after { box-sizing: border-box; }
}

@layer base {
  body { font: 16px/1.5 system-ui; }
}

@layer components {
  .btn { padding: .6rem 1rem; }
}

8. Viewport Units mới


.fullscreen { min-height: 100dvh; }

9. aspect-ratio


.thumb {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

10. Logical Properties


.card {
  padding-inline: 1rem;
  border-inline-start: 4px solid blue;
}

11. Màu mới: oklch()


:root {
  --brand: oklch(65% 0.15 280);
}

12. color-mix()


.btn:hover {
  background: color-mix(in oklab, var(--brand) 80%, white);
}

13. :is() / :where()


:is(h1, h2, h3) { text-wrap: balance; }

14. :focus-visible


button:focus-visible {
  outline: 2px solid blue;
}

15. Dark Mode với color-scheme


:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  body { background: #0b1020; color: #e5e7eb; }
}

16. @property


@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

17. clamp()


h1 { font-size: clamp(1.8rem, 4vw, 3rem); }

18. accent-color


:root { accent-color: #4f46e5; }

19. :nth-child(… of S)


.item:nth-child(2n of .active) {
  background: #fef3c7;
}

20. text-wrap: balance


h1 { text-wrap: balance; }

21. @supports()


@supports (anchor-name: --btn) {
  .tooltip { /* anchor styling */ }
}

22. content-visibility


.card { content-visibility: auto; }

23. Masonry layout


.gallery {
  columns: 3;
  column-gap: 1rem;
}
.gallery img { break-inside: avoid; }

24. Popover API


.pop[popover] {
  border: 1px solid #ccc;
  padding: .75rem;
  border-radius: .5rem;
}

25. Reset hiện đại


*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; display: block; }

Kết luận

CSS 2025 giúp Front-End Dev viết code gọn nhẹ, dễ maintain và nhiều thứ trước kia phải dùng JS nay chỉ cần CSS. Hãy áp dụng dần vào dự án để tận dụng hết sức mạnh mới này.

Categorized in:

Kiến thức lập trình
Banner