interpolate-size

Определение и применение

Свойство interpolate-size разрешает плавный переход между числовым размером и размером, зависящим от содержимого. Например, блок может раскрыться от нулевой высоты до height: auto без подбора заведомо большого max-height.

Как задать длительность, задержку и скорость обычного CSS-перехода — в уроке «Переходные эффекты в CSS».

Попробуйте значения interpolate-size

<div class="stage demo-target">
  <input id="toggle" class="toggle" type="checkbox" checked /><label
    for="toggle"
  >
    Раскрыть</label
  >
  <div class="panel">
    <p>
      Высота определяется содержимым. Здесь несколько строк текста, и заранее
      задавать их суммарную высоту не нужно.
    </p>
  </div>
</div>

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  interpolate-size: numeric-only;
}
.panel {
  height: 0;
  overflow: hidden;
  transition: height 1.2s;
  background: #b9d7eb;
}
.toggle:checked ~ .panel {
  height: auto;
}
.panel p {
  padding: 16px;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  interpolate-size: allow-keywords;
}
.panel {
  height: 0;
  overflow: hidden;
  transition: height 1.2s;
  background: #b9d7eb;
}
.toggle:checked ~ .panel {
  height: auto;
}
.panel p {
  padding: 16px;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}

Поддержка браузерами

Спецификация: CSS values-5

×Нет поддержки: Firefox, Safari, Firefox Android, Safari iOS, WebView iOS.

Отдельные значения (2) поддерживаются не везде — смотрите таблицу.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.interpolate-size

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
interpolate-size	✓129	✓129	×Нет	✓115	×Нет	✓129	×Нет	✓86	×Нет	✓28.0	✓129	×Нет
allow-keywords	✓129	✓129	×Нет	✓115	×Нет	✓129	×Нет	✓86	×Нет	✓28.0	✓129	×Нет
numeric-only	✓129	✓129	×Нет	✓115	×Нет	✓129	×Нет	✓86	×Нет	✓28.0	✓129	×Нет

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

CSS синтаксис:

interpolate-size: numeric-only | allow-keywords;

/* Глобальные значения */
interpolate-size: initial | inherit | unset | revert | revert-layer;

| разделяет варианты.

JavaScript синтаксис:

element.style.interpolateSize = "allow-keywords";

Начальное значение свойства

numeric-only.

Значения свойства

Разрешение не запускает анимацию

Кроме свойства нужны разные начальное и конечное значения размера и transition либо animation. Между auto и max-content это разрешение само по себе плавного перехода не создаёт: оба конца являются ключевыми словами.

Поддерживаемые внутренние размеры включают auto, min-content, max-content, fit-content; для flex-basis также используется content. Свойство наследуется, поэтому обычно его задают конкретному компоненту, чтобы не изменить поведение переходов во всём документе. Для вычислений с внутренними размерами существует функция calc-size().

Спецификация

CSS Box Sizing — interpolate-size.

Наследуется

Да.

Анимируемое

Нет. Свойство разрешает интерполяцию других свойств, но само не анимируется.

Примеры, попробуйте сами

Высота по содержимому

Включите флажок: текст раскроется до собственной высоты. В поддерживаемом браузере сравните allow-keywords и numeric-only. Добавьте ещё один абзац — конечную высоту подбирать не нужно.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.panel {
    background: #ecfccb;
}
.panel p {
    margin: 0;
    padding: 12px;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Высота по содержимому</title>
  </head>
  <body>
    <div class="demo">
      <input id="open" type="checkbox" /><label for="open"> Показать заметку</label>
      <div class="panel">
        <p>Тони нашёл новую тропу.</p>
        <p>Она ведёт к озеру через сосновый лес.</p>
      </div>
    </div>
  </body>
</html>

style.css

CSS

.demo {
    interpolate-size: allow-keywords;
}
.panel {
    height: 0;
    overflow: hidden;
    transition: height 600ms;
}
#open:checked ~ .panel {
    height: auto;
}
@media (prefers-reduced-motion: reduce) {
    .panel {
        transition: none;
    }
}