От автора: сегодня мы рассмотрим fit-content и fit-content(), которые являются специальными значениями для width и grid. Это … сложно — не как концепция, а в практическом применении.
Минимальное и максимальное содержание
Прежде чем приступить к рассмотрению fit-content, мы должны кратко рассмотреть два особых значения для width: min-content и max-content. Они нужны вам для понимания fit-content.
Обычно (то есть со значением width:auto) блок занимает столько места по горизонтали, сколько может. Вы можете изменить горизонтальное пространство, указав для width конкретное значение, но вы также можете указать браузеру определить его значение по содержимому поля. Вот что делают min-content и max-content:
min-content означает: минимальная ширина контейнера с содержимым. На практике это означает, что браузеры видят, какой элемент контента самый широкий, и устанавливают для ширины поля это значение. Самый широкий фрагмент контента — это самое длинное слово в тексте, самое широкое изображение, видео или другой объект.
max-content означает: максимальная ширина контейнера с содержимым . В случае текста это означает, что весь текст помещается в одну строку, а поле становится настолько широким, насколько это необходимо, чтобы вместить всю строку. В общем, это нежелательный эффект. Самым большим элементом контента также может быть изображением или видео; в этом случае браузеры используют эту ширину для определения ширины поля.
Если вы используете hyphens:auto или что-то подобное, браузер будет разбивать слова в правильных точках переноса, прежде чем определять минимальную ширину.
Quick Chromia
Все браузеры на базе Chromium на Android (протестированные в Chrome (v90), Samsung Internet (v87) и Edge (v77)) прерывают текст width:max-content в приведенном выше примере на тире и, таким образом, принимают ‘width: max-’ в качестве максимального содержимого, при условии, что страница НЕ имеет мета-области просмотра. Ни один другой браузер не делает этого, в том числе Chrome на Mac.
Кроме того, Chromia на Android делает размер шрифта немного меньше, когда вы изменяете размер полей ниже максимально возможной ширины.
Этих ошибок НЕ возникает в UC (на основе Chromium 78). Кажется, UC принимает здесь свои собственные решения и невосприимчив к подобным ошибкам.
fit-content
По сути, понимание fit-content состоит в следующем:
box { width: auto; min-width: min-content; max-width: max-content;
}Таким образом, размер контейнера составляет от минимума min-content до максимума max-content.
Я не уверен, полезен ли этот эффект вне элемента flexbox или grid, но теперь у вас есть пример его использования.
fit-content как min- или max-width
Вы также можете использовать fit-content как min-width или max-width. Первое означает, что ширина поля варьируется между min-content и auto, а вторая — между 0 и max-content.
Я считаю это бесполезным и потенциально сбивающим с толку. На самом деле вы имеете в виду что min-width:min-content или max-width:max-content. Если вы так напишете, ваш CSS будет более понятным.
Поэтому я считаю, что лучше не использовать fit-content для min-width или max-width; но только для width.
-moz-
К сожалению, хотя fit-content работает во всех браузерах, для Firefox по-прежнему нужено указывть префикс. Таким образом, окончательный код становится:
box { width: -moz-fit-content; width: fit-content;
}(Эти префиксы становится все труднее обслуживать с течением времени. fit-content имеет отличную кроссбраузерную поддержку, поэтому я не понимаю, почему Firefox не переходит на обычный вариант.)
fit-content в flexbox и grid: nope
fit-content не работает в flexbox и grid. В приведенном ниже примере центральное поле имеет width:fit-content; и это не работает. Если бы это сработало, средний прямоугольник имел бы ширину max-content; т.е. настолько малым, насколько он должен быть, чтобы содержать текст.
Обратите внимание, что элементы grid и flexbox имеют min-width: min-content по умолчанию.
fit-content()
Ниже приведён пример использования fit-content().
Grid
Вы можете использовать fit-content(value) в шаблонах сетки, например:
1fr fit-content(200px) 1fr
Это означает:
1fr min(max-content-size, max(min-content, 200px)) 1fr
Аргумент max() становится min-content или равным 200 пикселей, в зависимости от того, что больше. Затем он сравнивается с максимальным размером содержимого, который представляет собой фактическую ширину, доступную из-за ограничений сетки, но с максимальным размером max-content. Итак, окончательная формула больше похожа на вот такую, где ширина в сетке равна available-size-:
1fr min(min(max-content,available-size), max(min-content, 200px)) 1fr
Несколько примечаний:
Здесь мы говорим о функции fit-content(). ключевое слово fit-content не работает в определениях grid.
Для Firefox не нужено указывть -moz-.
нужен аргумент для fit-content(); пустая функция не работает. Кроме того, в единицах измерения недопустимый аргумент fr.
MDN упоминает о fit-content(stretch). Он нигде не работает и больше нигде не упоминается. Я предполагаю, что это взято из более старой версии спецификации
Я протестировал большинство из этих вещей на следующем примере, вы также можете попробовать фрагменты синтаксиса, которые пока не работают — возможно, они начнут работать позже.
В некоторых ситуациях, использование fit-content и fit-content() очень полезно. Ниже вы можете поэкспериментировать с fit-content() в grid.
Автор: Peter-Paul Koch
Источник: www.quirksmode.org
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен