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+ | Не | Не | Не |
Демонстрация
Допълнителна информация
- Спецификация на логически свойства и стойности на CSS на ниво 1 (Чернова на редактора)
- Документация за MDN
- Разбиране на логическите свойства и ценности (Smashing Magazine)
- Логически свойства на CSS (Адриан Розели)
- Двупосочни хоризонтални правила в CSS (Хюсеин Ал Хамад)