Inset-inline-start - Trucchi CSS

Sommario:

Anonim

inset-inline-startè una proprietà CSS che imposta la lunghezza di offset di un elemento nella direzione inline iniziale. È sorta di come dichiarare leftin quanto si applica a elementi posizionati e offset un elemento nella direzione sinistra, tranne il suo punto iniziale e finale possono cambiare in base all'elemento di direction, text-orientatione writing-mode, come le 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-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Quindi, ad esempio, se la modalità di scrittura è impostata horizontal-lrsulla inset-inline-startproprietà, agirà esattamente come l'impostazione left, spostando un elemento dal bordo sinistro. È 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 "iniziale" viene ruotato in direzione verticale, agendo più come topinvece.

Sintassi

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

Valori

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

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)