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.

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 đó.

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

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Nguồn

container

Hỗ trợ trình duyệt

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

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

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 99.
  • Safari: 11.

Nguồn

scroll-snap-align

Hỗ trợ trình duyệt

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 68.
  • Safari: 11.

Nguồn

scroll-snap-stop

Hỗ trợ trình duyệt

  • Chrome: 75.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 15.

Nguồn

overscroll-behavior

Hỗ trợ trình duyệt

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Nguồn

3. Nhóm lưới

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

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

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

Hỗ trợ trình duyệt

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

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

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 89.
  • Safari: 15.

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

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4.

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

Hãy ghi nhớ 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ề bên trái và bên phải cho chế độ viết quốc tế và hướng tài liệu nữa. Đ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

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Nguồn

margin-block

Hỗ trợ trình duyệt

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Nguồn

inset-inline

Hỗ trợ trình duyệt

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 63.
  • Safari: 14.1.

Nguồn