reCAPTCHA WAF Session Token

10 Ways to Hide Elements in CSS — SitePoint


There are multiple ways to hide an element in CSS, but they differ in the way they affect accessibility, layout, animation, performance, and event handling.

Table of Contents

Animation

Some CSS hiding options are all or nothing. The element is either fully visible or fully invisible and there’s no in-between state. Others, such as transparency, can have a range of values, so interpolated CSS animations become possible.

Accessibility

Each method described below will visually hide an element, but it may or may not hide the content from assistive technologies. For example, a screen reader could still announce tiny transparent text. Further CSS properties or ARIA attributes such as aria-hidden="true" may be necessary to describe the appropriate action.

Be aware that animations can also cause disorientation, migraines, seizures, or other physical discomfort for some people. Consider using a prefers-reduced-motion media query to switch off animations when specified in user preferences.

Event Handling

Hiding will either stop events being triggered on that element or have no effect. That is, the element is not visible but can still be clicked or receive other user interactions.

Performance

After a browser loads and parses the HTML DOM and CSS object model, the page is rendered in three stages:

  1. Layout: generate the geometry and position of each element
  2. Paint: draw out the pixels for each element
  3. Composition: position element layers in the appropriate order

An effect which only causes composition changes is noticeably smoother than those affecting layout. In some cases, the browser can also use hardware acceleration.

1. opacity and filter: opacity()

The opacity: N and filter: opacity(N) properties can be passed a number between 0 and 1, or a percentage between 0% and 100% denoting fully transparent and fully opaque accordingly.

There’s little practical difference between the two in modern browsers, although filter should be used if multiple effects are applied at the same time (blur, contrast, grayscale, and so on).

Opacity can be animated and offers great performance, but be aware that a fully transparent element remains on the page and can trigger events.

metric effect
browser support good, but IE only supports opacity 0 to 1
accessibility content not read if 0 or 0% is set
layout affected? no
rendering required composition
performance best, can use hardware acceleration
animation frames possible? yes
events triggered when hidden? yes

2. color Alpha Transparency

opacity affects the whole element, but it’s also possible to set the color, background-color, and border-color properties separately. Applying a zero alpha channel using rgba(0,0,0,0) or similar renders an item fully transparent.

Each property can be animated separately to create interesting effects. Note that transparency can’t be applied to elements with image backgrounds unless they’re generated using linear-gradient or similar.

The alpha channel can be set with:

  • transparent: fully transparent (in-between animations are not possible)
  • rgba(r, g, b, a): red, green, blue, and alpha
  • hsla(h, s, l, a): hue, saturation, lightness, and alpha
  • #RRGGBBAA and #RGBA
metric effect
browser support good, but IE only supports transparent and rgba
accessibility content still read
layout affected? no
rendering required painting
performance good, but not as fast as opacity
animation frames possible? yes
events triggered when hidden? yes

3. transform

The transform property can be used to translate (move), scale, rotate, or skew an element. A scale(0) or translate(-999px, 0px) off-screen will hide the element:

transform offers excellent performance and hardware acceleration because the element is effectively moved into a separate layer and can be animated in 2D or 3D. The original layout space remains as is, but no events will be triggered by a fully hidden element.

metric effect
browser support good
accessibility content still read
layout affected? no — the original dimensions remain
rendering required composition
performance best, can use hardware acceleration
animation frames possible? yes
events triggered when hidden? no

4. clip-path

The clip-path property creates a clipping region that determines which parts of an element are visible. Using a value such as clip-path: circle(0); will completely hide the element.

clip-path offers scope for interesting animations, although it should only be relied on in modern browsers.

metric effect
browser support modern browsers only
accessibility content still read by some applications
layout affected? no — the original dimensions remain
rendering required paint
performance reasonable
animation frames possible? yes, in modern browsers
events triggered when hidden? no

5. visibility

The visibility property can be set to visible or hidden to show and hide an element.

The space used by the element remains in place unless a collapse value is used.

metric effect
browser support excellent
accessibility content not read
layout affected? no, unless collapse is used
rendering required composition, unless collapse is used
performance good
animation frames possible? no
events triggered when hidden? no

6. display

The display property is probably the most-used element-hiding method. A value of none effectively removes the element as if it never existed in the DOM.

