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 vùng chứa , tạo trải nghiệm di chuyển nhanh, tránh position: absolute với lưới, nhanh chóng tạo ra một vòng tròn, hãy sử dụng thác lớp, và tiếp cận nhiều người hơn với ít công cụ hơn qua logic thuộc tính. Sau đây là hướng dẫn nhanh thông tin tổng quan về từng kỳ vọng đó.

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

Tính năng CSS được yêu cầu hàng đầu trong 10 năm qua, nay ổn định trên các trình duyệt và dễ sử dụng cho các truy vấn 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. Di chuyển nhanh

Trải nghiệm cuộn được sắp xếp hợp lý sẽ làm cho trải nghiệm của bạn khác biệt với những trải nghiệm còn lại, và scroll snap là một cách hoàn hảo để khớp với trải nghiệm người dùng cuộn của hệ thống trong khi vẫn cung cấp đ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;
}

Hãy tìm hiểu thêm về tiềm năng của tính năng CSS này trong nội dung khổng lồ và truyền cảm hứng này Bộ sưu tập viết 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 ô. Khi chúng đã được xếp chồng lên trên khác nhau, sử dụng căn đều rồi 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ó nhiều cách để tạo vòng kết nối trong CSS, nhưng đây chắc chắn là cách phổ biến nhất tối thiểu.

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

aspect-ratio

Hỗ trợ trình duyệt

Nguồn

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

Cascade lớp có thể giúp chèn biến thể được khám phá hoặc được tạo ra sau đó, vào đúng vị trí trong thác với bộ 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ể nó ở đó cùng với các biến thể còn lại thời gian.

/* 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ẫu hộp mới này và không bao giờ phải lo lắng về thay đổi khoảng đệm bên trái và bên phải hoặc lề để viết quốc tế chế độ và tài liệu . Điều chỉnh kiểu của bạn từ thuộc tính vật lý thành thuộc tính hợp lý như padding-inline! margin-inline, inset-inline, và bây giờ 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

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