Встраиваемый - CSS-хитрости

Содержание:

Anonim

inset-inline- сокращенное логическое свойство CSS, которое задает длину смещения элемента во внутреннем направлении, объединяя inset-inline-startи inset-inline-end. Это вроде как декларирование rightи leftкроме его начальной и конечной точки определяются элемента direction, text-orientationи writing-mode, так же как и другие логические свойства.

Это свойство является частью спецификации CSS Logical Properties and Values ​​Level 1, которая в настоящее время находится в статусе Editor's Draft. Это означает, что определение и информация о нем могут измениться с настоящего момента и до официальной рекомендации.

.element ( inset-inline: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Так, например, если режим записи устанавливаются в horizontal-lrв inset-inlineсобственность будет действовать так же , как настройка topи bottomи установить элемент смещение от нижнего края. Вам даже нужно указать явное значение positionдля того же элемента, чтобы оно вступило в силу, как и свойства физического смещения.

Но изменить элемент writing-modeк чему - то , как vertical-lrи «нижнему» краю поворачиваются в вертикальном направлении, действуя больше как leftи rightсвойство.

Синтаксис

inset-inline: ;
  • Первоначальный значение: auto
  • Применимо к: позиционным элементам
  • Унаследовано: нет
  • Проценты: по соответствующему физическому объекту
  • Компьютерное значение: такой же , как соответствующие topи leftсвойства
  • Тип анимации: по типу вычисляемого значения

Значения

inset-inlineпринимает значение длины и поддерживает глобальные ключевые слова. Его значение по умолчанию auto.

/* Length values */ inset-inline: 50px; inset-inline: 4em; inset-inline: 3.5rem inset-inline: 25vh; /* Percentage values */ inset-inline: 50%; /* Keyword values */ inset-inline: auto; /* initial value */ /* Global values */ inset-inline: initial inset-inline: inherit; inset-inline: unset;

Поддержка браузера

IE Край Fire Fox Хром Сафари Опера
Нет Нет 63+ Нет Нет Нет
Android Chrome Android Firefox Браузер Android iOS Safari опера мини
Нет 79+ Нет Нет Нет
Источник: caniuse

Демо

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

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