Inset-inline-end - CSS-трикове

Съдържание:

Anonim

inset-inline-endе CSS свойство, което задава дължината, която даден елемент се измества в началната вградена посока. Това е нещо като обявяване на rightтова, че се отнася за разположени елементи и компенсации елемент в лявата посока, с изключение на неговата начална и крайна точки могат да се променят въз основа на елемента direction, text-orientationи writing-mode, също като други логически свойства.

Свойството е част от спецификацията CSS Logical Properties and Values ​​Level 1, която в момента е в статуса на Чернова на редактора. Това означава, че определението и информацията за него могат да се променят от сега до официалната препоръка.

.element ( inset-inline-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Така например, ако режимът на писане е зададен horizontal-lrна inset-inline-endсвойството, ще действа точно като настройка left, измествайки елемент от левия ръб. Дори трябва да посочите изрично positionза същия елемент, за да влезе в сила, точно както свойствата на физическото отместване.

Но променете елементите на writing-modeнещо като vertical-lrи „началният“ ръб се завърта във вертикална посока, действайки по-скоро като този top.

Синтаксис

inset-inline-end: ;
  • Начална стойност: auto
  • Прилага се за: позиционирани елементи
  • Наследен: не
  • Проценти: както за съответното физическо свойство
  • Изчислена стойност: същото като съответното leftсвойство
  • Тип анимация: по тип изчислена стойност

Стойности

inset-blockприема стойност на дължината и поддържа глобални ключови думи. Стойността му по подразбиране е auto.

/* Length values */ inset-inline-end: 50px; inset-inline-end: 4em; inset-inline-end: 3.5rem inset-inline-end: 25vh; /* Percentage values */ inset-inline-end: 50%; /* Keyword values */ inset-inline-end: auto; /* initial value */ /* Global values */ inset-inline-end: initial inset-inline-end: inherit; inset-inline-end: unset;

Поддръжка на браузър

IE Ръб, край Firefox Chrome Сафари Опера
Не Не 63+ Не Не Не
Android Chrome Android Firefox Браузър за Android iOS Safari опера мини
Не 79+ Не Не Не
Източник: caniuse

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

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

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