Umetnuto-umetnuto - CSS-trikovi

Sadržaj:

Anonim

inset-inlineje stenografsko logičko CSS svojstvo koje postavlja duljinu pomaka elementa u inline smjeru kombinirajući inset-inline-starti inset-inline-end. To je vrsta kao što proglašenja righti leftosim njegove početne i završne točke određuju 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: 50px 15%; position: relative; /* Applies 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-inlineimovinu će djelovati kao postavku topi bottomi postavljen element je odmaknut od donjeg 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 "donji" rub se zakreće u okomitom smjeru, djelujući više poput lefti rightsvojstava.

Sintaksa

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

Vrijednosti

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

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)