inset-inline
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.
La propriété CSS inset-inline définit les décalages logiques de début et de fin d'un élément dans la direction en ligne, qui correspondent à des décalages physiques selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle correspond aux propriétés top et bottom, ou right et left selon les valeurs définies pour writing-mode, direction et text-orientation.
Cette propriété d'encart n'a aucun effet sur les éléments non positionnés.
Exemple interactif
inset-inline: 5% 10%;
writing-mode: horizontal-tb;
inset-inline: 10px 40px;
writing-mode: vertical-rl;
inset-inline: 5% 10%;
writing-mode: horizontal-tb;
direction: rtl;
<section id="default-example">
<div class="example-container">
<div id="example-element">Je suis positionné absolument.</div>
<p>
Il y a autant de boue dans les rues que si les eaux venaient à peine de se
retirer de la surface de la terre, et il ne serait pas étonnant de croiser
un Mégalosaure, long d'une douzaine de mètres, se dandinant comme un
lézard éléphantesque dans Holborn Hill.
</p>
</div>
</section>
.example-container {
border: 0.75em solid #ad1457;
padding: 0.75em;
text-align: left;
position: relative;
width: 100%;
min-height: 200px;
}
#example-element {
background-color: #07136c;
border: 6px solid #ffa000;
color: white;
position: absolute;
inset: 0;
}
Propriétés constitutives
Cette propriété est une abréviation pour les propriétés CSS suivantes :
Syntaxe
/* Valeurs de type <length> */
inset-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /* La valeur est appliquée des deux côtés */
inset-inline: auto calc(anchor(self-start) + 20px);
inset-inline: 400px anchor-size(--my-anchor height, 100px);
/* Les valeurs en pourcentage sont relatives à la largeur ou à la hauteur du bloc englobant */
/* Valeurs de type <percentage> */
inset-inline: 10% 5%;
/* Valeur avec un mot-clé */
inset-inline: auto;
/* Valeurs globales */
inset-inline: inherit;
inset-inline: initial;
inset-inline: revert;
inset-inline: revert-layer;
inset-inline: unset;
Valeurs
La propriété inset-inline peut prendre les mêmes valeurs que la propriété left.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | éléments positionnés |
| Héritée | non |
| Pourcentages | largeur logique du bloc englobant |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
inset-inline =
<'top'>{1,2}
<top> =
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Exemples
Définir les décalages de début et de fin en ligne
HTML
<div>
<p class="exempleTexte">Texte d'exemple</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exempleTexte {
writing-mode: vertical-lr;
position: relative;
inset-inline: 20px 50px;
background-color: #c8c800;
}
Exemples
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-inset-inline |
| CSS Positioned Layout Module Level 3 # propdef-inset-inline |
Compatibilité des navigateurs
Voir aussi
- Les propriétés physiques correspondantes :
top,right,bottometleft - La propriété raccourcie physique :
inset - La propriété raccourcie de bloc :
inset-block - Les propriétés
writing-mode,direction,text-orientation