Interface utilisateur CSS3
CSS3 a de nouvelles fonctionnalités d'interface utilisateur tels que des éléments de redimensionnement, contours, et la boîte de dimensionnement.
Dans ce chapitre, vous allez en apprendre davantage sur les propriétés de l'interface utilisateur suivantes:
-
resize -
outline-offset
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit- ou -moz- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| resize | 4.0 | Non supporté | 5.0 4.0 -moz- | 4.0 | 15.0 |
| outline-offset | 4.0 | Non supporté | 5.0 4.0 -moz- | 4.0 | 9.5 |
CSS3 redimensionnement
Le resize propriété indique si oui ou non un élément doit être redimensionnable par l'utilisateur.
L'exemple suivant permet à l'utilisateur de redimensionner que la largeur d'un <div> élément:
L'exemple suivant permet à l'utilisateur de redimensionner uniquement la hauteur d'un <div> élément:
L'exemple suivant permet à l'utilisateur de redimensionner la hauteur et la largeur d'un <div> élément:
CSS3 Outline Offset
Le outline-offset propriété ajoute de l' espace entre les grandes lignes et le bord ou la bordure d'un élément.
Les contours diffèrent des frontières de trois façons:
- Un contour est une ligne tracée autour des éléments, en dehors de la bordure
- Un aperçu ne prend pas de place
- Un aperçu peut être non rectangulaire
L'exemple suivant utilise la propriété outline-offset pour ajouter un espace de 15px entre la frontière et le contour:
Exemple
div
{
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Essayez - le vous - même » Propriétés de l'interface utilisateur CSS3
Le tableau suivant répertorie toutes les propriétés de l'interface utilisateur:
| Propriété | La description |
|---|---|
| box-sizing | Permet d'inclure le rembourrage et la bordure dans la largeur et la hauteur totale d'un élément |
| nav-down | Indique où naviguer lorsque vous utilisez la touche de navigation flèche vers le bas |
| nav-index | Indique l'ordre de tabulation pour un élément |
| nav-left | Indique où naviguer lorsque vous utilisez la touche de navigation flèche gauche |
| nav-right | Indique où naviguer lorsque vous utilisez la touche de navigation flèche droite |
| nav-up | Indique où naviguer lorsque vous utilisez la touche de navigation arrow-up |
| outline-offset | Ajoute espace entre les grandes lignes et le bord ou la bordure d'un élément |
| resize | Indique si un élément est redimensionnable par l'utilisateur |