inset-inline-startest une propriété CSS qui définit la longueur à laquelle un élément est décalé dans la direction en ligne de départ. C'est un peu comme déclarer leften ce sens qu'il s'applique aux éléments positionnés et décale un élément dans la direction gauche, sauf que ses points de départ et de fin peuvent être modifiés en fonction de l'élément direction, text-orientationet writing-mode, tout comme d'autres propriétés logiques.
La propriété fait partie de la spécification CSS Logical Properties and Values Level 1 qui est actuellement à l'état Brouillon de l'éditeur. Cela signifie que la définition et les informations à ce sujet peuvent changer entre maintenant et la recommandation officielle.
.element ( inset-inline-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Ainsi, par exemple, si le mode d'écriture est défini sur horizontal-lrla inset-inline-startpropriété, il agira comme un paramètre left, en décalant un élément du bord gauche. Vous devez même spécifier un explicite positionsur le même élément pour qu'il prenne effet, tout comme les propriétés de décalage physique.
Mais changez l'élément writing-modeen quelque chose comme vertical-lret le bord «de départ» est tourné dans le sens vertical, agissant plus comme le à la topplace.
Syntaxe
inset-inline-start: ;- Valeur initiale:
auto - S'applique à: éléments positionnés
- Héritée: non
- Pourcentages: comme pour la propriété physique correspondante
- Valeur calculée: identique à la
leftpropriété correspondante - Type d'animation: par type de valeur calculée
Valeurs
inset-blockprend une valeur de longueur et prend en charge les mots clés globaux. Sa valeur par défaut est auto.
/* Length values */ inset-inline-start: 50px; inset-inline-start: 4em; inset-inline-start: 3.5rem inset-inline-start: 25vh; /* Percentage values */ inset-inline-start: 50%; /* Keyword values */ inset-inline-start: auto; /* initial value */ /* Global values */ inset-inline-start: initial inset-inline-start: inherit; inset-inline-start: unset;Prise en charge du navigateur
| C'EST À DIRE | Bord | Firefox | Chrome | Safari | Opéra |
|---|---|---|---|---|---|
| Non | Non | 63+ | Non | Non | Non |
| Chrome Android | Android Firefox | Navigateur Android | Safari sur iOS | Opera Mini |
|---|---|---|---|---|
| Non | 79+ | Non | Non | Non |
Démo
Lectures complémentaires
- Spécification des propriétés logiques et valeurs CSS niveau 1 (version préliminaire de l'éditeur)
- Documentation MDN
- Comprendre les propriétés et les valeurs logiques (Smashing Magazine)
- Propriétés logiques CSS (Adrian Roselli)
- Règles horizontales bidirectionnelles en CSS (Hussein Al Hammad)