inset-block
- это сокращенное логическое свойство CSS, которое устанавливает длину смещения элемента в направлении блока, объединяя inset-block-start
и inset-block-end
. Это вроде как декларирование top
и bottom
кроме его начальной и конечной точки определяются элемента direction
, text-orientation
и writing-mode
, так же как и другие логические свойства.
Это свойство является частью спецификации CSS Logical Properties and Values Level 1, которая в настоящее время находится в статусе Editor's Draft. Это означает, что определение и информация о нем могут измениться с настоящего момента и до официальной рекомендации.
.element ( inset-block: 50px 15%; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )
Так, например, если режим записи устанавливаются в horizontal-lr
в inset-block
собственность будет действовать так же , как настройка top
и bottom
и установить элемент смещение от нижнего края. Вам даже нужно указать явное значение position
для того же элемента, чтобы оно вступило в силу, как и свойства физического смещения.
Но изменить элемент writing-mode
к чему - то , как vertical-lr
и «нижнему» краю поворачиваются в вертикальном направлении, действуя больше как left
и right
свойство.
Синтаксис
inset-block: ;
- Первоначальный значение:
auto
- Применимо к: позиционным элементам
- Унаследовано: нет
- Проценты: по соответствующему физическому объекту
- Компьютерное значение: такой же , как соответствующие
top
иbottom
свойства - Тип анимации: по типу вычисляемого значения
Значения
inset-block
принимает значение длины и поддерживает глобальные ключевые слова. Его значение по умолчанию auto
.
/* Length values */ inset-block: 50px; inset-block: 4em; inset-block: 3.5rem inset-block: 25vh; /* Percentage values */ inset-block: 50%; /* Keyword values */ inset-block: auto; /* initial value */ /* Global values */ inset-block: initial inset-block: inherit; inset-block: unset;
Поддержка браузера
IE | Край | Fire Fox | Хром | Сафари | Опера |
---|---|---|---|---|---|
Нет | Нет | 63+ | Нет | Нет | Нет |
Android Chrome | Android Firefox | Браузер Android | iOS Safari | опера мини |
---|---|---|---|---|
Нет | 79+ | Нет | Нет | Нет |
Демо
дальнейшее чтение
- Спецификация логических свойств и значений CSS уровня 1 (проект редакции)
- Документация MDN
- Понимание логических свойств и значений (Smashing Magazine)
- Логические свойства CSS (Адриан Роселли)
- Двунаправленные горизонтальные правила в CSS (Хусейн Аль Хаммад)