Les propriétés inset-block et inset-inline
Résumé des caractéristiques de la propriété inset-inline
static (asolute, relative, etc.).autoinline.autoinset-inline passe progressivement d'une valeur à une autre.Schéma syntaxique de inset-block.
inset-block
inset-inline
Précisions sur le schéma :
lengthest une valeur numérique suivie d'une unité de dimension.%est un pourcentage calculé par rapport à la dimension correspondante de l'élément parent.
Description des propriétés inset-block et inset-inline.
Les deux propriétés inset-block et inset-inline sont des raccourcis pour
les quatre propriétés suivantes :
| Propriétés raccourcies | Propriétés individuelles |
|---|---|
inset-block | inset-block-start |
inset-block-end | |
inset-inline | inset-inline-start |
inset-inline-end |
Toutes ces propriétés définissent l'emplacement d'un élément non statique, ou plus précisément l'emplacement de l'un des bords de l'élément.
Les quatre propriétés individuelles sont donc équivalentes aux propriétés top, right,
bottom et left, sauf qu'elles sont dépendantes de la direction et du sens d'écriture.
Reportez-vous à la page de ces propriétés pour des explications plus détaillées.
Les propriétés inset...ont un effet sur les éléments qui sont positionnés, c'est à dire ceux pour lesquels
la propriété position a une des valeurs absolute, fixed, relative ou sticky.
Elles sont sans effet sur les éléments non positionnés, c'est à dire les éléments pour lesquels la propriété position a sa valeur initiale
ou static.
Reportez-vous à la propriété position pour plus de détails sur le positionnement des éléments.
Des conflits peuvent apparaître : il peut être par exemple impossible de fixer en même temps la distance par rapport au bord droit et celle par
rapport au bord gauche.
Pour résoudre ces conflit, l'élément peut être redimensionné si ses dimensions ne sont pas spécifiées ou sont spécifiées sur auto.
Par contre, si les dimensions de l'élément sont définies, les valeurs du côté end sont ignorées.
Voici une illustration avec la propriété inset-inline. Le mécanisme est identique pour inset-block.
width:auto;
inset-inline:100px 100px;L'élément est redimensionné pour satisfaire les 100 pixels de chaque côté.
width:400px;
inset-inline:100px 100px;La valeur du côté
end est ignorée.
Prise en charge de la langue.
inset-block et inset-inline sont des propriétés logiques, c'est à dire qu'elles prennent en compte
la direction et le sens d'écriture.
Par exemple les langues latines s'écrivent de gauche à droite, puis du haut vers le bas.
Le schéma ci-dessous montre l'influence de la langue sur ces propriétés.
topleftrightbottomVous pouvez également consulter une présentation générale sur les modes d'écriture en fonction des langues
sur la page de la propriété writing-mode.
Syntaxes pour inset-block et inset-inline.
- inset-block: auto; inset-inline: auto;
La position de l'élément est déterminée par le navigateur.
- inset-block: 120px 100px; a b
De une à deux valeurs séparées par un espace, et suivies d'une unité de dimension (voir les unités CSS de dimension). Les pourcentages sont calculés par rapport à la dimension correspondante de l'élément parent.
Ces deux valeurs agissent suivant l'axe des blocs (verticalement pour les langues latines). Si une seule valeur est précisée, elle s'applique à l'identique au début et à la fin du bloc.
Une seule valeur
Elle s'applique aux deux bords (début de bloc et fin de bloc).
Deux valeurs
La première s'applique au bord qui est le début du bloc, et la deuxième au bord qui est la fin du bloc.La syntaxe de notre exemple est équivalente à :
inset-block-start: 120px; inset-block-end: 100px;Rappelons que, si la dimension de l'élément dans le sens
blockn'est pas spécifiée ou est spécifiée surauto, l'élément pourra être redimensionné pour satisfaire les valeurs deinset-block. Par contre, si la dimension de l'élément est définie, la deuxième valeur deinset-blockest ignorée. - inset-inline: 120px 100px; a b
Une à deux valeurs séparées par un espace, et suivies d'une unité de dimension (voir les unités CSS de dimension). Les pourcentages sont calculés par rapport à la dimension correspondante de l'élément parent.
Ces deux valeurs agissent suivant l'axe des lignes (direction horizontale pour les langues latines). Si une seule valeur est précisée, elle s'applique au bord situé en début des lignes et au bord situé à la fin des lignes.
Une seule valeur
Elle s'applique aux deux bords suivant la directioninline.
Deux valeurs
Elles s'appliquent respectivement au bord qui est le début des lignes, et au bord qui est la fin des lignes.La syntaxe de notre exemple est équivalente à :
inset-inline-start: 120px; inset-inline-end: 100px;L'élément peut être redimensionné si sa dimension dans le sens
inlinen'est pas spécifiée ou est spécifiée surauto. Par contre, si la dimension de l'élément est définie dans le sensinline, la deuxième valeur deinset-inlineest ignorée. - inset-block:
initial; inset-block:inherit; inset-block:revert; inset-block:revert-layer; inset-block:unset;La valeur initiale est :
auto
Animation des propriétés inset-block et inset-inline
Des éléments mobiles peuvent facilement être créés, en fixant leur position (ici en relative) et
en appliquant une animation sur les propriétés inset-block et/ou inset-inline.
Simulateur.
L'élément bleu ci-dessous est positionné en absolu (position:absolute). Son emplacement sur la page est donc déterminé par les deux propriétés
inset-block et inset-inline.
Attention ! dans le sens vertical, si vous spécifiez une valeur trop faible, vous devrez revenir tout en haut de la page pour retrouver l'élément bleu.
D'autre part, la largeur et la hauteur de l'élément ont été définies, il est donc inutile de spécifer deux valeurs pour inset-block et inset-inline :
seule la première sera prise en compte (voir les explications plus haut concernant les interactions avec les dimensions de l'élément).
Compatibilité.
La prise en charge des deux propriétés inset-block et inset-inline est maintenant complète.
inset-blockinset-inlineNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que inset-block.
Les spécifications CSS éditées par le W3C sont organisées en modules. inset-block fait partie du Module CSS - Propriétés et valeurs logiques (CSS Logical Properties and Values). Les définitions suivantes sont également décrites dans ce même module.