Những thuộc tính CSS ít người biết nhưng cực kỳ hữu dụng

1. accent-color

Tùy biến màu sắc mặc định của các thành phần giao diện hệ thống như checkbox, radio, range slider.

input[type="checkbox"] {
  accent-color: #e91e63;
}

2. scroll-snap

Giúp các phần tử cuộn “bám dính” đúng vị trí, hữu ích cho carousel, section chia full-screen.

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}
.child {
  scroll-snap-align: start;
}

3. aspect-ratio

Đảm bảo phần tử giữ đúng tỉ lệ chiều rộng/chiều cao mà không cần hack bằng padding.

.box {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #ccc;
}

4. backdrop-filter

Tạo hiệu ứng mờ nền phía sau (blur background), thường dùng trong header hoặc modal hiện đại.

.frosted {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.3);
}

5. text-wrap: balance

Giúp đoạn văn bản xuống dòng đẹp hơn, hạn chế dòng cuối bị lẻ một từ – rất hữu ích trong tiêu đề.

h1 {
  text-wrap: balance;
}

6. content-visibility

Tối ưu hiệu suất bằng cách chỉ render nội dung khi nó nằm trong vùng hiển thị (viewport).

.lazy-section {
  content-visibility: auto;
}

7. container-type và Container Queries

Cho phép style phần tử con theo kích thước của container thay vì toàn bộ viewport – rất mạnh mẽ trong layout responsive.

.card {
  container-type: inline-size;
}
@container (min-width: 500px) {
  .card-title {
    font-size: 2rem;
  }
}

8. is(), where() trong CSS selector

Giúp rút gọn selector phức tạp mà không lặp code.

:is(h1, h2, h3, h4) {
  font-family: 'Roboto';
}

9. all: unset

Xóa sạch tất cả các style mặc định từ trình duyệt (thay vì reset từng thuộc tính).

button {
  all: unset;
  cursor: pointer;
}

10. line-clamp (kết hợp display: -webkit-box)

Giới hạn số dòng hiển thị và tự động thêm dấu ba chấm (…).

.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Tổng kết

Những thuộc tính CSS ở trên là minh chứng cho việc CSS đang ngày càng thông minh và mạnh mẽ hơn. Việc nắm vững các thuộc tính ít người biết sẽ giúp bạn tạo ra giao diện chuyên nghiệp, nhẹ, dễ maintain và hiệu suất cao hơn – đặc biệt là không cần đến JavaScript cho nhiều thao tác từng phải dùng đến trước đây.