Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
inset-inline-end
Baseline Widely available *
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2021.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
Expérimental:Il s'agit d'unetechnologie expérimentale.
Vérifiez attentivement letableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriétéinset-inline-end définit la fin du décalage logique en ligne (inline) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmitop,right,bottom ouleft selon les valeurs des propriétéswriting-mode,direction ettext-orientation.
Note :Avant Firefox 63, cette propriété était implémentée avec le nomoffset-inline-end. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.
/* Valeurs de longueur *//* Type <length> */inset-inline-end: 3px;inset-inline-end: 2.4em;/* Valeurs relatives à la largeur *//* du bloc englobant *//* Type <percentage> */inset-inline-end: 10%;/* Valeurs avec un mot-clé */inset-inline-end: auto;/* Valeurs globales */inset-inline-end: inherit;inset-inline-end: initial;inset-inline-end: unset;Elle est liée aux propriétésinset-block-start,inset-block-end etinset-inline-start qui permettent de définir les autres décalages de l'élément.
Syntaxe
Valeurs
La propriétéinset-inline-end peut prendre les mêmes valeurs que la propriétéleft.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | éléments positionnés |
| Héritée | non |
| Pourcentages | largeur logique du bloc englobant |
| Valeur calculée | identiques aux propriétés qui décalent les boîtes :top,right,bottom,left sauf que ces directions sont logiques |
| Type d'animation | unelongueur,pourcentage ou calc() ; |
Syntaxe formelle
inset-inline-end =
auto|
<length-percentage>
<length-percentage> =
<length>|
<percentage>
Exemples
HTML
<div> <p>Texte pour l'exemple</p></div>CSS
div { background-color: yellow; width: 120px; height: 120px;}.exemple { writing-mode: vertical-lr; position: relative; inset-inline-end: 20px; background-color: #c8c800;}Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-inset-inline-end |
| CSS Positioned Layout Module Level 3 # propdef-inset-inline-end |
Compatibilité des navigateurs
Voir aussi
Les propriétés physiques correspondantes :
writing-modedirectiontext-orientationLes propriétés qui définissent les autres décalages :