inset-inline-start
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-start définit le décalage logique de début en ligne d'un élément, qui correspond à un décalage physique selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle correspond à la propriété top, right, bottom ou 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
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: horizontal-tb;
direction: rtl;
writing-mode: vertical-lr;
<section id="default-example">
<div class="example-container" id="example-element">
<div id="abspos">
Je suis positionné absolument avec inset-inline-start: 50px
</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-element {
border: 0.75em solid;
padding: 0.75em;
position: relative;
width: 100%;
min-height: 200px;
unicode-bidi: bidi-override;
}
#abspos {
background-color: yellow;
color: black;
border: 3px solid red;
position: absolute;
inset-inline-start: 50px;
inline-size: 140px;
min-block-size: 80px;
}
Syntaxe
/* Valeurs de type <length> */
inset-inline-start: 3px;
inset-inline-start: 2.4em;
inset-inline-start: calc(anchor(--my-anchor 50%) + 10px);
inset-inline-start: anchor-size(width);
/* Valeurs relatives à la largeur du bloc englobant */
/* Valeurs de type <percentage> */
inset-inline-start: 10%;
/* Valeurs avec un mot-clé */
inset-inline-start: auto;
/* Valeurs globales */
inset-inline-start: inherit;
inset-inline-start: initial;
inset-inline-start: revert;
inset-inline-start: revert-layer;
inset-inline-start: unset;
La propriété raccourcie pour inset-inline-start et inset-inline-end est inset-inline.
Valeurs
La propriété inset-inline-start 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 | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
inset-inline-start =
auto |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Exemples
Définir le décalage de début en ligne
HTML
<div>
<p class="exempleTexte">Texte pour l'exemple</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exempleTexte {
writing-mode: vertical-lr;
position: relative;
inset-inline-start: 20px;
background-color: #c8c800;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-inset-inline-start |
| CSS Positioned Layout Module Level 3 # propdef-inset-inline-start |
Compatibilité des navigateurs
Voir aussi
- Les propriétés qui définissent d'autres décalages :
inset-block-start,inset-block-endetinset-inline-end - Les propriétés physiques correspondantes :
top,right,bottometleft - Les propriétés
writing-mode,direction,text-orientation