Styliser la balise HR HTML avec CSS

Si vous devez ajouter des lignes horizontales de style séparateur à vos sites Web, vos options habituelles incluent l’ajout de fichiers image de ces lignes à votre page, mais cela nécessiterait que votre navigateur les récupère et les charge, ce qui pourrait avoir un impact négatif sur le site. performance. Vous pouvez également utiliser la propriété CSS border pour ajouter des bordures qui agissent comme des lignes en haut ou en bas d'un élément, créant ainsi efficacement votre ligne de séparation.

Ou, mieux encore, utilisez l'élément HTML pour la règle horizontale.

L'élément de règle horizontale

L'apparence par défaut des lignes de règles horizontales n'est pas idéale. Pour les rendre plus jolis, ajoutez du CSS pour ajuster l’aspect visuel de ces éléments en fonction de l’aspect de votre site.

Une étiquette HR de base est affichée selon la manière dont le navigateur souhaite l’afficher. Les navigateurs modernes affichent généralement des balises HR non stylées avec une largeur de 100%, une hauteur de 2 pixels et une bordure 3D en noir pour créer la ligne.

La largeur et la hauteur sont cohérentes entre les navigateurs

Les seuls styles cohérents dans les navigateurs Web sont la largeur et les styles. Ceux-ci définissent la taille de la ligne. Si vous ne définissez pas la largeur ni la hauteur, la largeur par défaut est de 100% et la hauteur par défaut de 2 pixels.

Dans cet exemple, la largeur est égale à 50% de l'élément parent (notez que ces exemples ci-dessous incluent tous des styles en ligne. Dans un contexte de production, ces styles seraient en réalité écrits dans une feuille de style externe pour faciliter la gestion dans toutes vos pages):

style = "width: 50%;">

Et dans cet exemple, la hauteur est 2em:

style = "height: 2em;">

Changer les frontières peut être difficile

Dans les navigateurs modernes, le navigateur construit la ligne en ajustant la bordure. Ainsi, si vous supprimez la bordure avec la propriété style, la ligne disparaîtra sur la page. Comme vous pouvez le voir (eh bien, vous ne verrez rien car les lignes seront invisibles) dans cet exemple:

style = "border: none;">

En ajustant la taille, la couleur et le style de la bordure, la ligne sera différente et aura le même effet dans tous les navigateurs modernes. Par exemple, dans cette démonstration, la bordure est rouge, en pointillé et large (1 pixel):

style = "border: 1px dashed # 000;">

Mais si vous modifiez la bordure et la hauteur, les styles sont légèrement différents dans les navigateurs très obsolètes par rapport aux navigateurs modernes. Comme vous pouvez le voir dans cet exemple, si vous le visualisez dans IE7 et inférieur (un navigateur malheureusement obsolète et que Microsoft ne prend plus en charge), il existe une ligne interne biseautée qui ne s'affiche pas dans les autres navigateurs (y compris IE8 et versions ultérieures). :

style = "hauteur: 1.5em; largeur: 25em; bordure: 1px solide # 000;">

Ces navigateurs obsolètes ne sont pas vraiment une préoccupation dans la conception Web aujourd'hui, car ils ont été en grande partie remplacés par des options plus modernes.

Faire une ligne décorative avec une image de fond

Au lieu d'une couleur, vous pouvez définir une image d'arrière-plan pour votre règle horizontale afin qu'elle ressemble exactement à ce que vous souhaitez, mais qu'elle s'affiche toujours sémantiquement dans votre balisage. Dans cet exemple, nous avons utilisé une image composée de trois lignes ondulées. En le définissant comme image d'arrière-plan sans répétition, cela crée une rupture dans le contenu qui ressemble presque à ce que vous voyez dans les livres:

style = "height: 20px; background: #fff url (aa010307.gif) centre de défilement sans répétition; bordure: aucune;">

Transformer les éléments RH

Avec CSS3, vous pouvez également rendre vos lignes plus intéressantes. L’élément RH est traditionnellement un horizontal ligne, mais avec la propriété de transformation CSS, vous pouvez changer leur apparence. Une transformation favorite de l'élément HR consiste à modifier la rotation.

Vous pouvez faire pivoter votre élément HR afin qu’il soit légèrement diagonal:

hr {-moz-transform: rotation (10deg);-webkit-transform: rotation (10deg);-o-transformer: faire pivoter (10deg);-ms-transform: rotation (10deg);transformer: faire pivoter (10deg);}

Ou vous pouvez le faire pivoter de manière à ce qu'il soit complètement vertical:

hr {-moz-transform: rotation (90deg);-webkit-transform: rotation (90deg);-o-transformer: faire pivoter (90deg);-ms-transform: rotation (90deg);transformer: faire pivoter (90 °);}

N'oubliez pas que cette technique permet de faire pivoter la HR en fonction de son emplacement actuel dans le document. Vous devrez donc peut-être ajuster le positionnement pour le placer à l'endroit souhaité. Il n'est pas recommandé de l'utiliser pour ajouter des lignes verticales à un dessin, mais c'est un moyen d'obtenir un effet intéressant.

Une autre façon d'obtenir des lignes sur vos pages

Une chose que certaines personnes font au lieu d'utiliser l'élément RH est de s'appuyer sur les frontières des autres éléments. Mais parfois, une HR est beaucoup plus pratique et facile à utiliser que d'essayer de définir des frontières. Les problèmes de modèle de boîte de certains navigateurs peuvent rendre la configuration d’une bordure encore plus délicate.