Các thuộc tính và API CSS mới nhất cho Web Design 2020-2024

Tổng hợp các tính năng CSS hiện đại đã được hỗ trợ rộng rãi (2020-2024).

Layout & Spacing

• gap cho Flexbox/Grid: gap: 1rem thay vì margin âm hack
• aspect-ratio: aspect-ratio: 16/9 giữ tỷ lệ khung hình
• min()/max()/clamp(): font-size: clamp(1rem, 2.5vw, 2rem)
• CSS Subgrid: grid-template-rows: subgrid kế thừa track từ parent grid
• display: outer inner: display: block flex, inline grid

Visual Effects

• backdrop-filter: backdrop-filter: blur(10px) làm mờ nền phía sau
• @property: đăng ký custom property với type, inherits, initial-value
• color-scheme: color-scheme: light dark tự động dark mode
• accent-color: accent-color: #007bff style form control native

Selectors & Pseudo

• :has(): div:has(> img) chọn parent có con img (CSS Parent Selector!)
• :is() / :where(): :is(h1,h2,h3) { color: red } gom selector, :where specificity = 0
• :not() đa đối số: :not(.a, .b, .c)
• ::file-selector-button: style file input button chuẩn

Media Queries mới

• @media (prefers-color-scheme: dark) - dark mode
• @media (prefers-reduced-motion: reduce) - giảm animation
• @media (prefers-contrast: more) - độ tương phản cao
• @media (hover: hover) - thiết bị có hover
• @container - Container Queries (layout theo container không viewport)

CSS Houdini APIs

• Paint API: vẽ background/border custom bằng JS
• Layout API: custom layout mode (như flex/grid tự viết)
• Animation Worklet: animation chạy trên compositor thread
• Typed OM: CSS values as JS objects (không parse string)
• Properties & Values API: @property đăng ký custom property

Ví dụ: :has() + :is() + clamp()

<style>
  .card:has(img) { border-radius: 12px; overflow: hidden; }
  .card:has(.badge) { border: 2px solid gold; }
  :is(h1, h2, h3):where(.title) { color: var(--primary); }
  .responsive-text { font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem); }
  .glass { backdrop-filter: blur(20px) saturate(180%); background: rgba(255,255,255,0.1); }
</style>