CSS sulle horizontal rules

àˆ possibile modificare con i CSS l'aspetto di una horizontal rule (<hr />)? Certo che è possibile ma i risultati relativemente al supporto cross-browser non sono garantiti.

Su questo nuovo blog, Bite Size Standards, Nathan Pitman propone questo approccio: inserire la hr in un div, impostare la sua proprietà  display su none e lavorare con gli stili sul div. Il codice potrebbe essere questo:


div.horRule {
height: 1px;
border-top: 1px solid #E5E5E5;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 10px;
margin-right: 10px;
}

div.horRule hr {
display: none;
}


Prendo lo snippet di codice dal blog di Nathan Smith, che rispondendo a Pitman, propone questa soluzione che non fa uso di div aggiuntivi e che funziona bene sulle versioni più recenti dei principali browser:


hr
{
background: #ccc;
color: #ccc;
height: 1px;
margin: 0 0 10px;
}


Nei commenti al post di Smith, Dustin Diaz rimanda ad un terzo possibile approccio, quello proposto in questo esempio su Sitepoint.