Encart - Astuces CSS

La insetpropriété CSS est un raccourci pour les quatre propriétés encart, top, right, bottomet leftdans une déclaration. Tout comme les quatre propriétés individuelles elles-mêmes, insetn'a aucun effet sur les éléments non positionnés (statiques). En d'autres termes, un élément doit déclarer une positionvaleur explicite avant que les propriétés d'encart ne prennent effet.

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

inset est initialement défini dans la spécification CSS Logical Properties and Values ​​Level 1, qui est dans le brouillon de l'éditeur en date du 20 avril 2020.

Syntaxe

Comme vous l'avez peut-être compris à partir de l'exemple ci-dessus, insetsuit la même syntaxe à valeurs multiples de paddinget margin. Cela signifie qu'il accepte jusqu'à quatre valeurs (aux décalages de déclarer pour top, right, bottomet left) et aussi peu que une valeur (à déclarer un décalage égal pour les quatre propriétés). Et, comme paddinget margin, les valeurs s'écoulent dans le sens des aiguilles d'une montre, en commençant par 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 */ )

Avant inset, nous devions déclarer chaque insetsous-propriété séparément, comme ceci:

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

Maintenant, nous pouvons simplement cela sur une seule ligne de CSS:

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

Valeurs

La insetpropriété accepte des valeurs numériques telles que haut, droite, bas et gauche. Ces valeurs peuvent être une longueur CSS valide, par exemple px, em, remet %, entre autres.

Parlons des propriétés logiques

Nous allons simplement gratter la surface des propriétés logiques ici puisque le véritable focus est sur insetet ses sous-propriétés associées. Obtenez une plongée approfondie sur le sujet dans cet article du magazine Smashing par Rachel Andrew.

Il y a plus de insetsous-propriétés que top, right, bottomet , leftmais, pour les comprendre, il vaut la peine de se familiariser avec les propriétés logiques et les valeurs.

Le contenu peut être affiché dans différentes directions (c.-à-d. Modes d'écriture), y compris de gauche à droite, de droite à gauche, de haut en bas et de bas en haut. Quand on parle de concepts «logiques», on se réfère vraiment au point de départ basé sur le sens d'écriture du contenu.

Imaginez que vous construisez un site Web qui doit prendre en charge les langues de gauche à droite (LTR), comme l'anglais et l'espagnol, et les langues de droite à gauche (RTL), comme le persan ou l'arabe. Supposons que vous souhaitiez ajouter une marge entre une icône et une ligne de texte à côté.

Naturellement, vous pouvez atteindre la margin-rightpropriété pour prendre en charge LTR, puis ajouter un autre ensemble de règles qui supprime cette marge et la remplace par margin-leftpour RTL:

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

Ceci est une petite partie d'une page. Imaginez maintenant créer un grand site Web de cette manière - c'est beaucoup de travail! Mais les propriétés logiques en font un jeu d'enfant en prenant le mode d'écriture en considération pour nous. Par exemple, nous pouvons ajouter une marge à la fin de l'élément, où que ce soit:

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

C'est ce que nous entendons lorsque nous nous référons aux propriétés logiques - elles sont relatives au mode d'écriture plutôt qu'à une direction physique. Voyez comment les propriétés logiques sont beaucoup plus logiques à utiliser?

Propriétés logiques en incrustation

Donc, sachant ce que vous savez maintenant sur les propriétés logiques, voici quatre sous-propriétés supplémentaires en incrustation:

Propriété logique	Équivalent de débit horizontal	Ce qu'il fait
inset-block-start	top	Spécifie le décalage du bord de départ dans la direction perpendiculaire à la direction d'écriture.
inset-block-end	bottom	Spécifie le décalage du bord final dans la direction perpendiculaire à la direction d'écriture.
inset-inline-start	left	Spécifie le décalage du bord de départ dans la direction d'écriture, qui correspond à un décalage physique en fonction du mode d'écriture, de la direction et de l'orientation du texte de l'élément.
inset-inline-end	right	Spécifie le décalage du bord final dans la direction d'écriture.

Nous pouvons même regrouper ces quatre sous-propriétés en deux propriétés abrégées supplémentaires:

Propriété logique	Raccourci pour	Ce qu'il fait
inset-inline	inset-inline-start inset-inline-end	Accepte une valeur unique pour définir à la fois inset-inline-startet inset-inline-end. Accepte également deux valeurs, où la première spécifie inset-inline-startet la seconde spécifie inset-inline-end.
inset-block	inset-block-start inset-block-end	Accepte une valeur unique pour définir à la fois inset-block-start et inset-block-end. Accepte également deux valeurs, où la première spécifie inset-block-startet la seconde spécifie inset-block-end.

Démo

Modifiez le mode d'écriture et les valeurs des propriétés incrustées pour avoir une meilleure idée de leur fonctionnement:

Attention: la insetpropriété n'est pas logique

Bien que cela insetfasse partie de la spécification Logical Properties and Values, il ne définit pas les blocs logiques ou les décalages en ligne. Au lieu de cela, il définit les décalages physiques, quels que soient le mode d'écriture, la direction et l'orientation du texte de l'élément. Autrement dit, insetest un raccourci juste pour top, right, bottomet left.

Il y a une discussion ici sur GitHub concernant l'utilisation de certains mots-clés pour pouvoir utiliser cette propriété de manière logique également.

Alors, utilisons-nous encore des compensations physiques? Imaginez que vous vouliez un badge ou un logo fixé en haut et à gauche de votre page et, quelle que soit la langue, vous voulez qu'il soit là. Dans ce cas, vous ne pouvez pas utiliser de décalages logiques et devrez plutôt recourir à des propriétés physiques.

Prise en charge du navigateur

La prise en charge du insetbien en est encore à ses débuts. Au moment d'écrire ces lignes, caniuse estime le soutien mondial à seulement 3,79%.

Bureau

Internet Explorer	Bord	Firefox	Chrome	Safari	Opéra
Non	Non	66+	Non	Non	Non

Mobile

Safari sur iOS	Opera Mini	Navigateur Android	Chrome Android	Firefox Android
Non	Non	68	Non	Non

Plus d'information

• Propriétés et valeurs logiques CSS Niveau 1 (spécification, ébauche de l'éditeur)
• Comprendre les propriétés et les valeurs logiques (Smashing Magazine)
• Propriétés logiques CSS (CSS-Tricks)