Interface utilisateur CSS

Interface utilisateur CSS

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

  • resize
  • outline-offset

Prise en charge du navigateur

Les numéros dans le tableau indiquent la première version de navigateur qui prend en charge entièrement cette propriété.

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) ajusté en taille par l'utilisateur.

Cet élément div peut être ajusté en taille par l'utilisateur !

Ajustement de la taille : cliquez et glissez dans le coin inférieur droit de cet élément div.

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

L'exemple suivant ne permet qu'à l'utilisateur de modifier la largeur de l'élément <div> :

Exemple

div {
  resize: horizontal;
  overflow: auto;
}

Essayer par vous-même

L'exemple suivant ne permet qu'à l'utilisateur de modifier la hauteur de l'élément <div> :

Exemple

div {
  resize: vertical;
  overflow: auto;
}

Essayer par vous-même

L'exemple suivant permet à l'utilisateur de modifier 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 ajustabilité :

Exemple

textarea {
  resize: none;
}

Essayer par vous-même

Décalage du contour CSS

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

Ce div a une silhouette de 15px à l'extérieur de la bordure.

Attention :La silhouette est différente de la bordure ! Contrairement à la bordure, la ligne de silhouette est dessinée en dehors de la bordure de l'élément et peut chevaucher d'autres contenus. De plus, la silhouette 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 influencées par la largeur de la ligne de silhouette.

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

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 le bord extérieur de l'élément.
resize Détermine si un élément peut être redimensionné par l'utilisateur.