Inset-block - Trucchi CSS

Sommario:

Anonim

inset-blockè una proprietà CSS logica abbreviata che imposta la lunghezza di offset di un elemento nella direzione del blocco che combina inset-block-starte inset-block-end. È un po 'come una dichiarazione tope bottomtranne 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-block: 50px 15%; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Così, per esempio, se la modalità di scrittura è impostata horizontal-lrla inset-blockproprietà 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-block: ;
  • Valore iniziale: auto
  • Si applica a: elementi posizionati
  • Ereditato: no
  • Percentuali: come per la proprietà fisica corrispondente
  • Valore calcolato: uguale al corrispondente tope alle bottomproprietà
  • 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-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;

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)