inset-block-startest une propriété CSS logique qui définit la longueur à laquelle un élément est décalé dans la direction du bloc à partir de son bord de départ. C'est un peu comme déclarer, topsauf que son point de départ est déterminé par l'élément direction, text-orientationet writing-mode, tout comme les 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-block-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-block-startpropriété, elle agira comme topet définira le décalage de l'élément par rapport à son bord de départ, qui est le haut. Vous devez même spécifier un explicite positionsur le même élément pour qu'il prenne effet, tout comme d' topautres propriétés de décalage physique.
Mais changez l'élément writing-modeen quelque chose comme vertical-rlet le bord de départ pivote dans le sens vertical, agissant plus comme la leftpropriété.
Syntaxe
inset-block-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
toppropriété correspondante - Type d'animation: par type de valeur calculée
Valeurs
inset-block-startprend une valeur de longueur et prend en charge les mots clés globaux. Sa valeur par défaut est auto.
/* Length values */ inset-block-start: 50px; inset-block-start: 4em; inset-block-start: 3.5rem inset-block-start: 25vh; /* Percentage values */ inset-block-start: 50%; /* Keyword values */ inset-block-start: auto; /* initial value */ /* Global values */ inset-block-start: initial inset-block-start: inherit; inset-block-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)