interpolate-size

Cú pháp

/* Giá trị từ khóa */
interpolate-size: allow-keywords;
interpolate-size: numeric-only;

/* Giá trị toàn cục */
interpolate-size: inherit;
interpolate-size: initial;
interpolate-size: revert;
interpolate-size: revert-layer;
interpolate-size: unset;

Giá trị

allow-keywords

Bật nội suy giữa giá trị <length-percentage> và giá trị kích thước nội tại, để cho phép tạo hoạt hình giữa hai giá trị.

numeric-only

Hành vi mặc định — các giá trị kích thước nội tại không thể được nội suy.

Mô tả

Đặt interpolate-size: allow-keywords bật nội suy giữa giá trị <length-percentage> và giá trị kích thước nội tại. Lưu ý rằng nó không bật tạo hoạt hình giữa hai giá trị kích thước nội tại. Một đầu của hoạt hình phải là <length-percentage>.

Giá trị interpolate-size được kế thừa, vì vậy việc tạo hoạt hình đến (hoặc từ) giá trị kích thước nội tại có thể được bật cho toàn bộ tài liệu bằng cách đặt nó trên root của tài liệu:

:root {
  interpolate-size: allow-keywords;
}

Nếu bạn muốn giới hạn phạm vi, bạn có thể đặt nó trên phần tử container liên quan. Ví dụ sau chỉ bật nội suy kích thước nội tại cho <main> và các phần tử con của nó:

main {
  interpolate-size: allow-keywords;
}

Các giá trị có thể được nội suy

Các giá trị nội tại sau đây hiện có thể được chọn vào hoạt hình:

• auto
• min-content
• max-content
• fit-content
• content (dành cho các container được định kích thước bằng flex-basis).

Định nghĩa hình thức

Cú pháp hình thức

interpolate-size = 
  numeric-only    |
  allow-keywords  

Ví dụ

Sử dụng interpolate-size cơ bản

Ví dụ này minh họa cách đặt interpolate-size: allow-keywords trên tài liệu để bật hoạt hình liên quan đến kích thước nội tại. Demo có một badge nhân vật/"thẻ tên", có thể hover hoặc focus để hiển thị thông tin về nhân vật. Việc hiển thị được xử lý bởi chuyển tiếp height giữa một độ dài cố định và max-content.

HTML

HTML chứa một phần tử <section> với tabindex="0" được đặt trên nó để nó có thể nhận focus từ bàn phím. <section> chứa các phần tử <header> và <main>, mỗi phần tử có nội dung con riêng.

<section tabindex="0">
  <header>
    <h2>Tanuki</h2>
  </header>
  <main>
    <p>Tanuki is the silent phantom of MDN.</p>
    <ul>
      <li><strong>Height</strong>: 3.03m</li>
      <li><strong>Weight</strong>: 160kg</li>
      <li><strong>Tech Fu</strong>: 7</li>
      <li><strong>Bad Jokes</strong>: 9</li>
    </ul>
  </main>
</section>

CSS

* {
  box-sizing: border-box;
}

section {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 175px;
  border-radius: 5px;
  background: #eeeeee;
  box-shadow:
    inset 1px 1px 4px rgb(255 255 255 / 0.5),
    inset -1px -1px 4px rgb(0 0 0 / 0.5);
}

header {
  padding: 0.7rem;
  border-bottom: 2px solid #cccccc;
}

main {
  padding: 10px;
}

h2 {
  margin: 0;
  font-weight: normal;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 1px;
}

p,
li {
  font-size: 0.8rem;
  line-height: 1.5;
}

p {
  margin-top: 0;
}

Trong CSS, trước tiên chúng ta đặt interpolate-size: allow-keywords trên :root, để bật nó cho toàn bộ tài liệu.

:root {
  interpolate-size: allow-keywords;
}

Sau đó chúng ta đặt height của <section> thành 2.5rem và overflow thành hidden để chỉ hiển thị <header> theo mặc định, sau đó chỉ định transition tạo hoạt hình cho height của <section> trong 1 giây khi trạng thái thay đổi. Cuối cùng, chúng ta đặt height của <section> trên :hover và :focus thành max-content.

section {
  height: 2.5rem;
  overflow: hidden;
  transition: height ease 1s;
}

section:hover,
section:focus {
  height: max-content;
}

Phần còn lại của CSS đã bị ẩn để ngắn gọn.

Kết quả

Hãy thử hover qua <section> hoặc focus vào nó qua bàn phím — nó sẽ tạo hoạt hình đến chiều cao đầy đủ, hiển thị toàn bộ nội dung.

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• calc-size()
• Animate to height: auto; (and other intrinsic sizing keywords) in CSS trên developer.chrome.com (2024)