insetСвойство в CSS является обобщающим для четырех вкладных свойств top, right, bottomи leftв одной декларации. Как и сами четыре отдельных свойства, insetне влияет на непозиционированные (статические) элементы. Другими словами, элемент должен объявить явное positionзначение, прежде чем свойства вставки могут вступить в силу.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset изначально определен в спецификации CSS Logical Properties and Values Level 1, которая находится в черновике редактора от 20 апреля 2020 г.
Синтаксис
Как вы могли понять из приведенного выше примера, он insetследует тому же многозначному синтаксису, что paddingи и margin. Это означает , что она принимает целых четыре значения (объявлять смещения для top, right, bottomи left) , и всего лишь одно значения (объявлять равноправное смещение для всех четырех свойств). И, как paddingи margin, значения текут по часовой стрелке, начиная с top.
.element ( inset: 1em 2em 3em 0; /* top right bottom left */ inset: 10% 5% -10%; /* top left/right bottom */ inset: 0 10px; /* top/bottom left/right */ inset: 20px; /* all edges = 20px */ )Раньше insetнам приходилось объявлять каждое insetподсвойство отдельно, например:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Теперь мы можем просто сделать это одной строкой CSS:
.box ( position: absolute; inset: 0; /* ? */ )Значения
insetСвойство принимает числовые значения , так же , как сверху, справа, снизу и слева. Эти значения могут быть любой допустимой длиной CSS, такие как px, em, remи %, среди прочих.
Поговорим о логических свойствах
Здесь мы просто коснемся поверхности логических свойств, поскольку основное внимание уделяется insetи связанным с ними подсвойствам. Подробно рассмотрите эту тему в статье Рэйчел Эндрю в Smashing Magazine.
Есть еще insetсуб-свойства , чем top, right, bottomи , leftно для того, чтобы понять их, это стоит того , чтобы познакомиться с логическими свойствами и значениями.
Контент может отображаться в разных направлениях (то есть в режимах письма), в том числе слева направо, справа налево, сверху вниз и снизу вверх. Когда мы говорим о «логических» концепциях, мы действительно имеем в виду отправную точку, основанную на направлении написания контента.
Представьте, что вы создаете веб-сайт, который должен поддерживать языки с письмом слева направо (LTR), такие как английский и испанский, и языки с письмом справа налево (RTL), например персидский или арабский. Допустим, вы хотите добавить поле между значком и строкой текста рядом с ним.
Естественно, вы можете обратиться к margin-rightсвойству для поддержки LTR, а затем добавить еще один набор правил, который удаляет это поле и заменяет его margin-leftна RTL:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )Это небольшая часть страницы. А теперь представьте, что вы создаете таким образом большой веб-сайт - это большая работа! Но логические свойства делают это несложно, учитывая для нас режим записи. Например, мы можем добавить маржу в конец элемента, где бы он ни находился:
.icon ( margin-inline-end: 1em; )
Это то, что мы имеем в виду, когда говорим о логических свойствах - они относятся к режиму записи, а не к физическому направлению. Видите, насколько логичнее работать с логическими свойствами?
Вставить логические свойства
Итак, зная, что вы теперь знаете о логических свойствах, вот четыре дополнительных вложенных подсвойства:
| Логическое свойство | Эквивалент горизонтального потока | Что оно делает |
|---|---|---|
inset-block-start | top | Задает смещение для начальной кромки в направлении, перпендикулярном направлению записи. |
inset-block-end | bottom | Задает смещение конечной кромки в направлении, перпендикулярном направлению записи. |
inset-inline-start | left | Задает смещение для начального края в направлении письма, которое сопоставляется с физическим смещением в зависимости от режима письма, направления и ориентации текста элемента. |
inset-inline-end | right | Задает смещение конечной кромки в направлении письма. |
Мы даже можем сгруппировать эти четыре подсвойства в два дополнительных сокращенных свойства:
| Логическое свойство | Сокращение для | Что оно делает |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Принимает одно значение для установки обоих inset-inline-startи inset-inline-end.Также принимает два значения, где первое указывает, inset-inline-startа второе указывает inset-inline-end. |
inset-block | inset-block-startinset-block-end | Принимает одно значение для установки как inset-block-start, так и inset-block-end.Также принимает два значения, где первое указывает, inset-block-startа второе указывает inset-block-end. |
Демо
Измените режим записи и значения свойств вставки, чтобы лучше понять, как они работают:
Внимание: insetсобственность не логична
Хотя insetэто часть спецификации логических свойств и значений, она не определяет логические блоки или встроенные смещения. Вместо этого он определяет физические смещения, независимо от режима письма, направления и ориентации текста элемента. Другими словами, insetэто просто сокращение для top, right, bottomи left.
Здесь, на GitHub, обсуждается использование некоторых ключевых слов, чтобы иметь возможность использовать это свойство логическим образом.
Итак, мы все еще используем физические смещения? Представьте, что вы хотите, чтобы значок или логотип был прикреплен к верхнему и левому углу страницы, и, независимо от языка, вы хотите, чтобы он был там. В этом случае вы не можете использовать логические смещения и вместо этого придется прибегать к физическим свойствам.
Поддержка браузера
Поддержка insetсобственности все еще находится на начальной стадии. На момент написания этой статьи caniuse оценивает глобальную поддержку всего в 3,79%.
Рабочий стол
| Internet Explorer | Край | Fire Fox | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Нет | Нет | 66+ | Нет | Нет | Нет |
Мобильный
| iOS Safari | опера мини | Браузер Android | Chrome Android | Firefox Android |
|---|---|---|---|---|
| Нет | Нет | 68 | Нет | Нет |
Дополнительная информация
- Логические свойства и значения CSS, уровень 1 (спецификация, черновик редактора)
- Понимание логических свойств и значений (Smashing Magazine)
- Логические свойства CSS (CSS-приемы)