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

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

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

:has()

Hỗ trợ trình duyệt

• 105
• 105
• 121
• 15,4

Nguồn

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

Dưới đây là một vài ví dụ về cách sử dụng :has() làm bộ chọn mẹ. Trợ lý có tên này vì thường là đối tượng của bộ chọn ở cuối, như ul li, trong đó li là chủ thể và nhận các kiểu. Với :has(), phần tử ở đầu bộ chọn có thể trở thành tiêu đề. Trong ví dụ sau, nút có một khoảng trống nếu có một phần tử bên trong với 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;
}

Bộ chọn dài mong muốn là để thay đổi một bố cục dựa trên số lượng mục mà bố cục đó có. Hiện có thể thực hiện việc này với :has() vì nó có thể giữ vùng chứa làm chủ thể 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 làm thay đổi chủ đề của bộ chọn, nếu bạn chỉ xem ví dụ như thế này, bạn có thể cho rằng :has() bị giới hạn ở vai trò bộ chọn mẹ. Hãy cân nhắc những điều sau ví dụ. Các thao tác này sẽ kiểm tra nội dung nào đó dựa trên đối tượng cấp trên chung, sau đó chuyển hướng bộ chọn hiển thị theo bối cảnh trẻ em ở đâ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ỳ giá trị nhập 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 vùng nội dung chính khi một ngăn đ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à vùng chứa để tạo một bố cục lưới có khả năng hiển thị thanh lịch 1–12 phần tử theo hướng dọc hoặc ngang:

Thử trên Codepen

Tạo lưới phụ

subgrid

Hỗ trợ trình duyệt

• 117
• 117
• 71
• 16

Nguồn

Trong nhiều năm, cộng đồng web giao diện người dùng đã yêu cầu lưới phụ giúp hoàn tất và hoàn tất 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ả ba công cụ chính.

Nếu bạn muốn xem thông tin tổng quan, hãy tìm hiểu thêm về lưới phụ tại đây.

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

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

Nest theo phong cách CSS

nesting

Hỗ trợ trình duyệt

• 120
• 120
• 117
• 17,2

Nguồn

Tính năng lồng CSS tích hợp sẵn đã có trên tất cả các trình duyệt chính từ 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 soạn quá trình lồng ghép, và giờ đây, tôi có thể bắt đầu giao hàng một biểu định kiểu nhỏ hơn! Đúng, biểu định kiểu có lồng nhau nhỏ hơn và tất cả các công cụ cho nhà phát triển của trình duyệt sẵn sàng đại diện cho nó.

Bạn có thể tìm thấy thông tin tổng quan về cú pháp lồng CSS tại đây, để biết toàn bộ 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;
  }
}

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

balance

Hỗ trợ trình duyệt

• 114
• 114
• 121
• 17,5

Nguồn

pretty

Hỗ trợ trình duyệt

• 117
• 117
• dấu x
• dấu x

Nguồn

Nếu không có text-wrap: balance, các nhà phát triển và người viết nội dung sao chép sẽ còn lại gợi ý ngắt dòng chẳng hạn như phần tử <wbr> hoặc ­. Hầu như đây là trận chiến thua vì ngay khi nội dung được dịch, thu phóng 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 ý gói sẽ nằm ở đú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 văn bản cân bằng, bạn có thể giao công việc này cho trình duyệt. Bạn có thể xem phép so sánh trong Codepen dưới đây.

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

cqw

Hỗ trợ trình duyệt

• 105
• 105
• 110
• 16

Nguồn

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 nên biết cách viết truy vấn vùng chứa. Nếu bạn vẫn chưa học được điều này, hãy tận dụng năm 2024 để nhanh chóng khai thác, cũng như xem các đơn vị truy vấn vùng chứa. Nhìn chung, Ahmad Shadeed viết một bài viết tuyệt vời về các đơn vị truy vấn vùng chứa vào năm 2021.

Có 6 đơn vị nhà hàng 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. Một biến thể chiều cao cqh.
5. Một biến thể với độ dài bất kỳ nhỏ hơn cqmin.
6. Một biến thể với chiều dài bất kỳ lớn hơn cqmax.

Hãy xem xét một tình huống về ảnh động tương đối và nội tại cho một vùng chứa. Một phần tử con trượt ra hoàn toàn khỏi vùng chứa của nó bằ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ùng chứa và hình ảnh thích ứng hướng của vùng chứa, trở thành một nửa kích thước nếu hướng ngang.

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

  img {
    inline-size: 100cqi;

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

Nếu các bài này mới được sử dụng, bạn nên xem tất cả các đơn vị dành cho bạn trong năm 2024.