Inset-inline - Trucchi CSS

Sommario:

Anonim

inset-inlineè una proprietà CSS logica abbreviata che imposta la lunghezza di offset di un elemento nella direzione inline che combina inset-inline-starte inset-inline-end. È un po 'come una dichiarazione righte lefttranne che i suoi punti di inizio e fine sono determinati dagli elementi direction, text-orientatione writing-mode, proprio come altre proprietà logiche.

La proprietà fa parte della specifica CSS Logical Properties and Values ​​Level 1 che si trova attualmente nello stato Bozza dell'editor. Ciò significa che la definizione e le informazioni al riguardo possono cambiare da ora fino alla raccomandazione ufficiale.

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

Così, per esempio, se la modalità di scrittura è impostata horizontal-lrla inset-inlineproprietà agirà come impostazione tope bottomed impostare l'offset dal bordo inferiore dell'elemento di. È anche necessario specificare un esplicito positionsullo stesso elemento affinché abbia effetto, proprio come le proprietà di offset fisico.

Ma cambia l'elemento writing-modein qualcosa di simile vertical-lre il bordo "inferiore" viene ruotato in direzione verticale, agendo più come le proprietà lefte right.

Sintassi

inset-inline: ;
  • Valore iniziale: auto
  • Si applica a: elementi posizionati
  • Ereditato: no
  • Percentuali: come per la proprietà fisica corrispondente
  • Valore calcolato: uguale al corrispondente tope alle leftproprietà
  • Tipo di animazione: per tipo di valore calcolato

Valori

inset-inlineaccetta un valore di lunghezza e supporta parole chiave globali. Il suo valore predefinito è 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;

Supporto del browser

IE Bordo Firefox Cromo Safari musica lirica
No No 63+ No No No
Android Chrome Android Firefox Browser Android iOS Safari Opera Mini
No 79+ No No No
Fonte: caniuse

Demo

Ulteriore lettura

  • Proprietà e valori logici CSS Specifica di livello 1 (bozza dell'editore)
  • Documentazione MDN
  • Comprensione delle proprietà e dei valori logici (Smashing Magazine)
  • Proprietà logiche CSS (Adrian Roselli)
  • Regole orizzontali bidirezionali nei CSS (Hussein Al Hammad)