outline - Propriété CSS
Résumé des caractéristiques de la propriété outline
Description de la propriété outline
.
outline
définit les contours de l'élément.
outline
est une propriété résumée qui regroupe les valeurs de ces autres propriétés CSS.
outline-color
: couleur du contour.outline-style
: style du contour : trait plein, pointillé, trait double, etc. Cette valeur doit obligatoirement être définie pour que le contour s'affiche.outline-width
: épaisseur du contour.
Au sujet des contours.
Ne confondez pas les contours (outline
) et les bordures (border
) :
la principale différence est que l'épaisseur des contours ne modifie ni les dimensions de l'élément ni sa position :
les contours sont comme dessinés par dessus, sans interagir avec la mise en page.
Mais il existe d'autres différences :
border
)outline
)block
ont une forme rectangulaire mais les éléments inline
peuvent prendre des formes variées lorsqu'ils s'étendent sur plusieurs lignes.
Dans ce cas, les bordures et les contours se comportent différemment.
Par exemple, ce texte,
qui s'étend sur plusieurs lignes,
est entouré d'une bordure.
On voit que la bordure est construite par une succession de rectangles non raccordés entre eux.
Par exemple, cet autre texte,
sur plusieurs lignes également,
possède un contour.
La forme du contour s'est calquée sur celle de l'élément. Le raccordement des différents parties peut être définie par
box-decoration-break
.
outline-offset
.
Exemple avec des dimensions mesurées sur la bordure.
Une explication par l'exemple. Les cadres ci-dessous ont, pour le premier une bordure d'épaisseur 20 pixels, et pour le second,
un contour de la même épaisseur. Par ailleurs, leur propriété box-sizing
est positionnée sur border-box
.
La bordure restreint la place réservée au contenu du bloc, contrairement au contour qui ne change pas la place disponible dans l'élément.
Comme on le voit sur l'exemple, le contour peut empiéter sur les éléments voisins.
Exemple avec des dimensions mesurées sur le contenu.
Ce deuxième exemple diffère par la propriété box-sizing
qui est cette fois-ci fixée à content-box
.
Dans ce cas, l'épaisseur de la bordure est ajoutée aux dimensions du bloc : l'élément bleu a été décalé vers le bas
et les éléments suivants sont décalés aussi.
A contrario, le contour ne change pas les dimensions et ne change pas non plus la position des éléments suivants.
Ce qui peut provoques un chevauchement du contour avec les éléments voisins.
Exemples d'utilisation des contours outline
.
Association d'une bordure et d'un contour.
Utilisation des contours avec :hover
.
Puisque les contours (outline
) ne changent pas la taille de l'élément, il est pratique de les
appliquer avec :hover
: l'ajout de contour ne provoque pas de décalage des éléments qui suivent.
Dans l'exemple ci-dessous, constatez que, au survol de la souris, le premier élément, auquel on ajoute une bordure, décale tous les suivants,
tandis que, pour un effet visuel comparable, l'ajout d'un contour ne provoque pas de décalage.
:hover
ajoute une bordureCela provoque un petit décalage de l'élément et des éléments qui suivent
:hover
ajoute un contourAucun décalage n'est provoqué par l'ajout d'un contour
Identifier la zone de saisie active.
De même, l'élément de saisie qui a le focus peut facilement être repéré par un contour différent :
Contours et coins arrondis.
Animation de la propriété outline
.
Toutes les propriétés relatives aux contours peuvent être animées, soit de façon progressive, soit de façon brutale (changement de valeur sans transition). Reportez-vous aux propriétés individuelles pour d'autres exemples d'animation.
Prise en charge par les navigateurs (compatibilité).
Les contours (bordures ne modifiant pas la mise en page) sont bien gérés par tous les navigateurs actuels.
Il en est de même pour la propriété outline
.
outline
.
outline
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que outline
.
Les spécifications CSS éditées par le W3C sont organisées en modules. outline
fait partie du Module CSS - Interface utilisateur de base (CSS Basic User Interface Module ). Les définitions suivantes sont également décrites dans ce même module.