Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

inset - Propriété CSS

inset

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

Description rapide
Définit la position de l'élément lorsque celui-ci est positionné autrement qu'en statique.
Statut
Standard
Type de valeur
Dimension {1-4}
Valeurs prédéfinies
auto
Pourcentages
Calculés par rapport à la taille du bloc parent.
Valeur initiale
auto
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété inset 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)

Description de la propriété inset.

La propriété inset définit l'emplacement d'un élément positionné autrement qu'en statique, c'est à dire ceux pour lesquels la propriété position a une des valeurs absolute, fixed, relative ou sticky. Elle est 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.

inset est en fait une propriété résumée des quatre propriétés top, right, bottom et left. Contrairement à ce qu'on pourrait croire, ce n'est pas un raccourci pour inset-block et inset-inline car ces deux propriétés sont sensibles à la direction et au sens d'écriture, tandis que inset ne l'est pas.

Prise en charge de la langue.

Si le positionnement doit se faire relativement au mode d'écriture, on utilisera plutôt les propriétés inset-inline et inset-block.

   

inset
(top)
inset
(left)
La direction et le sens d'écriture de ce texte s'adap­tent à la langue choisie.
inset
(right)
inset
(bottom)

Syntaxes pour inset.

  • length est une valeur numérique suivie d'une unité de dimension.
  • % est un pourcentage dont l'évaluation correspond à une dimension.
  • Cette syntaxe peut être répétée de 1 à 4 fois.
inset - SyntaxSyntax diagram of the inset CSS property. auto auto length / % length / % {1,4} {1,4}inset:;inset:;
  • inset: auto;

    La position de l'élément est déterminée par le navigateur.

  • inset: 15px 25px 30px 50px; a b c d

    De une à quatre valeurs, séparées par des espaces, et suivies d'une unité de dimension (voir les unités CSS de dimension). Chacune de ces valeurs définit la distance de l'un des bords de l'élément par rapport à la référence :
    - La page si l'élément est position en absolu.
    - L'écran si l'élément est positionné en fixed.
    - Etc.

    Suivant le nombre de valeurs présentes dans la syntaxe, le navigateur devra les traiter de la façon suivante :

    Propriété inset avec une seule valeur
    Une seule valeur
    Elle s'applique à tous les côtés.
    Propriété inset avec deux valeurs
    Deux valeurs
    La première s'applique a bord haut et au bord bas, et la deuxième au bord gauche et au bord droit.
    Propriété inset avec trois valeurs
    Trois valeurs
    Elles s'appliquent conformément au schéma ci-dessus.
    Propriété inset avec quatre valeurs
    Quatre valeurs
    Elles s'appliquent chacune à un des 4 côtés, en commençant par le haut.

    Si les valeurs sont exprimées en pourcentages, ceux-ci sont calculés par rapport aux dimensions du bloc parent.

    Si les dimensions de l'élément ne sont pas imposées, ce dernier peut être redimensionné pour satisfaire les contraintes définies par inset. Si les dimensions de l'élément sont fixées, il peut y avoir contradiction avec la propriété inset. Dans ce cas, les valeurs correspondant à bottom et right seront ignorées.

  • inset: initial; inset: inherit; inset: revert; inset: revert-layer; inset: unset;

    La valeur initiale est : auto.

Animation de inset

Des éléments mobiles peuvent facilement être créés, en fixant leur position (ici en relative) et en appliquant une animation sur la propriété inset.

Cible avec une position animée

Manipulation de la propriété inset par programme.

Dans les exemples de code ci-après, le paramètre el représente l'élément de la page sur lequel on souhaite travailler.

Voici deux exemples de code pour modifier, en Javascript, la valeur de la propriété inset pour un élément el.


function setInset(el) {
el.style['inset']='10px 0 0 10px';
}
ou

function setInset(el) {
el.style.inset='10px 0 0 10px';
}

Deux syntaxes également pour lire la valeur de inset. La propriété doit avoir été affectée directement à l'élément lui-même et non pas par l'intermédiaire d'une classe. La valeur est renvoyée sous la même forme et les mêmes unités que lors de sa définition dans la feuille de styles.


function getInset(el) {
return el.style['inset'];
}
ou

function getInset(el) {
return el.style.inset;
}

Pour retrouver la valeur calculée de inset, utilisez le code ci-dessous. La valeur renvoyée est, soit le mot auto, soit de une à quatre valeurs en pixels, même si d'autres unités ont été utilisées pour définir la propriété dans la feuille de styles.


function getInset(el) {
return window.getComputedStyle(el).getPropertyValue('inset');
}

Avec JQuery, modifier ou relire la valeur calculée de la propriété inset peut se faire avec les codes ci-dessous. La valeur calculée qui est renvoyée est, soit le mot auto, soit une série de une à quatre valeurs en pixels.


function setInset(el) {
$(el).css('inset','auto');
}

function getInset(el) {
return $(el).css('inset');
}

Simulateur.

Le simulateur agit sur le bloc bleu, qui se trouve au départ sur la gauche de la fenêtre du navigateur. Ce bloc est en position fixe par rapport à la fenêtre du navigateur. Dans la mesure où les dimensions du bloc sont fixées, les 2ème et 3ème valeurs de inset sont ignorées. Elles correspondant au positionnement par la droite et par le bas.

En changeant la langue, vous constaterez que la propriété inset est bien une propriété physique (qui ne s'adapte pas au mode d'écriture) puisque la position du bloc ne change pas en fonction de la langue.


Mode d'écriture :

inset :


Ce bloc est
positionné par
rapport à la page
position:fixed;
with:250px;
height:180px;

Compatibilité.

La prise en charge de inset est correcte, sauf pour Internet Explorer puisque, à l'époque, cette propriété n'existait pas.

1
inset
Estimation de la prise en charge en pourcentage du parc actuel.
90%

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

Les spécifications CSS éditées par le W3C sont organisées en modules. inset 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.

Propriétés.

Définit l'emplacement d'un élément positionné dans la direction 'block'.
Définit l'emplacement d'un élément positionné dans la direction 'inline'.
Définit une limite maximale pour la taille d'un élément, dans la direction des blocs.
Définit une limite maximale pour la taille d'un élément, dans la direction des lignes.
Définit une limite minimale pour la dimension d'un élément, dans la direction des blocs.
Définit une limite minimale pour la dimension d'un élément, dans la direction des lignes.