Why <hr class="hidden" />?

I'm working on an inherited web开发者_运维百科page. Specifically trying to implement a print.css (there wasn't any print.css up till now).

The previous developer has put in ...

<hr class="hidden" />

The CSS for this in the main css is (unsurprisingly):

.hidden {
  display: none; }

... at points which separate the major sections of the page. Wondering if anyone can say why this might be useful?

There's no separate print.css though it's possible he intended to implement one and ran out of time. The page is nicely designed, so I am assuming the previous guy knows what he's doing.

It's indeed very probable he wanted the print version of the page to have a horizontal line there. In that css he probably would have defined the "hidden" class as being "display: inline".

Well, the HRs still serve their semantic purpose as dividers even if they're not visible, I suppose. But yes, it's a bit weird. Maybe he intended for them to show in print, to keep from having a massive block of text.

Are there any HRs around that aren't hidden? Looking at those cases might give you some more information. Considering he did this with a class, it might imply these are exceptions somehow, since he could've made it global with just hr {display:hidden;}

I think that prevuous guy wanted to add visible <hr> only for print version and in the browser view <hr> were not necessary.

Trying to understand the reasoning behind the markup/styles applied to the following snippet. Sample as Originally Found in the Wild is a cross-browser compatible example of displaying a background-image in an <hr />. In this case, style="display:none" is declared on the <hr /> element itself, for displaying a background image in place of the line or border. Below is the related HTML/CSS:

HTML:

<div class="hr">
  <hr />
</div>  

CSS:

div.hr {
  height: 15px;
  background: #fff url(hr1.gif) no-repeat scroll center;
}
div.hr hr {
  display: none;
}

The only thing I can assume is that he's put the hrs there so that they appear on browsers where css isn't rendered; typically something like WebbIE. They will certainly be visible if you turn off your browser's css

The other reason I can think of is that he was making tests - it's easier to comment out the display:none; line on the css rather than erasing out all the hrs manually. At the end he decided not to use hrs, but he forgot to remove them, or was just a bit lazy.

Well, one reason could just be to reduce the size of the page. If you're having a lot of elements you save some charaters.

<hr class="hidden" />
<hr style="display: none;" />

Another reasons could just be a coding style to have the control over all styles in one file and not to go with inline-styles. Or it was planed to go with a print version later. So many reasons are possible.

Looks like he/she might have anticipated being asked to get rid of the horizontal rules, so pro-actively put the hidden class on them.

That being said, it's not necessary to do it that way, as simple hr { display:none; } would have sufficed. But then I've seen some good designers go mental with a gazillion classes that just aren't required.

Alternatively it was an accident, and it was meant to go into the print.csss file so the horizontal rules wouldn't be printed.

Who really knows? It's a mystery!

Placing headings with a class of 'hidden' and clip or display:none inside each of the tags is said to be a good practice. It was called 'document outlining' and it's supposed to be used with html5. It's main purpose is to better inform search crawlers about the website's content.