However, it’s possibly the worst CSS property to use in the majority of cases. It can’t be animated and will trigger a page layout unless the element is moved out of the document flow using position: absolute or the new contain property is adopted.

display is also overloaded, with options such as block, inline, table, flexbox, grid and more. Resetting back to the correct value after display: none; can be problematic (although unset may help).

metric effect
browser support excellent
accessibility content not read
layout affected? yes
rendering required layout
performance poor
animation frames possible? no
events triggered when hidden? no

7. HTML hidden attribute

The HTML hidden attribute can be added to any element:

<code class="markup language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">hidden</span><span class="token punctuation">></span></span>
  Hidden content
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
</code>

This applies the browser’s default style:

<code class="css language-css"><span class="token selector"><span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">hidden</span><span class="token punctuation">]</span></span></span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code>

This has the same benefits and flaws as display: none, although it could be useful when using a content management system that doesn’t permit style changes.

8. Absolute position

The position property allows an element to be moved from its default static position within the page layout using top, bottom, left, and right. An absolute positioned element can therefore be moved off-screen with left: -999px or similar.

metric effect
browser support excellent, unless using position: sticky
accessibility content still read
layout affected? yes, if positioning is changed
rendering required depends
performance reasonable if careful
animation frames possible? yes, on top, bottom, left, and right
events triggered when hidden? yes, but it may be impossible to interact with an off-screen element

9. Overlay Another Element

An element can be visually hidden by positioning another over the top which has the same color as the background. In this example, an ::after pseudo-element is overlaid, although any child element could be used.

While technically possible, this option requires more code than other options.

metric effect
browser support excellent
accessibility content still read
layout affected? no, if absolutely positioned
rendering required paint
performance reasonable if careful
animation frames possible? yes
events triggered when hidden? yes, when a pseudo or child element is overlaid

10. Reduce Dimensions

An element can be hidden by minimizing its dimensions using width, height, padding, border-width and/or font-size. It may also be necessary to apply overflow: hidden to ensure content doesn’t spill out.

Interesting animated effects are possible, but performance is noticeably better with transform.

metric effect
browser support excellent
accessibility content still read
layout affected? yes
rendering required layout
performance poor
animation frames possible? yes
events triggered when hidden? no

Hidden Choices

display: none has been the favorite solution to hide elements for many years, but it’s been superseded by more flexible, animatable options. It’s still valid, but perhaps only when you want to permanently hide content from all users. transform or opacity are better choices when considering performance.

For some really cool demos on how to show and hide images with CSS, check out How to Add a CSS Reveal Animation to Your Images.

FAQs on How to Hide Elements in CSS

How to Hide an Element in CSS?

There are many ways to hide elements in CSS. Which you choose depends on what you’re trying to achieve, but among other considerations are SEO and accessibility. Common methods include using the display property, visibility, opacity, height and width, positioning, and the CSS clip property. We cover each of these methods, and more, in this article, and look at how each affects accessibility and SEO.

How to Hide Element in CSS Without Display None?

Using display: none may be the easiest way to hide an element with CSS, but it can have serious side effects for accessibility and SEO. There are at least nine other ways to hide elements with CSS that are often far superior to display: none — including filter and opacity, color transparency, transforms, clip-path, visibility, the HTML hidden attribute, positioning, element overlays and reduced dimensions.

What Is the Opposite of Hiding in CSS?

In CSS, we often want to hide elements, only to later show, reveal or display them. We can control both hiding and showing/revealing elements with CSS, or we can also use JavaScript along with CSS to show/hide elements.
The most common way to display an element is by using the display property with a value of block, inline, inline-block, flex, grid, or another appropriate value depending on the desired layout behavior. For example:
/* Show an element as a block-level element */ .element { display: block; }
/* Show an element as an inline-level element */ .element { display: inline; }
/* Show an element as an inline-block element */ .element { display: inline-block; }
You can also use JavaScript to toggle the display property of an element from none (hidden) to its default value (usually block or inline) when you want to dynamically show or hide elements in response to user interactions or other events.

How to Hide an Element Based on a Value in CSS?

