Trang này được dịch bởi Cloud Translation API.

6 đoạn mã CSS mà mọi nhà phát triển giao diện người dùng nên biết vào năm 2023

Một CSS mạnh mẽ, ổn định và đáng tin cậy mà bạn có thể sử dụng ngay hôm nay.

Adam Argyle

Tôi tin rằng mọi nhà phát triển giao diện người dùng đều nên biết cách sử dụng truy vấn vùng chứa, tạo trải nghiệm di chuyển nhanh, tránh position: absolute dùng lưới, nhanh chóng tạo nét hình tròn, sử dụng lớp phân tầng và tiếp cận nhiều hơn mà không tốn nhiều chi phí thông qua thuộc tính logic. Dưới đây là thông tin tổng quan nhanh về từng kỳ vọng đó.

1. Truy vấn vùng chứa

Tính năng CSS được yêu cầu nhiều nhất trong 10 năm liên tiếp hiện đã ổn định trên các trình duyệt và bạn có thể sử dụng tính năng này cho các truy vấn về chiều rộng vào năm 2023.

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

Hỗ trợ trình duyệt

Nguồn

container

Hỗ trợ trình duyệt

Nguồn

2. Cuộn để chụp nhanh

Trải nghiệm cuộn được điều phối tốt sẽ giúp trải nghiệm của bạn khác biệt với những trải nghiệm khác, và cuộn nhanh là cách hoàn hảo để phù hợp với trải nghiệm người dùng cuộn hệ thống, đồng thời cung cấp các điểm dừng có ý nghĩa.

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

Tìm hiểu thêm về tiềm năng của tính năng CSS này trong bộ sưu tập Codepen đồ sộ và đầy cảm hứng gồm khoảng 25 bản minh hoạ.

scroll-snap-type

Hỗ trợ trình duyệt

Nguồn

scroll-snap-align

Hỗ trợ trình duyệt

Nguồn

scroll-snap-stop

Hỗ trợ trình duyệt

Nguồn

overscroll-behavior

Hỗ trợ trình duyệt

Nguồn

3. Nhóm lưới

Tránh đặt vị trí tuyệt đối bằng lưới CSS một ô. Sau khi các thuộc tính đã được xếp chồng lên nhau, hãy sử dụng căn đều và căn chỉnh các thuộc tính để định vị chúng.

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

grid

Hỗ trợ trình duyệt

Nguồn

4. Vòng tròn nhanh

Có rất nhiều cách để tạo vòng kết nối trong CSS, nhưng đây chắc chắn là cách tối thiểu nhất.

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

aspect-ratio

Hỗ trợ trình duyệt

Nguồn

5. Điều khiển biến thể bằng @layer

Lớp cascade có thể giúp chèn các biến thể được phát hiện hoặc tạo sau này vào đúng vị trí trong cascade với nhóm biến thể ban đầu.

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

Sau đó, trong một tệp hoàn toàn khác, được tải vào một thời điểm ngẫu nhiên khác, hãy thêm một biến thể mới vào lớp nút như thể biến thể đó đã có sẵn cùng với các biến thể còn lại trong suốt thời gian này.

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

Hỗ trợ trình duyệt

Nguồn

6. Ghi nhớ ít hơn và tiếp cận nhiều hơn bằng các thuộc tính logic

Ghi nhớ một mô hình hộp mới này và không bao giờ phải lo lắng về việc thay đổi khoảng đệm trái và phải hoặc lề cho các chế độ viết quốc tế và hướng tài liệu quốc tế. Điều chỉnh kiểu của bạn từ các thuộc tính vật lý thành các thuộc tính logic như padding-inline, margin-inline, inset-inline, và giờ đây, trình duyệt sẽ thực hiện việc điều chỉnh.

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}

padding-inline

Hỗ trợ trình duyệt

Nguồn

margin-block

Hỗ trợ trình duyệt

Nguồn

inset-inline

Hỗ trợ trình duyệt

Nguồn