Inset-inline-start - CSS-хитрости

Содержание:

Anonim

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+ Нет Нет Нет
Источник: caniuse

Демо

дальнейшее чтение

  • Спецификация логических свойств и значений CSS уровня 1 (проект редакции)
  • Документация MDN
  • Понимание логических свойств и значений (Smashing Magazine)
  • Логические свойства CSS (Адриан Роселли)
  • Двунаправленные горизонтальные правила в CSS (Хусейн Аль Хаммад)