24.09.2021
50228f68706548f1a5b1e7a5b9819a9a

Fit-content и fit-content()

Fit-content и fit-content()

От создателя: сегодня мы рассмотрим fit-content и fit-content(), которые являются особыми значениями для width и grid. Это … трудно — не как концепция, а в практическом применении.

Малое и максимальное содержание

До этого чем приступить к рассмотрению fit-content, мы должны коротко рассмотреть два особых значения для width: min-content и max-content. Они необходимы вам для понимания fit-content.

Обычно (то есть со значением width:auto) блок занимает столько места по горизонтали, сколько может. Вы сможете изменить горизонтальное пространство, указав для width конкретное значение, но вы также сможете указать браузеру определить его значение по содержимому поля. Вот что делают min-content и max-content:

Fit-content и fit-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.

Fit-content и fit-content()

Не считая того, Chromia на Android делает размер шрифта мало меньше, когда вы изменяете размер полей ниже очень возможной ширины.

Этих ошибок НЕ появляется в UC (на основе Chromium 78). Кажется, UC воспринимает здесь свои собственные решения и невосприимчив к схожим ошибкам.

fit-content

По сущности, понимание fit-content состоит в следующем:

CSS

Таким образом, размер контейнера составляет от минимума min-content до максимума max-content.

Fit-content и fit-content()

Я не уверен, полезен ли этот эффект вне элемента flexbox либо grid, но теперь у вас есть пример его использования.

fit-content как min- либо max-width

Вы также сможете использовать fit-content как min-width или max-width. 1-ое означает, что ширина поля варьируется меж 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 как и раньше нужено указывть префикс. Таким образом, окончательный код становится:

CSS

(Эти префиксы становится все сложнее обслуживать с течением времени. fit-content имеет хорошую кроссбраузерную поддержку, поэтому я не понимаю, почему Firefox не перебегает на обычный вариант.)

fit-content в flexbox и grid: nope

fit-content не работает в flexbox и grid. В приведенном ниже примере центральное поле имеет width:fit-content; и это не работает. Если бы это сработало, средний прямоугольник имел бы ширину max-content; т.е. так малым, насколько он должен быть, чтоб содержать текст.

Fit-content и fit-content()

Обратите внимание, что элементы grid и flexbox имеют min-width: min-content по умолчанию.

fit-content()

Ниже приведён пример использования fit-content().

Fit-content и fit-content()

Grid

Вы сможете использовать fit-content(value) в шаблонах сетки, к примеру:

CSS

Fit-content и fit-content()

Это значит:

CSS

Аргумент max() становится min-content либо равным 200 пикселей, в зависимости от того, что больше. Потом он сравнивается с максимальным размером содержимого, который представляет собой фактическую ширину, доступную из-за ограничений сетки, но с наибольшим размером max-content. Итак, окончательная формула больше похожа на вот такую, где ширина в сетке равна available-size-:

CSS

Несколько примечаний:

Тут мы говорим о функции fit-content(). ключевое слово fit-content не работает в определениях grid.

Для Firefox не нужено указывть -moz-.

нужен аргумент для fit-content(); пустая функция не работает. Не считая того, в единицах измерения недопустимый аргумент fr.

MDN упоминает о fit-content(stretch). Он нигде не работает и больше нигде не упоминается. Я предполагаю, что это взято из более старенькой версии спецификации

Я протестировал большая часть из этих вещей на следующем примере, вы также сможете попробовать фрагменты синтаксиса, которые пока не работают — может быть, они начнут работать позже.

В неких ситуациях, использование fit-content и fit-content() очень полезно. Ниже вы сможете поэкспериментировать с fit-content() в grid.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *