0

There is the DOM property hidden and the CSS property visibility. After reading up on their descriptions I can't really tell when to use which. In what respects does their intended usage differ?

I understand that they functionally might do (many of) the same things, but I am talking about intent.

oligofren
  • 20,744
  • 16
  • 93
  • 180
  • Are you really asking about the property, or rather about the universal HTML attribute? https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden – connexo Sep 10 '18 at 17:31
  • Didn't know there was an attribute either way, but the prop and the attribute seems very similar in intended use. – oligofren Sep 10 '18 at 22:23
  • Is your question answered? – connexo Sep 11 '18 at 17:45
  • There aren't any answers that answers the full question, no. Most just cover the visual aspects, while I am talking of intent and semantics. – oligofren Sep 12 '18 at 06:19

4 Answers4

2

CSS Visibility is used to hide an element and allocates space for the hidden element in the document layout. As opposed to DOM Hidden which merely hides the element from being shown on the page, without allocating space for the given element.

Perhaps you are looking for display: none?

What is the difference between visibility:hidden and display:none?

Mr. Young
  • 2,364
  • 3
  • 25
  • 41
  • I wasn't looking for anything, actually :-) I was just wondering about the intended use cases for each. – oligofren Sep 12 '18 at 06:17
1

Intended usage

The intended usage for hidden (and also explicitly when not to use it) is explained on the page you linked:

The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed.

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

Normal display:

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  height: 200px;
}
<div class="box">
  <div class="inner"></div>
</div>

[hidden]

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  height: 200px;
}
<div class="box">
  <div class="inner" hidden></div>
</div>

visibility: hidden;

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  height: 200px;
  visibility: hidden;
}
<div class="box">
  <div class="inner"></div>
</div>

display: none;

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  display: none;
  height: 200px;
}
<div class="box">
  <div class="inner"></div>
</div>

Using HTMLElement.prototype.hidden property:

document.querySelector('.inner').hidden = true;
.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  height: 200px;
}
<div class="box">
  <div class="inner"></div>
</div>
connexo
  • 53,704
  • 14
  • 91
  • 128
  • Obviously I read the section I linked to :-) Verbatim copying it didn't do much for my understanding of the _differences_. So as far as I can tell, the intended usage of the HTMLElement property and the corresponding attribute seems to be the same and their visual effect also seems to be the same, much like setting `display: none`. But the intended usage of the `visual` CSS property wasn't covered. I would use it when I needed to hide an element from showing while not affecting the layout of other elements. This could of course also affect just one presentation mode. – oligofren Sep 12 '18 at 06:28
  • Well, I find the explanation of the intended use very clear, I don't exactly know what is unclear after that? – connexo Sep 12 '18 at 07:34
0

Look , if you use visibility prop. in css you will see in html a 'free' space which contains your css element . If you use DOM hidden , it just removes that element . I explain this so .

Tiko
  • 1,241
  • 11
  • 19
0

Use of both css visibility property with hidden value and html hidden attribute is intend to hide element. But there is little difference in between them. css visibility property with hidden value contain its area that is it's height and width. But hidden attribute doesn't contain its DOM area. Here hidden attribute works like css display property with value none. You may will be clear with following example:

<p style="visibility:hidden">Hello how are you?</p>
<p hidden>I am fine.</p>

Now just inspect your browser and check, both are invisible but first paragraph element still contain its area.

Nav Raj Bhattarai
  • 400
  • 1
  • 2
  • 10