inset-blockest une propriété CSS logique abrégée qui définit la longueur à laquelle un élément est décalé dans le sens du bloc en combinant inset-block-startet inset-block-end. C'est un peu comme déclarer topet bottomsauf que ses points de départ et de fin sont déterminés 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: 50px 15%; 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-blockpropriété, il agira comme le paramètre topet bottomet définira le décalage de l'élément à partir du bord inférieur. 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 «inférieur» pivote dans le sens vertical, agissant plus comme les propriétés leftet right.
Syntaxe
inset-block: ;- 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 aux propriétés correspondantes
topetbottom - 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-block: 50px; inset-block: 4em; inset-block: 3.5rem inset-block: 25vh; /* Percentage values */ inset-block: 50%; /* Keyword values */ inset-block: auto; /* initial value */ /* Global values */ inset-block: initial inset-block: inherit; inset-block: 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)