Inset-inline-start - CSS-trikovi

Sadržaj:

Anonim

inset-inline-startje CSS svojstvo koje postavlja duljinu pomaka elementa u početnom smjeru. To je vrsta kao što izjavljuje leftu tome što se odnosi na postavljenim elementima i offseta element u lijevom smjeru, osim njegove početne i završne točke može mijenjati na temelju elementa direction, text-orientationi writing-mode, baš kao i druge logičke svojstva.

Svojstvo je dio specifikacije CSS logičkih svojstava i vrijednosti 1 koja je trenutno u statusu Editor's Draft. To znači da se definicija i podaci o njoj mogu mijenjati od sada do službene preporuke.

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

Tako, na primjer, ako je način pisanja je postavljen na horizontal-lrna inset-inline-startimovinu će djelovati kao postavljanje left, prijeboj element s lijeve ruba. Čak trebate navesti eksplicitno positionza isti element da bi on stupio na snagu, baš kao i svojstva fizičkog odstupanja.

Ali promijenite elemente writing-modeu nešto slično vertical-lri "početni" rub se zakreće u okomitom smjeru, djelujući više na sličan način top.

Sintaksa

inset-inline-start: ;
  • Početna vrijednost: auto
  • Odnosi se na: pozicionirani elementi
  • Naslijeđeno: ne
  • Procenti: kao za odgovarajuće fizičko svojstvo
  • Izračunata vrijednost: isto kao i odgovarajuće leftsvojstvo
  • Vrsta animacije: prema izračunatoj vrsti vrijednosti

Vrijednosti

inset-blockuzima vrijednost duljine i podržava globalne ključne riječi. Njegova je zadana vrijednost 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;

Podrška preglednika

IE Rub Firefox Krom Safari Opera
Ne Ne 63+ Ne Ne Ne
Android Chrome Android Firefox Android preglednik iOS Safari Opera Mini
Ne 79+ Ne Ne Ne
Izvor: caniuse

Demo

Daljnje čitanje

  • Specifikacija CSS logičkih svojstava i vrijednosti 1 (Nacrt urednika)
  • MDN dokumentacija
  • Razumijevanje logičkih svojstava i vrijednosti (Smashing Magazine)
  • CSS logička svojstva (Adrian Roselli)
  • Dvosmjerna horizontalna pravila u CSS-u (Hussein Al Hammad)