Hiding Elements from all Devices using Visibility Hidden

To hide an element from all devices means just that: no single device will perceive it anymore (although the element still is present in the DOM). This can be achieved using either an HTML attribute or CSS attributes.

Using the visibility hidden property in CSS allows an element to be hidden from view on all devices. This means that the element will not be visible on the screen, but will still take up space on the page. This can be useful for temporarily hiding an element without removing it from the page layout, or for creating hidden content that can be revealed with user interaction.

Working Example

This paragraph is visible. But is there something below?

This text is perceivable by no device.

Conclusion

We strongly suggest using the HTML attribute hidden, as it separates content clearly from presentation. Notice: hiding an element from all channels is a question of content, not of visual presentation. In addition, it makes obvious in the DOM already what elements are hidden, so it leads to better readable and maintainable code.

Code

<p>
  This paragraph is visible. But is there something below?
</p>
<p class="visibility-hidden">
  This text is perceivable by no device.
</p>

.visibility-hidden {
  visibility: hidden;
}

NIL