In CSS, you can hide an element based on its value using a combination of selectors and CSS properties. The exact approach you take will depend on the type of element and the value you want to use as the condition for hiding. Here are a few common scenarios:
1. Hiding an Element Based on Its Content (Text):
If you want to hide an element based on its textual content, you can use the :contains selector. However, it’s important to note that :contains is not a standard CSS selector and is not supported by all browsers. You might need to use JavaScript or another method for better compatibility.
/* This example uses jQuery for :contains */ .element:contains("Hide this text") { display: none; }
2. Hiding an Element Based on an Attribute Value:
If you want to hide an element based on the value of an attribute, such as data-* attributes, you can use attribute selectors. Here’s an example:

This should be hidden
This should be visible

/* Hide elements with data-hide="true" */ [data-hide="true"] { display: none; }
3. Hiding an Element Based on a Class or ID:
You can also use classes or IDs to hide elements based on their value. For instance, if you have a specific class or ID assigned to elements you want to hide, you can use CSS like this:
This should be hidden
This should be visible

/* Hide elements with the class "hide-me" */ .hide-me { display: none; }
4. Hiding an Element Based on a Specific Value with JavaScript:
If you need to hide an element based on more complex conditions or values that aren’t easily handled with CSS alone, JavaScript is a more suitable choice. You can use JavaScript to add or remove classes, change styles, or manipulate the DOM based on specific criteria.
Here’s an example using JavaScript and a hypothetical shouldHide function:
This should be hidden
This should be visible


Remember to replace shouldHide() with your own logic that determines whether the element should be hidden or not.
So CSS can be used to hide elements based on their content, attributes, classes, or IDs to some extent. However, for more complex conditions or dynamic values, JavaScript is often required for better control and flexibility.

How Do I Hide Content in HTML

Hiding content is most commonly done with CSS. There are many ways to do this, and which you choose depends on what you’re trying to achieve, but among other considerations are SEO and accessibility. In this article, we’ve looked at ten different ways to hide content with CSS, and how each method affects accessibility and SEO.

Does hiding elements with CSS hurt accessibility?

The simple answer is: it depends. Hiding elements with display: none, while convenient, is certainly bad for accessibility. Thankfully, there are ways to hide and show content that can be made accessible — both to keyboard users and even screen readers. In this article, we’ve looked at ten different ways to hide content with CSS, and how each method affects accessibility and SEO.

Does hiding elements with CSS hurt SEO?

Hiding elements with CSS definitely can have implications for SEO (Search Engine Optimization), and it’s important to be cautious when using CSS to hide elements on a webpage. Whether it hurts your SEO or not depends on the context and your intent.
Here are some considerations:
Hidden Content for SEO Manipulation. If you’re hiding content solely for the purpose of manipulating search engine rankings, such as keyword stuffing or hiding links, it’s considered a black hat SEO technique and can result in penalties from search engines if detected. Search engines aim to provide relevant and useful content to users, so they don’t like to see content hidden solely for ranking purposes.
User Experience Matters. Search engines like Google prioritize user experience. If you hide content in a way that harms user experience, such as making it difficult for users to find information or navigate your site, it can indirectly impact your SEO. High bounce rates or low user engagement can signal to search engines that your site may not be providing valuable content.
Legitimate Uses of CSS Hiding. There are legitimate reasons to use CSS to hide elements, such as creating mobile-responsive designs or improving accessibility. For example, you might use CSS to hide certain elements on mobile devices to improve the layout and usability. If you’re using CSS to enhance user experience, it’s less likely to negatively impact SEO.
Google’s Guidelines. Google provides guidelines on how to handle hidden content. They generally advise against hiding content with CSS for SEO purposes, but they do recognize legitimate uses like improving mobile user experience or providing alternative text for visually impaired users. It’s crucial to follow these guidelines.
Javascript-generated Content. Content that’s generated by JavaScript and not visible in the initial HTML source can also have SEO implications. Search engines have become better at indexing JavaScript-generated content, but it’s essential to ensure that critical content is visible to both users and search engine crawlers.
So, to summarize, hiding elements with CSS can certainly hurt SEO if it’s done for manipulative purposes or if it degrades user experience. However, if done for legitimate reasons like improving mobile responsiveness or accessibility, it’s less likely to have a negative impact. Always follow search engine guidelines, create content that benefits users, and focus on providing a positive user experience to maintain good SEO practices.





Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

WP Twitter Auto Publish Powered By : XYZScripts.com