Skip to main content

None Display

The display: none; value in CSS is used to completely remove an element from the document flow and rendering tree. This means that the element will not be displayed on the page and will not take up any space. It's as if the element doesn't exist in the DOM for the purposes of rendering.

Characteristics​

  1. No Rendering: The element and its children are not rendered. They are removed from the layout and do not take up any space.

  2. Document Flow: The element is removed from the document flow, meaning that other elements will reposition as if the element never existed.

  3. Accessibility: Elements with display: none; are ignored by screen readers and are not accessible to users relying on assistive technologies.

  4. Event Handling: Events like click or hover are not triggered on elements with display: none;.

  5. CSS Inheritance: The element and its children can still inherit styles, but those styles won't be rendered unless the display property is changed.

Example-I: Basic Usage​

HTML:

<div class="hidden-element">This element is hidden.</div>

CSS:

.hidden-element {
  display: none;
}

Example-II: Toggling Visibility with JavaScript​

JavaScript:

function toggleElement() {
  const element = document.querySelector('.hidden-element');
  if (element.style.display === 'none') {
    element.style.display = 'block';
  } else {
    element.style.display = 'none';
  }
}

Best Practices​

  1. Use Sparingly: Overusing display: none; can lead to poor performance, especially if you're toggling visibility frequently.

  2. Accessibility: If an element should be hidden but still accessible to screen readers, consider alternatives like visibility: hidden; or opacity: 0;.

  3. Animation: You cannot animate an element from or to display: none;. Use opacity or visibility for transitions.

  4. SEO Implications: Overuse or misuse of display: none; can be seen as deceptive by search engines and could impact your site's SEO.

  5. Conditional Rendering: In modern front-end frameworks like React, display: none; is often replaced by conditional rendering, where elements are added or removed from the DOM programmatically.