Inset - CSS-Tricks

insetProprietatea în CSS este o prescurtare pentru cele patru proprietăți inserate, top, right, bottomși leftîntr - o singură declarație. La fel ca cele patru proprietăți individuale în sine, insetnu are niciun efect asupra elementelor ne-poziționate (statice). Cu alte cuvinte, un element trebuie să declare o positionvaloare explicită înainte ca proprietățile inserției să poată intra în vigoare.

.box ( inset: 10px 20px 30px 40px; position: relative; )

inset este inițial definit în specificațiile de nivel 1 Proprietăți logice și valori CSS, care se află în Proiectul editorului din 20 aprilie 2020.

Sintaxă

După cum probabil ați adunat din exemplul de mai sus, inseturmează aceeași sintaxă multi-valoare a lui paddingși margin. Aceasta înseamnă că acceptă cât mai multe patru valori (la compensari pronunțăm pentru top, right, bottomși left) și cât mai puține o valoare ( de a declara un egal de compensare pentru toate cele patru proprietăți). Și, ca paddingși margin, valorile curg în sensul acelor de ceasornic, începând cu 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 */ )

Înainte inset, ar trebui să declarăm fiecare insetsub-proprietate separat, astfel:

.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )

Acum, putem pur și simplu asta pentru o singură linie de CSS:

.box ( position: absolute; inset: 0; /* ? */ )

Valori

insetProprietatea acceptă valori numerice la fel ca partea de sus, dreapta, jos și la stânga. Aceste valori pot fi orice lungime valid CSS, cum ar fi px, em, remși %, printre altele.

Să vorbim despre proprietățile logice

Vom zgâria aici doar suprafața proprietăților logice, deoarece focalizarea reală este pusă insetși sub-proprietățile sale conexe. Obțineți o adâncime profundă a subiectului în acest articol al revistei Smashing de Rachel Andrew.

Există mai multe insetsub-proprietăți decât top, și right, dar, pentru a le înțelege, merită să vă familiarizați cu proprietățile și valorile logice.bottomleft

Conținutul poate fi afișat în direcții diferite (de exemplu, moduri de scriere), inclusiv de la stânga la dreapta, de la dreapta la stânga, de sus în jos și de jos în sus. Când vorbim despre concepte „logice”, ne referim cu adevărat la punctul de plecare bazat pe direcția de scriere a conținutului.

Imaginați-vă că construiți un site web care trebuie să accepte atât limbile de la stânga la dreapta (LTR), cum ar fi engleza și spaniola, cât și limbile de la dreapta la stânga (RTL), cum ar fi persana sau araba. Să presupunem că doriți să adăugați o marjă între o pictogramă și un text rând lângă aceasta.

Bineînțeles, ați putea ajunge la margin-rightproprietate pentru a accepta LTR, apoi adăugați un alt set de reguli care elimină acea marjă și o înlocuiește cu margin-leftRTL:

.icon ( margin-right: 1em; ) 
 /* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )

Aceasta este o mică parte a unei pagini. Acum imaginați-vă că construiți un site web mare în acest fel - este o mulțime de muncă! Dar proprietățile logice îl fac rapid, luând în considerare modul de scriere pentru noi. De exemplu, putem adăuga margine la sfârșitul elementului, oriunde se întâmplă:

.icon ( margin-inline-end: 1em; )

La asta ne referim când ne referim la proprietățile logice - sunt mai degrabă relativ la modul de scriere decât la o direcție fizică. Vedeți cum proprietățile logice sunt mult mai logice pentru a lucra?

Inserați proprietăți logice

Deci, știind ce știți acum despre proprietățile logice, iată patru sub-proprietăți de inserare suplimentare:

Proprietate logică	Echivalent de debit orizontal	Ce face
inset-block-start	top	Specifică decalajul pentru marginea de pornire în direcția perpendiculară pe direcția de scriere.
inset-block-end	bottom	Specifică decalajul pentru muchia finală în direcția perpendiculară pe direcția de scriere.
inset-inline-start	left	Specifică decalajul pentru marginea de pornire în direcția de scriere, care se mapează la un decalaj fizic în funcție de modul de scriere al elementului, direcția și orientarea textului.
inset-inline-end	right	Specifică decalajul pentru marginea finală în direcția de scriere.

Putem chiar să grupăm aceste patru proprietăți secundare în două proprietăți de scurtare suplimentare:

Proprietate logică	Stenografie pentru	Ce face
inset-inline	inset-inline-start inset-inline-end	Acceptă o singură valoare pentru a seta ambele inset-inline-startși inset-inline-end. De asemenea, acceptă două valori, unde prima specifică inset-inline-startși a doua specifică inset-inline-end.
inset-block	inset-block-start inset-block-end	Acceptă o singură valoare pentru a seta atât inset-block-start, cât și inset-block-end. De asemenea, acceptă două valori, unde prima specifică inset-block-startși a doua specifică inset-block-end.

Demo

Schimbați modul de scriere și valorile proprietăților inserției pentru a vă face o idee mai bună despre modul în care funcționează:

Heads up: insetProprietatea nu este logică

Deși insetface parte din specificația Proprietăți și valori logice, nu definește blocul logic sau compensările în linie. În schimb, definește compensările fizice, indiferent de modul de scriere al elementului, direcția și orientarea textului. Cu alte cuvinte, inseteste doar o prescurtare pentru top, right, bottomși left.

Există unele discuții aici pe GitHub cu privire la utilizarea unor cuvinte cheie pentru a putea utiliza această proprietate și într-un mod logic.

Deci, mai folosim compensări fizice? Imaginați-vă că doriți o insignă sau o siglă fixată în colțul din stânga sus și al paginii și, indiferent de limbă, doriți să fie acolo. În acest caz, nu puteți utiliza compensări logice și va trebui să recurgeți la proprietăți fizice.

Suport pentru browser

Asistența pentru insetproprietate este încă în stadiile incipiente. Începând cu această scriere, Caniuse estimează sprijinul global la doar 3,79%.

Desktop

Internet Explorer	Margine	Firefox	Crom	Safari	Operă
Nu	Nu	66+	Nu	Nu	Nu

Mobil

Safari iOS	Opera mini	Browser Android	Chrome Android	Firefox Android
Nu	Nu	68	Nu	Nu

Mai multe informatii

• Proprietăți și valori logice CSS Nivelul 1 (Specificații, schiță a editorului)
• Înțelegerea proprietăților și valorilor logice (Smashing Magazine)
• Proprietăți logice CSS (Trucuri CSS)