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

inset-inline
inset-block

Résumé des caractéristiques de la propriété inset-inline

Description rapide
Définit l'emplacement d'un élément positionné dans la direction inline.
Statut
Standard
S'applique à
Éléments positionnés autrement que en static (asolute, relative, etc.).
Utilisable sur
HTML
Valeurs prédéfinies
auto
Pourcentages
Calculés par rapport à la dimension de l'élément parent dans la direction inline.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété inset-inline passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Propriétés et valeurs logiques
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: WD (document de travail)

Schéma syntaxique de inset-block.

Inset-block property - Syntax diagramSyntax diagram of the inset-block CSS property. See stylescss.free.fr for details. auto auto length / % length / % {1,2} {1,2}inset-block:;inset-block:;
Schéma syntaxique de la propriété
inset-block
Inset-inline property - Syntax diagramSyntax diagram of the inset-inline CSS property. See stylescss.free.fr for details. auto auto length / % length / % {1,2} {1,2}inset-inline:;inset-inline:;
Schéma syntaxique de la propriété
inset-inline

Précisions 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 :

Propriétés raccourciesPropriétés individuelles
inset-blockinset-block-start
inset-block-end
inset-inlineinset-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 (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.

Conflit avec la propriété inset-inline
width:auto;
inset-inline:100px 100px;
L'élément est redimensionné pour satisfaire les 100 pixels de chaque côté.
Conflit avec la propriété inset-inline
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.

   

top
left
La direction et le sens d'écriture de ce texte s'adaptent à la langue choisie.
right
bottom

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.

    Propriété inset-block avec une seule valeur
    Une seule valeur
    Elle s'applique aux deux bords (début de bloc et fin de bloc).
    Propriété inset-block avec deux valeurs
    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.

    Propriété inset-inline avec une seule valeur
    Une seule valeur
    Elle s'applique aux deux bords suivant la direction inline.
    Propriété inset-inline avec deux valeurs
    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.

Valeurs communes à toutes les propriétés :

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.

Nostalgie de Space Invaders 1 Nostalgie de Space Invaders 2

 

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).

Mode d'écriture :
inset-block :
inset-inline :
Bloc positionné en absolu

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.
90%
90%

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.

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 Logical Properties and Values.
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

border-block-color
Définit la couleur des traits de bordure, pour les côtés début et fin de bloc.
border-block-end
Définit tous les paramètres de la bordure du côté fin de bloc.
border-block-end-color
Définit la couleur des traits de bordure, du côté fin de bloc.
border-block-end-style
Définit le style des traits de bordure pour le côté fin des blocs.
border-block-end-width
Définit l'épaisseur de la bordure du côté de la fin des blocs.
border-block-start
Définit tous les paramètres de la bordure du côté début de bloc.
border-block-start-color
Définit la couleur des traits de bordure, du côté début de bloc.
border-block-start-style
Définit le style des traits de bordure pour le côté début des blocs.
border-block-start-width
Définit l'épaisseur de la bordure du côté du début des blocs.
border-block-style
Définit le style des traits de bordure pour les côtés début et fin des blocs.
border-block-width
Définit l'épaisseur des bordures en début et en fin des blocs.
border-end-end-radius
Définit le rayon de l'arrondi de l'angle en fin de ligne et fin de bloc.
border-end-start-radius
Définit le rayon de l'arrondi de l'angle en fin de ligne et début de bloc.
border-inline-color
Définit la couleur des traits de bordure, des côtés début et fin de ligne.
border-inline-end
Définit tous les paramètres de la bordure du côté fin de ligne.
border-inline-end-color
Définit la couleur des traits de bordure, du côté fin de ligne.
border-inline-end-style
Définit le style des traits de bordure pour le côté fin des lignes.
border-inline-end-width
Définit l'épaisseur de la bordure du côté de la fin des lignes.
border-inline-start
Définit tous les paramètres de la bordure du côté début de ligne.
border-inline-start-color
Définit la couleur des traits de bordure, du côté début de ligne.
border-inline-start-style
Définit le style des traits de bordure pour le côté début des lignes.
border-inline-start-width
Définit l'épaisseur de la bordure du côté du début des lignes.
border-inline-style
Définit le style des traits de bordure pour les côtés début et fin des lignes.
border-inline-width
Définit l'épaisseur des bordures en début et en fin des lignes.
border-start-end-radius
Définit le rayon de l'arrondi de l'angle en début de ligne et fin de bloc.
inset-inline
Définit l'emplacement d'un élément positionné dans la direction inline.
margin-block
Définit la dimension des marges dans la direction des blocs compte-tenu du mode d'écriture.
margin-inline
Définit la dimension des marges au début et à la fin des lignes, compte tenu du mode d'écriture.
max-block-size
Définit une limite maximale pour la taille d'un élément, dans la direction des blocs.
max-inline-size
Définit une limite maximale pour la taille d'un élément, dans la direction des lignes.
min-block-size
Définit une limite minimale pour la dimension d'un élément, dans la direction des blocs.
min-inline-size
Définit une limite minimale pour la dimension d'un élément, dans la direction des lignes.
padding-block
Définit les marges intérieures dans la direction des blocs.
padding-inline
Définit les marges intérieures dans la direction des lignes.