le CSS la propriété de contour est une propriété déroutante. Lorsque vous l'apprenez pour la première fois, il est difficile de comprendre en quoi il est même légèrement différent de la propriété frontalière. Le W3C l'explique comme ayant 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, en soi, prête à confusion. Comment un objet de votre page Web peut-il ne pas occuper de place sur la page Web? Mais si vous pensez que votre page Web est comme un oignon, chaque élément de la page peut être superposé à un autre élément. La propriété outline 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, il 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, cela prendra le même espace que si vous n'aviez pas de contour de cet élément. Ce n'est pas vrai d'un
frontière. Une bordure sur un élément est ajoutée à la largeur et à la hauteur extérieures de l'élément. Alors si vous aviez un image c'était 50 pixels de large, avec une bordure de 2 pixels, cela prendrait 54 pixels (2 pixels pour chaque bordure latérale). Cette même image avec un contour de 2 pixels n'occuperait que 50 pixels de largeur 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, maintenant je peux dessiner des cercles », détrompez-vous. Cette déclaration a un sens différent de ce 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 bordure avec un écran infiniment large - assez large pour que cette bordure soit un rectangle continu.
En revanche, la propriété outline prend en compte les contours. Si un élément décrit s'étend sur plusieurs lignes, le contour se ferme à la fin de la ligne et se rouvre à nouveau sur la ligne suivante. Si possible, le contour restera également entièrement connecté, créant une forme non rectangulaire.
Utilisations de la propriété Outline
L'une des meilleures utilisations de la propriété outline est de mettre en évidence les termes de recherche. De nombreux sites le font avec une couleur d'arrière-plan, mais vous pouvez également utiliser la propriété de contour 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 du 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 ce que les couleurs sont utilisées.
Vous pouvez également utiliser la propriété outline pour supprimer la ligne pointillée autour des liens actifs. Cet article de Astuces CSS montre comment supprimer le contour en pointillé.