La propriété de contour CSS est une propriété déroutante. Lorsque vous apprenez pour la première fois, il est difficile de comprendre en quoi cela est même très différent de la propriété frontalière. Le W3C explique qu'il présente les différences suivantes:
- Les contours ne prennent pas de place.
- Les contours peuvent être non rectangulaires.
Les contours ne prennent pas de place
Cette déclaration est en elle-même déroutante. Comment un objet sur votre page Web peut-il ne pas prendre de la place sur la page Web? Mais si vous pensez que votre page Web ressemble à un oignon, chaque élément de la page peut se superposer à un autre élément. La propriété de contour ne prend pas de place car elle est toujours placée au-dessus de la boîte de l'élément.
Lorsqu'un contour est placé autour d'un élément, cela n'a aucun effet sur la disposition de cet élément sur la page. Cela ne change pas la taille ou la position de l'élément. Si vous placez un contour sur un élément, il occupera le même espace que si vous n'aviez pas de contour de cet élément. Ce n'est pas le cas d'une frontière. Une bordure sur un élément est ajoutée à la largeur et à la hauteur extérieures de l'élément. Donc, si vous aviez une image de 50 pixels de large, avec une bordure de 2 pixels, elle occuperait 54 pixels (2 pixels pour chaque bordure). Cette même image avec un contour de 2 pixels ne prendrait que 50 pixels de large sur votre page, le contour s'afficherait sur le bord extérieur de l'image.
Les contours peuvent être non rectangulaires
Avant de commencer à penser "cool, je peux maintenant dessiner des cercles", détrompez-vous. Cette déclaration a une signification différente de celle que vous pourriez penser. Lorsque vous placez une bordure sur un élément, le navigateur interprète l'élément comme s'il s'agissait d'une boîte rectangulaire géante. Si la boîte est divisée sur plusieurs lignes, le navigateur laisse simplement les bords ouverts car la boîte n'est pas fermée. C'est comme si le navigateur voyait la frontière avec un écran infiniment large - suffisamment large pour que cette frontière soit un rectangle continu.
En revanche, la propriété de contour prend en compte les bords. Si un élément souligné s'étend sur plusieurs lignes, le contour se ferme à la fin de la ligne et se rouvre à la ligne suivante. Si possible, le contour restera entièrement connecté, créant ainsi une forme non rectangulaire.
Utilisations de la propriété de contour
Une des meilleures utilisations de la propriété de contour est de mettre en évidence les termes de recherche. Pour ce faire, de nombreux sites utilisent une couleur d'arrière-plan, mais vous pouvez également utiliser la propriété hiérarchique sans vous soucier d'ajouter un espacement supplémentaire sur vos pages.
La propriété outline-color accepte le terme "invert", qui fait que la couleur de contour est l'inverse de l'arrière-plan actuel. Cela vous permet de mettre en évidence des éléments sur des pages Web dynamiques sans avoir besoin de savoir quelles couleurs sont utilisées.
Vous pouvez également utiliser la propriété outline pour supprimer la ligne en pointillé autour des liens actifs. Cet article de CSS-Tricks montre comment supprimer le contour en pointillé.
