Инсет-инлине-старт - ЦСС-трикови

Преглед садржаја:

Anonim

inset-inline-startје ЦСС својство које поставља дужину померања елемента у почетном правцу. То је нека врста проглашавајући leftпо томе што се односи на постављеним елементима и компензација један елемент у левом правцу, осим свог полазне и завршне тачке могу променио на основу елемент је direction, text-orientationи writing-mode, као и другим логичким особинама.

Својство је део спецификације ЦСС логичких својстава и вредности 1, која је тренутно у статусу Едитор'с Драфт. То значи да се дефиниција и информације о њој могу мењати од сада до званичне препоруке.

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

Тако, на пример, ако је режим писања подешен на horizontal-lrна inset-inline-startимовину ће деловати као поставку left, пребијање елемент са леве ивице. Чак је потребно да наведете експлицитно positionза исти елемент да би он ступио на снагу, баш као и својства физичког померања.

Али промените елементе writing-modeу нешто слично vertical-lrи „почетна“ ивица се ротира у вертикалном смеру, понашајући се више као она top.

Синтакса

inset-inline-start: ;
  • Почетна вредност: auto
  • Односи се на: позиционирани елементи
  • Наследио: не
  • Проценти: као за одговарајуће физичко својство
  • Израчуната вредност: исто као и одговарајуће leftсвојство
  • Тип анимације: према израчунатој врсти вредности

Вредности

inset-blockузима дужинску вредност и подржава глобалне кључне речи. Његова подразумевана вредност је auto.

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

Подршка прегледача

ИЕ Ивица Фирефок Хром Сафари Опера
Не Не 63+ Не Не Не
Андроид Цхроме Андроид Фирефок Андроид претраживач иОС Сафари опера мини
Не 79+ Не Не Не
Извор: каниус

Демо

Додатна литература

  • Спецификација логичких својстава и вредности ЦСС нивоа 1 (Нацрт уредника)
  • МДН документација
  • Разумевање логичких својстава и вредности (Смасхинг Магазине)
  • ЦСС логичка својства (Адриан Роселли)
  • Двосмерна хоризонтална правила у ЦСС-у (Хуссеин Ал Хаммад)