5 đoạn mã CSS mà mọi nhà phát triển giao diện người dùng cần biết trong năm 2024

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 phải biết :has() không chỉ là "bộ chọn mẹ", mà còn phải biết cách và lý do của subgrid, cách lồng với cú pháp CSS tích hợp, cách để trình duyệt cân bằng việc gói văn bản dòng tiêu đề và cách sử dụng các đơn vị truy vấn vùng chứa.

Bài đăng này là phần tiếp theo của bài viết 6 đoạn mã CSS mà mọi nhà phát triển phần giao diện người dùng cần biết trong năm 2023 vào năm ngoái.

CSS:has(.potential-beyond-being-a-parent-selector)

:has()

Hỗ trợ trình duyệt

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Nguồn

:has() đã ra mắt trên tất cả các trình duyệt chính vào cuối năm 2023! Bộ chọn mới này có vẻ nhỏ và đơn giản, nhưng bạn sẽ ngạc nhiên về tất cả các trường hợp sử dụng mà bộ chọn này có thể mở ra: trò chơi, khả năng phản hồi, bố cục nhận biết nội dung, thành phần thông minh và nhiều tính năng khác được Jhey khám phá kỹ lưỡng trong bài viết này.

4 bảng điều khiển hiển thị, mỗi bảng có một hình ảnh và chú thích. Mỗi hình ảnh cho thấy một bộ não đang kích hoạt ngày càng nhiều năng lượng não. Bảng điều khiển đầu tiên có nội dung :has(). Bảng điều khiển thứ hai có nội dung figure:has(caption) làm bộ chọn mẹ. Bảng điều khiển thứ ba cho biết .layout:has(> :nth-child(5)) là bộ chọn số lượng. Bảng điều khiển thứ tư cho biết html:has(#checked) .new-subject là bộ chọn thay đổi chủ đề có điều kiện.

Sau đây là một số ví dụ về cách sử dụng :has() làm bộ chọn mẹ. Tên này được đặt vì thường thì chủ đề của bộ chọn nằm ở cuối, chẳng hạn như ul li, trong đó li là chủ đề và nhận các kiểu. Với :has(), phần tử ở đầu bộ chọn có thể trở thành chủ thể. Trong ví dụ sau, nút có một khoảng trống nếu có một phần tử bên trong có lớp .icon. Thẻ sẽ thay đổi hướng nếu có hình ảnh bên trong.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

Một bộ chọn lâu nay mong muốn là thay đổi bố cục dựa trên số lượng mục của bố cục đó. Giờ đây, bạn có thể thực hiện việc này với :has() vì lớp này có thể giữ vùng chứa làm chủ đề trong khi truy vấn số lượng phần tử con.

main:has(> :nth-child(5)) {…}

Một ví dụ khác ở cấp cao hơn, thay đổi các kiểu được đặt trên toàn bộ tài liệu khi bật một hộp đánh dấu cụ thể trên trang:

html:has(#dark-mode:checked) {…}

Đây là các trường hợp sử dụng đơn giản không thay đổi chủ thể của bộ chọn. Nếu chỉ xem các ví dụ như thế này, bạn có thể nghĩ rằng :has() chỉ được dùng làm bộ chọn mẹ. Tuy nhiên, hãy xem các ví dụ sau. Các hàm này kiểm tra một nội dung dựa trên một thành phần gốc chung, sau đó xoay đối tượng bộ chọn thành một thành phần con ở sâu hơn trong trang.

Loại này hiển thị phần tử lỗi biểu mẫu nếu có bất kỳ dữ liệu đầu vào nào không hợp lệ:

form:has(:user-invalid) .error {
  display: block;
}

Thao tác này sẽ trượt ra khu vực nội dung chính khi thanh điều hướng bên có lớp .--is-open:

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

Dưới đây là một bản minh hoạ thú vị sử dụng :has() làm bộ chọn mẹ, :has() với các truy vấn số lượng và truy vấn vùng chứa để tạo một bố cục lưới có thể hiển thị một cách thanh lịch từ 1 đến 12 phần tử theo hướng dọc hoặc ngang:

Dùng thử trên Codepen

Tạo lưới con

subgrid

Hỗ trợ trình duyệt

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Nguồn

Trong nhiều năm, cộng đồng web giao diện người dùng đã yêu cầu có lưới con để giúp hoàn thiện công cụ bố cục lưới CSS cực kỳ phổ biến và mạnh mẽ. Tính năng này hiện có trong cả 3 công cụ chính.

Tìm hiểu thêm về lưới con tại đây nếu bạn muốn biết thông tin tổng quan.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

Lồng theo cách CSS

nesting

Hỗ trợ trình duyệt

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Nguồn

Tính năng lồng CSS tích hợp sẵn đã có trong tất cả các trình duyệt chính vào năm 2023. Tôi thậm chí còn cập nhật trang web của mình để xoá quy trình xây dựng đã biên dịch quá trình lồng nhau, và giờ đây, tôi gửi một tệp kiểu nhỏ hơn! Vâng, các tệp kiểu có lồng nhau sẽ nhỏ hơn và tất cả các công cụ phát triển của trình duyệt đều sẵn sàng thể hiện tệp kiểu đó.

Bạn có thể xem thông tin tổng quan về cú pháp lồng nhau của CSS tại đây để biết tất cả thông tin chi tiết. Ví dụ về mã sau đây cho thấy một ví dụ về cú pháp.

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

Để trình duyệt cân bằng dòng tiêu đề

balance

Hỗ trợ trình duyệt

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Nguồn

pretty

Hỗ trợ trình duyệt

  • Chrome: 117.
  • Edge: 117.
  • Firefox: không được hỗ trợ.
  • Safari: không được hỗ trợ.

Nguồn

Nếu không có text-wrap: balance, nhà phát triển và người viết nội dung sẽ phải sử dụng các gợi ý ngắt dòng như phần tử <wbr> hoặc &shy;. Đây chủ yếu là một cuộc chiến không thể thắng vì ngay khi nội dung được dịch, phóng to hoặc sửa đổi theo bất kỳ cách nào, bạn không thể đảm bảo rằng các gợi ý gói đó sẽ ở đúng vị trí để trình bày nội dung mới.

Với tính năng ngắt dòng văn bản cân bằng, bạn có thể để trình duyệt thực hiện công việc này. Bạn có thể xem thông tin so sánh trong Codepen sau.

Sử dụng đơn vị truy vấn vùng chứa

cqw

Hỗ trợ trình duyệt

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

Nguồn

Bài đăng năm ngoái đề xuất rằng mọi nhà phát triển phần trước đều phải biết cách viết truy vấn vùng chứa. Nếu bạn chưa tìm hiểu, hãy chọn năm 2024 để bắt đầu tìm hiểu và khám phá các đơn vị truy vấn vùng chứa. Để tổng quan, Ahmad Shadeed đã viết một bài viết hay về các đơn vị truy vấn vùng chứa vào năm 2021.

Có 6 đơn vị truy vấn query container mới:

  1. Một biến thể cùng dòng cqi.
  2. Biến thể chiều rộng cqw.
  3. Biến thể khối cqb.
  4. Biến thể chiều cao cqh.
  5. Một biến thể cho bất kỳ độ dài nào nhỏ hơn cqmin.
  6. Một biến thể cho bất kỳ độ dài nào lớn hơn cqmax.

Hãy xem xét một trường hợp cho ảnh động tương đối và nội tại đối với một vùng chứa. Một phần tử con trượt hoàn toàn ra khỏi vùng chứa bằng cách sử dụng 100cqi – tức là 100% kích thước nội tuyến của vùng chứa.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

Dưới đây là một thẻ có kiểu chữ thích ứng với vùng chứa và hình ảnh thích ứng với hướng của vùng chứa, giảm một nửa kích thước nếu hướng là ngang.

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

Nếu bạn chưa quen với các đơn vị này, bạn nên xem lại tất cả các đơn vị có sẵn cho bạn vào năm 2024.