Interface utilisateur CSS


Table des matières

    Afficher la table des matières


Interface utilisateur CSS

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

  • resize
  • outline-offset

Prise en charge du navigateur

Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la propriété.

Property
resize 4.0 79.0 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

Redimensionnement CSS

La propriété resize spécifie si (et comment) un élément doit être redimensionnable par l'utilisateur.

This div element is resizable by the user!

To resize: Click and drag the bottom right corner of this div element.

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

Exemple

div
{
   
resize: horizontal;
   
overflow: auto;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>


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

Exemple

div
{
   
resize: vertical;
  overflow: auto;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: vertical;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the height of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>


L'exemple suivant permet à l'utilisateur de redimensionner à la fois la hauteur et la largeur d'un élément <div> :

Exemple

div
{
   
resize: both;
   
overflow: auto;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>


Dans de nombreux navigateurs, <textarea> est redimensionnable par défaut. Ici, nous avons utilisé la propriété resize pour désactiver le redimensionnement :

Exemple

textarea {
  resize: none;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
textarea#test {
   resize: none;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>

&lt;textarea id="test">Textarea - Not resizable&lt;/textarea>
<br><br>

&lt;textarea>Textarea - Resizable (default)&lt;/textarea>

</body>
</html>




Décalage du contour CSS

La propriété outline-offset ajoute un espace entre un contour et le bord ou la bordure d'un élément.

This div has an outline 15px outside the border edge.

Remarque : Le contour diffère des bordures ! Contrairement à la bordure, le contour est dessiné à l'extérieur de la bordure de l'élément et peut chevaucher d'autres contenus. De plus, le plan est NE fait PAS partie des dimensions de l'élément ; la largeur et la hauteur totales de l'élément n'est pas affecté par la largeur du contour.

L'exemple suivant utilise la propriété outline-offset pour ajouter de l'espace entre la bordure et le 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;
} 

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
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;
} 
</style>
</head>
<body>
<h1>The outline-offset Property</h1>

<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>

<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>

</body>
</html>



Propriétés de l'interface utilisateur CSS

Le tableau suivant répertorie toutes les propriétés de l'interface utilisateur :

outline-offset

Ajoute un espace entre un contour et le bord ou la bordure d'un élément

resize

Spécifie si un élément est redimensionnable ou non par l'utilisateur