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

CSS xứng đáng, mạnh mẽ và ổn định mà bạn có thể sử dụng hiện 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 cuộn nhanh, tránh position: absolute bằng lưới, nhanh chóng tạo một vòng tròn, sử dụng các lớp xếp chồng và tiếp cận nhiều người hơn với ít chi phí hơn thông qua các 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. Tập 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 hình tròn trong CSS, nhưng đây chắc chắn là cách tối giản 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 được nhiều hơn nhờ 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