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.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété inset-inline-start définit le début 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 parmi top, right, bottom ou left selon les valeurs des propriétés writing-mode, direction et text-orientation.
Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-inline-start. 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-start: 3px; inset-inline-start: 2.4em; /* Valeurs relatives à la largeur */ /* du bloc englobant */ /* 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: unset; Elle est liée aux propriétés inset-block-start, inset-block-end et inset-inline-end qui permettent de définir les autres décalages de l'élément.
Syntaxe
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
HTML
<div> <p class="exemple">Texte pour l'exemple</p> </div> CSS
div { background-color: yellow; width: 120px; height: 120px; } .exemple { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c800; } Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values 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 physiques correspondantes :
-
Les autres propriétés qui définissent les autres décalages :
inset-block-start,inset-block-endetinset-inline-end writing-modedirectiontext-orientation