Вложка-блок - 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, която в момента е в статуса на Чернова на редактора. Това означава, че определението и информацията за него могат да се променят от сега до официалната препоръка.

.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 Ръб, край Firefox Chrome Сафари Опера
Не Не 63+ Не Не Не
Android Chrome Android Firefox Браузър за Android iOS Safari опера мини
Не 79+ Не Не Не
Източник: caniuse

Демонстрация

Допълнителна информация

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