CODEWITHSUNDEEP
htmlcss
Lazloman
Lazloman

Reputation: 1347

Proper use 'hidden' attribute in html tag

I've run into a problem and hope someone here can enlighten me:

<div class="myclass" hidden></>

When running locally, this div is not displayed. This is correct, right? But if I add the hidden attribute to the class tag, ie:

<div class="myclass hidden"></>

The div is displayed. This is what should happen.

But when I deploy the 'correct' code to our test environment, the div still displays, but it does not if I add the 'hidden' attribute to the class tag. I've manually edited the html in Chrome and can duplicate the behavior. I don't understand why this is. Can someone help me out here? Thanks

Upvotes: 0

Views: 5568

Answers (3)

user2342558
user2342558

Reputation: 6722

The hidden tag attribute isn't compatible with all browser versions, as you can see here:

 Browser Support (from which version is available):
 Chrome: 6.0
 Firefox: 4.0
 Safari: 5.1
 Opera: 11.1
 Internet Explorer / Edge: 11.0

To properly hidden a tag, use this:

<div class="myclass hidden">...</div>

<style>
    .hidden { visibility:hidden; display:none; }
</style>

display:none hides the tag completely (you can still interact with it through the DOM).

With visibility:hidden the tag isn't visible, but it occupies its space on the page.

Upvotes: 0

Lucas Arbex
Lucas Arbex

Reputation: 909

In this case <div class="myclass" hidden> you are using a global HTML attribute, which will make browsers won't render the element.

On the other case <div class="myclass hidden"> you are adding a class named hidden to your element, which can or not be associated to whatever custom style you want to add to it, but will not generate any "default" style to it whatsoever.

Upvotes: 2

King11
King11

Reputation: 1229

Hidden isn't a class name, its a attribute. Unless you have a class called "hidden" in your .css code, then <div class="myclass hidden"></> will never work. Think of hidden as a action that does something. Another example is disabled this is an action that disables the element. Hidden hides an element. Which is why <div class="myclass" hidden></> works and is the correct way to use hidden. Hopefully that's a good explanation.

Upvotes: 0

Related Questions