Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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 mạnh mẽ, ổn định và xứng đáng có trong bộ công cụ 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 cuộn nhanh, tránh position: absolute bằng lưới, nhanh chóng tạo ra một vòng tròn, sử dụng các lớp xếp tầng và tiếp cận nhiều người hơn với ít tài nguyên hơn thông qua các thuộc tính logic. Sau đây là thông tin tổng quan ngắn gọn 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 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

Browser Support

Source

container

Browser Support

Source

2. Cố định vị trí cuộn

Trải nghiệm cuộn được thiết kế hợp lý sẽ giúp trải nghiệm của bạn khác biệt so với những trải nghiệm khác và thao tác cuộn nhanh là cách hoàn hảo để điều chỉnh trải nghiệm người dùng khi cuộn trê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

Browser Support

Source

scroll-snap-align

Browser Support

Source

scroll-snap-stop

Browser Support

Source

overscroll-behavior

Browser Support

Source

3. Lưới chồng

Tránh vị trí tuyệt đối với lưới CSS một ô. Sau khi xếp chồng lên nhau, hãy dùng các thuộc tính justify và align để định vị chúng.

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

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

grid

Browser Support

Source

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

Browser Support

Source

5. Kiểm soát các biến thể bằng @layer

Các lớp xếp tầng 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 lớp xếp tầng cùng 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ùng với phần còn lại trong suốt thời gian này.

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

@layer

Browser Support

Source

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 hoặc lề trái và phải cho chế độ viết quốc tế và hướng tài liệu nữa. Điều chỉnh các kiểu từ thuộc tính thực tế sang thuộc tính logic như padding-inline, margin-inline, inset-inline và giờ đây, trình duyệt sẽ thực hiện công 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

Browser Support

Source

margin-block

Browser Support

Source

inset-inline

Browser Support

Source

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 Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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

2. Cố định vị trí cuộn

3. Lưới chồng

4. Vòng tròn nhanh

5. Kiểm soát các biến thể bằng @layer

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

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