Вставка-блок - CSS-хитрости

Содержание:

Anonim

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

Демо

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

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