Comment puis-je changer l'épaisseur de ma balise <hr>?

Question

Je veux changer l'épaisseur de ma règle horizontale (

---

) en CSS. Je sais que cela peut être fait en HTML comme ceci -

Mais j'entends dire que cela est déprécié comme mentionné sur MDN ici. En CSS, j'ai essayé d'utiliser height:1px mais cela ne change pas l'épaisseur. Je veux que la ligne

---

soit épaisse de 0.5px.

Je utilise Firefox 3.6.11 sur Ubuntu

Answer 1

Pour une cohérence, supprimez les bordures et utilisez la hauteur pour l'épaisseur du

---

. Ajouter une couleur de fond style votre`

`avec la hauteur et la couleur spécifiées.

hr {
  border: none;
  height: 1px;
  /* Définir la couleur du hr */
  color: #333;  /* ancien IE */
  background-color: #333;  /* Navigateurs modernes */
}

Version en ligne :

Explication plus détaillée ici.

Answer 2

Rendu sub-pixel dans les navigateurs

Le rendu sub-pixel est délicat. Vous ne pouvez pas attendre d'un moniteur qu'il rende une ligne moins épaisse qu'un pixel. Mais il est possible de fournir des dimensions sub-pixel. En fonction du navigateur, ils les rendent différemment. Consultez cet article de blog de John Resig à ce sujet.

En gros, si votre moniteur est un LCD et que vous dessinez des lignes verticales, vous pouvez facilement dessiner une ligne de 1/3 de pixel. Si votre fond est blanc, donnez à votre ligne la couleur #f0f. À l'œil, cette ligne aura une largeur de 1/3 de pixel. Bien qu'elle soit de couleur, si vous zoomiez votre moniteur, vous verriez qu'un seul segment du pixel entier (composé de RGB) serait sombre. C'est à peu près la technique utilisée pour le peaufinage du type de caractères, c'est-à-dire ClearType.

Mais les lignes horizontales ne peuvent être que d'un seul pixel de hauteur. C'est une limitation technologique des moniteurs LCD. Les CRT étaient encore plus compliqués avec leurs phosphores triangulaires (sauf s'ils étaient du type grille d'ouverture comme les Sony Trinitron) mais c'est une autre histoire.

En gros, fournir une dimension sub-pixel et s'attendre à ce qu'elle soit rendue de cette manière est la même chose que d'attendre qu'une variable entière stocke un nombre de 1,2034759349. Si vous comprenez que cela est impossible, vous devriez comprendre que les moniteurs ne peuvent pas rendre des dimensions sub-pixel.

Style sûr pour les navigateurs

Mais les règles horizontales qui s'intègrent sont habituellement réalisées en utilisant des couleurs. Donc si votre fond est par exemple blanc (#fff), vous pouvez toujours rendre votre HR très clair. Comme #eee.

Le style sûr pour une règle horizontale très claire dans tous les navigateurs serait le suivant :

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

Et utilisez un fichier CSS au lieu de styles en ligne. Ils fournissent une définition centrale pour l'ensemble du site, pas seulement un élément particulier. Cela rend la maintenance beaucoup plus facile.

Answer 3

Je recommanderais de définir la hauteur du HR elle-même à 0px et d'utiliser sa bordure pour la rendre visible à la place. J'ai remarqué que lorsque vous zoomez (ctrl + molette de la souris), l'épaisseur du HR change, tandis que lorsque vous définissez la bordure, elle reste toujours la même :

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

Answer 4

J'ai ajouté de l'opacité à la ligne, donc elle semble plus mince:

Answer 5

J'étais à la recherche du moyen le plus court pour dessiner une ligne de 1px, car charger toute une série de CSS séparés n'est pas la solution la plus rapide ni la plus courte.

Jusqu'à HTML5, il y avait un moyen plus court pour un hr de 1px:

---

mais.. **L'attribut noshade de

n'est pas pris en charge en HTML5. Utilisez plutôt du CSS.** (ni les autres attributs utilisés auparavant, comme size, width, align)...

---

Maintenant, celui-ci est un peu délicat, mais fonctionne bien si un simple hr de 1px est nécessaire :

Variation 1, hr NOIR: (meilleure solution pour le noir)

Résultat : FF, Opera - noir / Safari - gris foncé

---

Variation 2, hr GRIS (le plus court !) :

Résultat : Opera - gris foncé / FF - gris / Safari - gris clair

---

Variation 3, COULEUR comme désiré:

Résultat : Opera / FF / Safari : 1px rouge.