Hide webpage elements, natively

This post is inspired by "How to hide Web page elements" where Habdul Hazeez shown a lot of techniques of hiding elements on your website.

How to hide Web page elements

Habdul Hazeez ・ Jun 24 '20 ・ 4 min read

#html #css #javascript #a11y

I want to share the solution I have been using in the past years. I like low-tech, native solutions to everything (Commandment 2: You shall always try to use native features before you reimplement them in JavaScript.) and I believe this is the best solution to that problem.

hidden attribute

It is called hidden attribute. This code:

<p>I'm visible</p>

<p hidden>
  I'm invisble!
</p>

<p>I'm visible too</p>

Results in:

Paragraph marked as hidden is invisible.

See live demo on JSFiddle

In my opinion, this is the best way to hide elements because:

1. It is native
2. It does not require CSS by default **
3. It is hidden from screen readers because it is native
4. It is supported by all browsers

** display property in CSS overrides hidden attribute, so I usually add this little CSS snippet:

[hidden] { display: none; }

in default styles to fix that issue.

Read more on the hidden attribute on MDN.

Read more

If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website.

Using WebP in Your Existing Webpage

Paweł Kowalski for platformOS ・ Nov 17 '20 ・ 4 min read

#webperf #design

Optimizing Images For The Web

Paweł Kowalski for platformOS ・ Apr 24 '20 ・ 8 min read

#beginners #node

3 Tips on Preserving Website Speed

Paweł Kowalski for platformOS ・ Jun 24 '20 ・ 6 min read

#webperf #webpack #javascript #css