CSS3 Interface utilisateur
Interface utilisateur CSS3
En CSS3, de nouvelles fonctionnalités d'interface utilisateur ont été ajoutées pour ajuster la taille des éléments, le dimensionnement des boîtes et les contours.
Dans ce chapitre, vous découvrirez les propriétés d'interface utilisateur suivantes :
- resize
- box-sizing
- outline-offset
Prise en charge des navigateurs
Les nombres dans le tableau indiquent le premier numéro de version du navigateur qui prend en charge la propriété.
Le nombre précédant immédiatement -webkit-, -ms- ou -moz- est le premier numéro de version du navigateur qui prend en charge la propriété préfixée.
| Propriété | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
| outline-offset | 4.0 | 15.0 | 5.0 4.0 -moz- |
4.0 | 9.5 |
Redimensionnement CSS3
En CSS3, la propriété resize indique si un élément doit être redimensionné par l'utilisateur.
Le code CSS est le suivant :
Exemple
L'utilisateur spécifie la taille d'un élément div :
Essayez-le vous-même »
Dimensionnement de boîte CSS3
La propriété box-sizing permet de définir un contenu spécifique de manière exacte pour l'adapter à une zone.
Exemple
Spécifiez deux boîtes bordées côte à côte :
Essayez-le vous-même »
Mise en forme des contours CSS3 (outline-offset)
La propriété outline-offset décale le contour et le dessine au-delà du bord de la bordure.
Il y a deux différences entre les contours et les bordures :
- Le contour n'occupe aucun espace
- Les contours peuvent être non rectangulaires
Le code CSS est le suivant :
Exemple
Spécifie un contour de 15 pixels à l'extérieur du bord de la bordure :
Essayez-le vous-même »
Nouvelles fonctionnalités d'interface utilisateur
| Propriété | Description | CSS |
|---|---|---|
| appearance | Permet de donner à un élément l'apparence d'un élément d'interface utilisateur standard | 3 |
| box-sizing | Permet de définir certains éléments d'une manière qui s'adapte à la zone | 3 |
| icon | Permet aux créateurs de définir des éléments comme des équivalents d'icônes. | 3 |
| nav-down | Spécifie où naviguer lors de l'utilisation de la touche de navigation flèche bas | 3 |
| nav-index | Spécifie l'ordre de tabulation d'un élément | 3 |
| nav-left | Spécifie où naviguer à l'aide de la touche de navigation flèche gauche | 3 |
| nav-right | Spécifie où naviguer à l'aide de la touche de navigation flèche droite | 3 |
| nav-up | Spécifie où naviguer lors de l'utilisation de la touche de navigation flèche haut | 3 |
| outline-offset | Le contour est modifié et dessiné au-delà du bord de la bordure | 3 |
| resize | Spécifie si un élément est redimensionné par l'utilisateur | 3 |