Interface utilisateur CSS
Interface utilisateur CSS
Dans ce chapitre, vous découvrirez les propriétés d'interface utilisateur CSS suivantes :
resizeoutline-offset
Prise en charge du navigateur
Les nombres dans le tableau indiquent 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 resizepropriété spécifie si (et comment) un élément doit être redimensionnable par l'utilisateur.
Cet élément div est redimensionnable par l'utilisateur !
Pour redimensionner : cliquez et faites glisser le coin inférieur droit de cet élément div.
L'exemple suivant permet à l'utilisateur de redimensionner uniquement la largeur d'un élément <div> :
Exemple
div
{
resize: horizontal;
overflow: auto;
}
L'exemple suivant permet à l'utilisateur de redimensionner uniquement la hauteur d'un élément <div> :
Exemple
div
{
resize: vertical;
overflow: auto;
}
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;
}
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;
}
Décalage du contour CSS
La outline-offsetpropriété ajoute de l'espace entre un contour et le bord ou la bordure d'un élément.
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 contour ne fait PAS partie des dimensions de l'élément ; la largeur et la hauteur totales de l'élément ne sont pas affectées par la largeur du contour.
L'exemple suivant utilise la outline-offsetpropriété pour ajouter un 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;
}
Propriétés de l'interface utilisateur CSS
Le tableau suivant répertorie toutes les propriétés de l'interface utilisateur :
| Property | Description |
|---|---|
| outline-offset | Adds space between an outline and the edge or border of an element |
| resize | Specifies whether or not an element is resizable by the user |