inset-inlineе стенографско логическо свойство CSS, което задава дължината, която елементът се измества в инлайн посоката, комбинирайки inset-inline-startи inset-inline-end. Това е нещо като обявяване rightи leftс изключение на неговата начална и крайната точка, се определят от елемента direction, text-orientationи writing-mode, също като други логически свойства.
Свойството е част от спецификацията CSS Logical Properties and Values Level 1, която в момента е в статуса на Чернова на редактора. Това означава, че определението и информацията за него могат да се променят от сега до официалната препоръка.
.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 | Ръб, край | Firefox | Chrome | Сафари | Опера |
|---|---|---|---|---|---|
| Не | Не | 63+ | Не | Не | Не |
| Android Chrome | Android Firefox | Браузър за Android | iOS Safari | опера мини |
|---|---|---|---|---|
| Не | 79+ | Не | Не | Не |
Демонстрация
Допълнителна информация
- Спецификация на логически свойства и стойности на CSS на ниво 1 (Чернова на редактора)
- Документация за MDN
- Разбиране на логическите свойства и ценности (Smashing Magazine)
- Логически свойства на CSS (Адриан Розели)
- Двупосочни хоризонтални правила в CSS (Хюсеин Ал Хамад)