Inset-block, inset-inline, etc. Propriétés CSS

Schéma de la syntaxe de inset-block.

Description des termes utilisés sur le schéma :

• length est une valeur numérique suivie d'une des unités 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 :

Toutes ces propriétés définissent l'emplacement d'un élément non statique (dont la propriété position n'est pas sur 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 (voyez des explications sur le mode d'écritures (Writing Mode) ici : modes d'écriture.

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.

Vous pouvez également consulter une présentation générale sur les modes d'écriture en fonction des langues.

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 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 block n'est pas spécifiée ou est spécifiée sur auto, l'élément pourra être redimensionné pour satisfaire les valeurs de inset-block. Par contre, si la dimension de l'élément est définie, la deuxième valeur de inset-block est 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 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 direction inline.

  
  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 inline n'est pas spécifiée ou est spécifiée sur auto. Par contre, si la dimension de l'élément est définie dans le sens inline, la deuxième valeur de inset-inline est ignorée.

• inset-inline: initial; (auto) inset-inline: inherit; inset-inline: revert; inset-inline: revertLayer; inset-inline: unset;

  inset-block: initial; (auto) inset-block: inherit; inset-block: revert; inset-block: revertLayer; inset-block: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

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.

Exemple interactif avec la propriété inset-block.

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.

1

Propriété
inset-block

2

Propriété
inset-inline

Estimation de la prise en charge globale.

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique des propriétés inset-block et inset-inline.

• Module CSS - Propriétés et valeurs logiques - Niveau 1

  Synthèse des propriétés logiques telles que inset-block et inset-inline.
  

  18 Mai 2017

  Document de travail.

  

  

  

• Module CSS - Éléments positionnés - Niveau 3

  Introduction des propriété inset-block et inset-inline.
  

  07 Février 2012

  Document de travail.

  

  

  

Voir aussi, concernant le dimensionnement des blocs.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété inset-block et décrite dans le module CSS Positioned Layout Module.
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :