Day 3. HTML Hidden Attribute, more semantic HTML

October 05, 2019

I learned something awesome today…

We can hide elements on a page by adding the hidden attribute. Maybe this isn’t new to you, but I find it exciting because I would do this with CSS and JavaScript before now. In every project.

Most browsers already implement this (browser support is pretty) and we could provide a polyfill for browsers that don’t

*[hidden] {
  display: none;
}

I think this is cleaner than doing it the class way. Plus screen readers will understand the hidden attribute better than when elements are hidden with CSS.

Instead of toggling classes around, I only have to change attributes, which make a lot more sense

const toggleHidden = () => {
  el.hidden = !el.hidden
}

button.addEventListener("click", toggleHidden)

More at Extending Semantics & Accessibility

Details and Summary

This reminds me of the details and summary. I learned about them some weeks ago. This stuff is a life saver.

It gives you an accordian (Click to expand sections) for free! Before now, I would make use of heavy JavaScript and CSS to make something like that. I now use it in all of my projects. Here’s how it works

<details>
  <summary>Click To Expand</summary>
  <p>Content to hide or show</p>
</details>

There’s one thing I dislike about this tag anyways. There’s no animation. The content just snaps open or close. I believe there’re smarter ways to get around this.