Umetak-blok - CSS-trikovi

Sadržaj:

Anonim

inset-blockje stenografsko logičko CSS svojstvo koje postavlja duljinu pomaka elementa u smjeru bloka kombinirajući inset-block-starti inset-block-end. To je vrsta kao što proglašenja topi bottomosim 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-block: 50px 15%; 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-blockimovinu ć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-block: ;
  • 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 bottomsvojstva
  • 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-block: 50px; inset-block: 4em; inset-block: 3.5rem inset-block: 25vh; /* Percentage values */ inset-block: 50%; /* Keyword values */ inset-block: auto; /* initial value */ /* Global values */ inset-block: initial inset-block: inherit; inset-block: 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)