Reputation: 2403

Is it safe to use the css property "visibility"?

Is it safe to use the css property "visibility"? Will it work in all major browsers?

Upvotes: 5

Answers (7)

Alex W

Reputation: 38183

According to the Mozilla Developer Network, it has the following browser support:

╔════════════════╦═════════════╗═══════════════════╗══════════╗════════════╗
║     Chrome     ║   Firefox   ║ Internet Explorer ║  Opera   ║   Safari   ║ 
╠════════════════╬═════════════╣═══════════════════╣══════════╣════════════╣
║       1.0      ║     1.0     ║       4.0         ║    4.0   ║     1.0    ║
║                ║             ║                   ║          ║            ║
╚════════════════╩═════════════╩═══════════════════╩══════════╩════════════╝

With the following exceptions (for tables):

Support for visibility: collapse on table elements varies. Chrome and Safari treat collapse like hidden, leaving a white gap; they support it only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements. Firefox doesn’t hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set. In Opera, it works on table elements, but doesn’t seem to hide a <tfoot> if it is adjacent to a visible <tbody>.

Upvotes: 5

Jonathon Bolster

Reputation: 15961

According to W3Schools it's supported in all major browsers.

Please consider if you are actually looking to use visibility as the element will still take up space on the page (it will just appear blank). If you want it to be as if the element isn't on the page at all then consider using display:none instead.

Upvotes: 9

diagonalbatman

Reputation: 18002

Yes you should be fine:

http://www.w3schools.com/CSS/pr_class_visibility.asp

Upvotes: 0

Matthew Scharley

Reputation: 132254

visibility works well, but opacity needs some workarounds. Notably, IE8 and below (not sure about IE9) don't support it, but they do support a filter that does the same thing.

Upvotes: 1