Why is <hr class = "hidden" / ">?

Question

I am working on an inherited webpage. In particular, an attempt to implement print.css (until now there was no print.css).

The previous developer added ...

<hr class="hidden" /> 

CSS for this in the main css (not surprisingly):

 .hidden { display: none; } 

... at points that separate the main sections of the page. I wonder if anyone can say why this might be useful?

There is no separate print.css, although it is possible he intended to implement one and ended the time. The page is beautifully designed, so I assume the previous guy knows what he is doing.

Answer 1

It is very likely that he wanted a horizontal line in the printed version of the page. In this css, he would probably define a "hidden" class as "display: inline".

Answer 2

Well, HR still serves as its semantic purpose as delimiters, even if they are not visible, I suppose. But yes, this is a little strange. Perhaps he intended to show them in print so as not to have a massive block of text.

Are there any HR servers that are not hidden? Looking at these cases, you can get additional information. Given that he did this with the class, this may mean that these are exceptions, anyway, since he could only make it global with hr {display: hidden;}

Answer 3

I think the prevailing guy wanted to add a visible <hr> only for the print version and there was no need for a <hr> browser.

Answer 4

The only thing I can assume is that he put hrs there so that they appear in browsers where css is not displayed; usually something like WebbIE . They will definitely be visible if you disable the css browser

Another reason I can think of is because he was doing tests - it's easier to comment out the line display:none; on css, and not delete all hours manually. In the end, he decided not to use hrs, but he forgot to remove them or was just a little lazy.

Answer 5

Trying to understand markup / style arguments applied to the following snippet. The pattern, as originally found in Wild , is an example of compatibility with the background-image browser in <hr /> . In this case, style="display:none" declared directly on the <hr /> element, to display a background image instead of a line or border. The following is the appropriate 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; } 

Answer 6

Well, one of the reasons might be to reduce the page size. If you have many elements, you save some characters.

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

Other reasons may be only the coding style, in order to have control over all the styles in one file and not go with the built-in styles. Or later it was planned to switch to the print version. Many reasons are possible.

Answer 7

It looks like he / she may have expected to be asked to get rid of the horizontal rules, so proactively place a hidden class on them.

In this case, you do not need to do as a simple hr {display: none; } would be enough. But then I saw that some good designers have a mental relationship with gazillion classes that are simply not required.

Alternatively, it was an accident, and it was intended to enter the print.csss file so that horizontal rules would not print.

Who really knows? It's a secret!

Answer 8

Posting headlines with a “hidden” class and clips or impressions: none of these tags are considered good practice. It was called a "document outlining" and it should be used with html5. The main goal is to better inform search engines about the content of the website.