Định cỡ trường CSS

Một dòng mã để tự động định cỡ các phần tử có nội dung có thể chỉnh sửa.

Adam Argyle

Nếu không có field-sizing, để tạo trường nhập có kích thước phù hợp, bạn phải đoán kích thước trung bình của trường nhập văn bản hoặc sử dụng JavaScript để đếm số ký tự và tăng chiều cao hoặc chiều rộng của phần tử khi người dùng nhập văn bản. Nói cách khác, việc này không dễ dàng và dễ gặp lỗi khi cố gắng theo dõi nội dung mà người dùng đã nhập vào dữ liệu đầu vào.

Với field-sizing, bạn cần một dòng CSS để bật tính năng định cỡ dựa trên nội dung. Kiểu kích thước dựa trên nội dung này cũng hoạt động cho nhiều vùng văn bản!

textarea, select, input {
  field-sizing: content;
}

Đường liên kết nhanh

Quy cách | Nội dung giải thích

Bạn thích video ngắn?

Wes Bos và Jhey đều có một video tuyệt vời trên Twitter giới thiệu cho bạn về field-sizing.

Những phần tử nào chịu ảnh hưởng của việc định cỡ trường?

Dưới đây là danh sách các phần tử <form> mà field-sizing hoạt động, cùng với phần tóm tắt về hiệu ứng của field-sizing đối với từng phần tử.

<textarea>

Dữ liệu đầu vào sẽ thu gọn thành min-inline-size hoặc vừa với phần giữ chỗ.

Khi người dùng nhập, đầu vào sẽ tăng theo hướng cùng dòng cho đến khi đạt đến kích thước cùng dòng tối đa, tại thời điểm đó, văn bản sẽ được gói và kích thước khối của đầu vào sẽ tăng lên để vừa với dòng mới.

<select> và <select multiple>

Phần tử select sẽ thu nhỏ để vừa với tuỳ chọn đã chọn.

Một thành phần chọn có thuộc tính multiple sẽ tăng lên để vừa với tuỳ chọn rộng nhất và có chiều cao cần thiết để vừa với số lượng tuỳ chọn.

<input type="text">, <input type="email"> và <input type="number">

Dữ liệu đầu vào sẽ thu gọn thành min-inline-size hoặc vừa với phần giữ chỗ.

Khi người dùng nhập, dữ liệu đầu vào sẽ tăng theo hướng nội tuyến cho đến khi đạt đến max-inline-size, tại thời điểm đó, dữ liệu tràn sẽ cắt bớt giá trị đầu vào.

<input type="file">

Nội dung đầu vào sẽ được thu gọn thành nút và văn bản tên tệp điền sẵn.

Sau khi tải tệp lên, dữ liệu đầu vào sẽ có chiều rộng bằng nút cộng với văn bản tên tệp.

Xem, thử nghiệm và so sánh kết quả

Dưới đây là một ví dụ tương tác và tối thiểu về các hành vi trước và sau của từng phần tử biểu mẫu, chịu ảnh hưởng của field-sizing.

Xem xét kỹ hơn

Khi sử dụng [placeholder], phần giữ chỗ sẽ trở thành nội dung. Điều này đã được đề cập trước đó nhưng được nêu lại ở đây vì bạn cần biết thời điểm tạo kiểu cho biểu mẫu. Một phần giữ chỗ dài hoặc ngắn sẽ thay đổi kích thước nội tại của dữ liệu đầu vào bằng field-sizing: content.

Xử lý kiểu trống và tràn

Việc sử dụng field-sizing có nghĩa là bạn phải làm thêm một số việc. Ahmad Shadeed gọi đây là "CSS phòng thủ", trong đó mục tiêu không nhất thiết là phải giải thích chính xác cách hoạt động hoặc giao diện của một thứ gì đó, mà là để bảo vệ nội dung đó không rơi vào trạng thái hình ảnh không mong muốn. Trước đây, dữ liệu đầu vào có một số kích thước cố định, nhưng sau khi áp dụng field-sizing: content, dữ liệu đầu vào có thể trở nên quá nhỏ hoặc quá lớn.

Bạn có thể bắt đầu từ các kiểu sau. Các giá trị này giúp các phần tử không thu gọn thành một hộp quá nhỏ và cũng không phát triển quá lớn trong trường hợp textarea.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

CSS này sử dụng đơn vị tương đối để định cỡ. Đơn vị lh mới là hoàn hảo cho các kích thước khối và ch hoạt động tốt cho các kích thước cùng dòng.

Giá trị mặc định của field-sizing là gì?

Giá trị mặc định của field-sizing là fixed và chỉ chấp nhận hai giá trị fixed hoặc content.