inset-block-startе логично свойство CSS, което задава дължината, която елементът се измества в посоката на блока от началния му ръб. Това е нещо като обявяване topосвен неговата начална точка се определя от елемента direction, text-orientationи writing-mode, също като други логически свойства.
Свойството е част от спецификацията CSS Logical Properties and Values Level 1, която в момента е в статуса на Чернова на редактора. Това означава, че определението и информацията за него могат да се променят от сега до официалната препоръка.
.element ( inset-block-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Така например, ако режимът на запис е зададен horizontal-lrна inset-block-startсвойството, ще действа точно както topи ще зададе отместването на елемента от началния му ръб, който е отгоре. Дори трябва да посочите изрично positionза същия елемент, за да влезе в сила, точно както topи други физически свойства на компенсиране.
Но променете елементите на writing-modeнещо като vertical-rlи началният ръб се завърта във вертикална посока, действайки по-скоро като leftсвойството.
Синтаксис
inset-block-start: ;- Начална стойност:
auto - Прилага се за: позиционирани елементи
- Наследен: не
- Проценти: както за съответното физическо свойство
- Изчислена стойност: същото като съответното
topсвойство - Тип анимация: по тип изчислена стойност
Стойности
inset-block-startприема стойност на дължината и поддържа глобални ключови думи. Стойността му по подразбиране е auto.
/* Length values */ inset-block-start: 50px; inset-block-start: 4em; inset-block-start: 3.5rem inset-block-start: 25vh; /* Percentage values */ inset-block-start: 50%; /* Keyword values */ inset-block-start: auto; /* initial value */ /* Global values */ inset-block-start: initial inset-block-start: inherit; inset-block-start: unset;Поддръжка на браузър
| IE | Ръб, край | Firefox | Chrome | Сафари | Опера |
|---|---|---|---|---|---|
| Не | Не | 63+ | Не | Не | Не |
| Android Chrome | Android Firefox | Браузър за Android | iOS Safari | опера мини |
|---|---|---|---|---|
| Не | 79+ | Не | Не | Не |
Демонстрация
Допълнителна информация
- Спецификация на логически свойства и стойности на CSS на ниво 1 (Чернова на редактора)
- Документация за MDN
- Разбиране на логическите свойства и ценности (Smashing Magazine)
- Логически свойства на CSS (Адриан Розели)
- Двупосочни хоризонтални правила в CSS (Хюсеин Ал Хамад)