Một dòng mã dành cho các phần tử định cỡ tự động có nội dung có thể chỉnh sửa.
Nếu không có field-sizing
, để tạo một trường nhập dữ liệu có kích thước phù hợp, bạn phải đoán kích thước trung bình của dữ liệu nhập vào trường văn bản hoặc sử dụng JavaScript để đếm 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, điều này không dễ dàng và dễ xảy ra lỗi khi cố gắng tuân theo 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 kích thước dựa trên nội dung. Kiểu định kích thước dựa trên nội dung này cũng phù hợp với nhiều vùng văn bản!
textarea, select, input {
field-sizing: content;
}
Đường liên kết nhanh
Thông số kỹ thuật | 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 field-sizing
.
Kích thước trường ảnh hưởng đến những phần tử nào?
Dưới đây là danh sách các phần tử <form>
mà field-sizing
hoạt động, kèm theo bản tóm tắt về tác động của từng phần tử đó.
<textarea>
Giá trị đầ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 gõ, dữ liệu đầu vào sẽ tăng theo hướng cùng dòng cho đến khi đạt đến kích thước tối đa cùng dòng. Tại thời điểm đó, văn bản sẽ được gói và kích thước khối của dữ liệu đầu vào tăng lên để vừa với dòng mới.
<select>
và <select multiple>
Phần tử được chọn sẽ thu nhỏ cho vừa với tuỳ chọn đã chọn.
Một lựa chọn có thuộc tính multiple
sẽ phát triển để vừa với tuỳ chọn rộng nhất và cao đến mức cần thiết để vừa với số lượng tuỳ chọn.
<input type="text">
, <input type="email">
và <input type="number">
Giá trị đầ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 gõ, dữ liệu đầu vào sẽ tăng theo hướng cùng dòng cho đến khi đạt đến max-inline-size
. Tại thời điểm đó, giá trị nhập sẽ bị cắt bớt.
<input type="file">
Đầu vào sẽ thu gọn nút và văn bản tên tệp được điền sẵn.
Khi tải một tệp lên, đầu vào sẽ 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à ví dụ tối thiểu về hành vi trước và sau của từng phần tử biểu mẫu khi chịu ảnh hưởng của field-sizing
.
Nhìn gần hơn
Khi sử dụng [placeholder]
, phần giữ chỗ sẽ trở thành nội dung. Vấn đề này đã được đề cập trước đó nhưng được gọi ra ở đây, vì điều quan trọng là phải biết khi tạo kiểu cho một biểu mẫu. Phần giữ chỗ dài hoặc ngắn sẽ thay đổi kích thước hàm 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 thực hiện thêm một số thao tác. Ahmad Shadeed gọi dịch vụ này là "CSS phòng thủ", trong đó mục tiêu không nhất thiết phải chỉ ra chính xác hành vi hoặc giao diện của một tính năng nào đó, thay vào đó là bảo vệ đối tượng khỏi trạng thái hình ảnh không mong muốn. Trước đây, dữ liệu đầu vào có khá nhiều 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 nên bắt đầu bằng các kiểu sau. Chúng giúp các phần tử không bị thu gọn thành quá nhỏ của một hộp 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 cho kích thước. Đơn vị lh
mới là sự lựa chọn hoàn hảo cho kích thước khối và ch
cũng hoạt động tốt với các kích thước cùng dòng.
Giá trị mặc định của kích thước trường là gì?
Giá trị mặc định của field-sizing
là fixed
và chỉ chấp nhận 2 giá trị fixed
hoặc content
.