Sisestatud-sisse - CSS-trikid

Lang L: none (table-of-contents):

Anonim

inset-inlineon lühike loogiline CSS-i atribuut, mis määrab elemendi pikkuse nihkesuunalises suunas, ühendades inset-inline-startja inset-inline-end. See on omamoodi nagu kuulutatakse rightja leftvälja oma algus- ja lõpp-punktid on määratud elemendi direction, text-orientationja writing-mode, nagu ka teised loogiline omadused.

Atribuut on osa CSS-i loogiliste omaduste ja väärtuste 1. taseme spetsifikatsioonist, mis on praegu redaktori mustandi olekus. See tähendab, et selle määratlus ja teave selle ja ametliku soovituse vahel võivad muutuda.

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

Nii näiteks, kui kirjalikult režiim on seatud vara toimib nagu seadistus ja ja määrata elemendi nihe alumisest äärest. Selle jõustumiseks peate isegi sama elemendi jaoks täpsustama , nagu füüsilised nihkeomadused.horizontal-lrinset-inlinetopbottomposition

Kuid muutke elemendi writing-modeväärtuseks midagi sellist vertical-lrja "alumist" serva pööratakse vertikaalsuunas, toimides rohkem kui omadused leftja right.

Süntaks

inset-inline: ;
  • Algne väärtus: auto
  • Kehtib: paigutatud elementide kohta
  • Päritud: ei
  • Protsendid: nagu ka vastava füüsilise omaduse osas
  • Arvutatud väärtus: sama mis vastav topja leftomadused
  • Animatsiooni tüüp: arvutatud väärtuse tüübi järgi

Väärtused

inset-inlinevõtab pikkuse väärtuse ja toetab globaalseid märksõnu. Selle vaikeväärtus on 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;

Brauseri tugi

IE Edge Firefox Chrome Safari Ooper
Ei Ei 63+ Ei Ei Ei
Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mini
Ei 79+ Ei Ei Ei
Allikas: caniuse

Demo

Lisalugemist

  • CSS-i loogiliste omaduste ja väärtuste 1. taseme spetsifikatsioon (redaktori mustand)
  • MDN dokumentatsioon
  • Loogiliste omaduste ja väärtuste mõistmine (ajakiri Smashing)
  • CSS-i loogilised omadused (Adrian Roselli)
  • Kahesuunalised horisontaalreeglid CSS-is (Hussein Al Hammad)