Interface utilisateur CSS

Interface utilisateur CSS

Dans ce chapitre, vous apprendrez les propriétés CSS d'interface utilisateur suivantes :

  • resize
  • outline-offset

Prise en charge du navigateur

Les nombres dans le tableau indiquent la version du premier navigateur qui prend en charge cette propriété pleinement.

Propriété Chrome IE Firefox Safari Opera
resize 4.0 Non pris en charge 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

Ajustement CSS

resize L'attribut détermine si l'élément doit être (et comment) redimensionné par l'utilisateur.

Cet élément div peut être redimensionné par l'utilisateur !

Redimensionnement : cliquez et faites glisser le coin inférieur droit de cet élément div.

Attention :Internet Explorer ne prend pas en charge l'attribut resize.

Le suivant exemple permet uniquement à l'utilisateur de redimensionner la largeur de l'élément <div> :

Exemple

div {
  resize: horizontal;
  overflow: auto;
}

Essayer par vous-même

Le suivant exemple permet uniquement à l'utilisateur de redimensionner la hauteur de l'élément <div> :

Exemple

div {
  resize: vertical;
  overflow: auto;
}

Essayer par vous-même

Le suivant exemple permet à l'utilisateur de redimensionner la hauteur et la largeur de l'élément <div> :

Exemple

div {
  resize: both;
  overflow: auto;
}

Essayer par vous-même

Dans de nombreux navigateurs, <textarea> est par défaut ajustable en taille. Ici, nous utilisons l'attribut resize pour désactiver cette capacité de redimensionnement :

Exemple

textarea {
  resize: none;
}

Essayer par vous-même

Décalage du profil CSS

outline-offset L'attribut ajoute de l'espace entre la contour et la bordure de l'élément.

Ce div a un contour de 15px à l'extérieur de la bordure.

Attention :La contour est différente de la bordure ! Contrairement à la bordure, la ligne de contour est dessinée à l'extérieur de la bordure de l'élément et peut chevaucher d'autres contenus. De plus, la contour n'est pas une partie de la taille de l'élément : la largeur et la hauteur totales de l'élément ne sont pas affectées par la largeur de la ligne de contour.

Le suivant exemple utilise l'attribut outline-offset pour ajouter de l'espace entre la bordure et la contour :

Exemple

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

Essayer par vous-même

Propriétés d'interface utilisateur CSS

Le tableau suivant liste toutes les propriétés d'interface utilisateur :

Propriété Description
outline-offset Ajoute de l'espace entre le contour et la marge de l'élément.
resize Détermine si un élément peut être redimensionné par l'utilisateur.