L' insetimmobile in CSS è una scorciatoia per le quattro proprietà inserto, top, right, bottome leftin una dichiarazione. Proprio come le quattro proprietà individuali stesse, insetnon ha alcun effetto sugli elementi (statici) non posizionati. In altre parole, un elemento deve dichiarare un positionvalore esplicito prima che le proprietà inserite abbiano effetto.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset è inizialmente definito nella specifica CSS Logical Properties and Values Level 1, che è in Editor's Draft del 20 aprile 2020.
Sintassi
Come potresti aver capito dall'esempio sopra, insetsegue la stessa sintassi multivalore di paddinge margin. Ciò significa che accetta ben quattro valori (ad offset di dichiarazione per top, right, bottome left) ed anche solo una valore (per dichiarare un pari offset per tutte e quattro le proprietà). E, come paddinge margin, i valori scorrono in senso orario, a partire da top.
.element ( inset: 1em 2em 3em 0; /* top right bottom left */ inset: 10% 5% -10%; /* top left/right bottom */ inset: 0 10px; /* top/bottom left/right */ inset: 20px; /* all edges = 20px */ )Prima inset, avremmo dovuto dichiarare ogni insetsotto-proprietà separatamente, in questo modo:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Ora, possiamo semplicemente farlo su una singola riga di CSS:
.box ( position: absolute; inset: 0; /* ? */ )Valori
La insetproprietà accetta valori numerici come in alto, a destra, in basso e a sinistra. Questi valori possono essere di qualsiasi lunghezza CSS valido, ad esempio px, em, reme %, tra gli altri.
Parliamo di proprietà logiche
Stiamo solo andando a scalfire la superficie delle proprietà logiche qui poiché il vero focus è su insete le sue sotto-proprietà correlate. Ottieni un approfondimento approfondito sull'argomento in questo articolo di Smashing Magazine di Rachel Andrew.
Ci sono più insetsotto-proprietà di top, right, bottome leftma, al fine di comprendere loro, vale la pena averne conoscenza di proprietà e valori logici.
Il contenuto può essere visualizzato in diverse direzioni (cioè modalità di scrittura), comprese da sinistra a destra, da destra a sinistra, dall'alto in basso e dal basso in alto. Quando parliamo di concetti "logici", ci riferiamo in realtà al punto di partenza basato sulla direzione di scrittura del contenuto.
Immagina di creare un sito Web che deve supportare sia le lingue da sinistra a destra (LTR), come l'inglese e lo spagnolo, sia le lingue da destra a sinistra (RTL), come il persiano o l'arabo. Supponiamo che tu voglia aggiungere un margine tra un'icona e una riga di testo accanto ad essa.
Naturalmente, potresti raggiungere la margin-rightproprietà per supportare LTR, quindi aggiungere un altro set di regole che rimuove quel margine e lo sostituisce con margin-leftRTL:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )Questa è una piccola parte di una pagina. Ora immagina di costruire un grande sito web in questo modo: è molto lavoro! Ma le proprietà logiche lo rendono un gioco da ragazzi prendendo in considerazione per noi la modalità di scrittura. Ad esempio, possiamo aggiungere un margine alla fine dell'elemento, ovunque si trovi:
.icon ( margin-inline-end: 1em; )
Questo è ciò che intendiamo quando ci riferiamo a proprietà logiche : sono relative alla modalità di scrittura piuttosto che a una direzione fisica. Vedi come le proprietà logiche sono molto più logiche con cui lavorare?
Proprietà logiche inserite
Quindi, sapendo quello che ora sai sulle proprietà logiche, ecco quattro sotto-proprietà aggiuntive inserite:
| Proprietà logica | Equivalente al flusso orizzontale | Cosa fa |
|---|---|---|
inset-block-start | top | Specifica l'offset per il bordo iniziale nella direzione perpendicolare alla direzione di scrittura. |
inset-block-end | bottom | Specifica l'offset per il bordo finale nella direzione perpendicolare alla direzione di scrittura. |
inset-inline-start | left | Specifica l'offset per il bordo iniziale nella direzione di scrittura, che viene mappato a un offset fisico a seconda della modalità di scrittura, direzione e orientamento del testo dell'elemento. |
inset-inline-end | right | Specifica l'offset per il bordo finale nella direzione di scrittura. |
Possiamo anche raggruppare queste quattro proprietà secondarie in due proprietà abbreviate aggiuntive:
| Proprietà logica | Abbreviazione di | Cosa fa |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Accetta un singolo valore per impostare sia inset-inline-starte inset-inline-end.Accetta anche due valori, dove il primo specifica inset-inline-starte il secondo specifica inset-inline-end. |
inset-block | inset-block-startinset-block-end | Accetta un singolo valore per impostare sia inset-block-start che inset-block-end.Accetta anche due valori, dove il primo specifica inset-block-starte il secondo specifica inset-block-end. |
Demo
Modificare la modalità di scrittura e i valori delle proprietà del riquadro per avere un'idea migliore di come funzionano:
Attenzione: la insetproprietà non è logica
Sebbene insetfaccia parte della specifica Proprietà e valori logici, non definisce blocchi logici o offset in linea. Invece, definisce gli offset fisici, indipendentemente dalla modalità di scrittura, dalla direzione e dall'orientamento del testo dell'elemento. In altre parole, insetè solo una scorciatoia per top, right, bottome left.
C'è qualche discussione qui su GitHub riguardo all'uso di alcune parole chiave per poter usare anche questa proprietà in modo logico.
Quindi, usiamo ancora offset fisici? Immagina di volere un badge o un logo fissato nell'angolo superiore e sinistro della tua pagina e, indipendentemente dalla lingua, vuoi che sia lì. In tal caso non è possibile utilizzare offset logici e sarà invece necessario ricorrere a proprietà fisiche.
Supporto browser
Il supporto per la insetproprietà è ancora nelle sue fasi iniziali. Al momento della stesura di questo documento, caniuse stima il supporto globale a un mero 3,79%.
Desktop
| Internet Explorer | Bordo | Firefox | Cromo | Safari | musica lirica |
|---|---|---|---|---|---|
| No | No | 66+ | No | No | No |
Mobile
| iOS Safari | Opera Mini | Browser Android | Chrome Android | Firefox Android |
|---|---|---|---|---|
| No | No | 68 | No | No |
Maggiori informazioni
- Proprietà e valori logici CSS Livello 1 (specifica, bozza del redattore)
- Comprensione delle proprietà e dei valori logici (Smashing Magazine)
- Proprietà logiche CSS (CSS-Tricks)