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

CSS ổn định, mạnh mẽ 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 front-end đều nên biết :has() không chỉ là một "bộ chọn gốc", cách thức và lý do của subgrid, cách lồng bằng cú pháp CSS tích hợp, cách cho phép trình duyệt cân bằng việc xuống dòng tự động của văn bản 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 giao diện người dùng nên biết vào năm 2023 của năm ngoái.

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

:has() đã có 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 khi biết 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, các thành phần thông minh và nhiều trường hợp khác được khám phá kỹ lưỡng trong bài viết này của Jhey.

Sau đây là một số ví dụ về cách sử dụng :has() làm bộ chọn cấp trên. Nó có tên này 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ác kiểu. Với :has(), phần tử ở đầu bộ chọn có thể trở thành đối tượng. 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 được mong muốn từ lâu là thay đổi bố cục dựa trên số lượng mục mà bố cục đó có. Giờ đây, điều này có thể thực hiện được với :has() vì nó có thể giữ vùng chứa làm đối tượng 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 là thay đổi kiểu được đặt trên toàn bộ tài liệu khi một hộp đánh dấu cụ thể trên trang được bật:

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

Đây là những trường hợp sử dụng đơn giản không thay đổi chủ đề 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ỉ là một bộ chọn gốc. Tuy nhiên, hãy xem xét các ví dụ sau. Các bộ chọn này kiểm tra một thành phần dựa trên một thành phần mẹ chung, sau đó xoay đối tượng bộ chọn thành một thành phần con ở đâu đó sâu hơn trong trang.

Ví dụ này cho thấy một phần tử lỗi biểu mẫu nếu có bất kỳ đầ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 vùng nội dung chính ra ngoài khi sidenav có một lớp .--is-open:

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

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

Tạo lưới phụ

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

Tìm hiểu thêm về lưới phụ tại đây nếu bạn muốn xem 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

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

Bạn có thể xem thông tin tổng quan về cú pháp lồng 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;
  }
}

Cho phép trình duyệt cân bằng các tiêu đề

Nếu không có text-wrap: balance, nhà phát triển và người viết quảng cáo sẽ phải sử dụng các gợi ý ngắt dòng như phần tử <wbr> hoặc ­. Đây thường là một cuộc chiến không có hồi kết 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, không có gì đảm bảo rằng những gợi ý bao bọc đó sẽ ở đúng vị trí cho bản trình bày mới của nội dung.

Với tính năng xuống dòng tự động cân đối, bạn có thể để trình duyệt thực hiện 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

Bài đăng năm ngoái đề xuất rằng mọi nhà phát triển giao diện người dùng đều phải biết cách viết một truy vấn vùng chứa. Nếu bạn chưa học, hãy biến năm 2024 thành năm bạn bắt đầu học và tìm hiểu cả các đơn vị truy vấn vùng chứa. Nhìn chung, 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 container query mới:

1. Một biến thể cùng dòng cqi.
2. Một biến thể chiều rộng cqw.
3. Một biến thể khối cqb.
4. Một biến thể chiều cao cqh.
5. Một biến thể cho độ 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à một 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 từng biết đến các đơn vị này, thì có lẽ bạn nên xem xét tất cả các đơn vị mà bạn có thể sử dụng trong năm 2024.