Định cỡ trường CSS

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.

Adam Argyle

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;
}

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.

Dùng thử trên Codepen

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.

Dùng thử trên Codepen

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.