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