Webflow's display: none and visibility: hidden features look very similar. What's the difference, and when should you use them?
Highlights
In a website, hiding something is a different thing from suppressing it. CSS allows you to hide things so that they are not visible- but they are still in the page. This is important because that hidden content still affects scripts, SEO, performance, and content security. Suppressing it is done server-side, so that the suppressed content is not in the page at all.
Both approaches are useful in different situations.
Here's how that works in Webflow;
Display: none is a style ( under layout ) which tells the browser not to display a specific element and its children. The element is not visible, but the HTML content is still part of the page where it can be seen by custom code, and search engines.
Use it when you want to hide an element, but to still have the element content appear in the page.
- Hide elements on certain breakpoints, and show them on others.
- Hide elements like modal pop-ups, until an trigger causes them to display
- Hide template elements that are used in code to create visible elements programmatically. Finsweet's Powerful Rich text and its "components" are an example of this.
Visibility: hidden is an element setting which suppresses an element completely from the page. The suppression happen server-side, so the element does not exist in the page's published source code at all.
- Suppress features that you're building, but that are not yet ready for the public.
- Hide "deprecated" elements completely from the page when you no longer need them, but do not yet want to delete them permanently.
- Temporarily suppress elements that you will use again later. Alert banners. Seasonal pop-ups. Special offer sections.
- Disable custom code blocks that you do not currently want to run.
- Deprecate old site elements during the process of a template graft, so that you can make big changes to your design on your live site with the ability to revert them if necessary. Prevents conflicts also with e.g. Finsweet CMS Filter, Finsweet CMS Load, and hidden collection lists.
Discussion
What is Webflow's visibility feature for, anyway?
The primarily point of the visibility feature is to support conditional visibility on login state, and soon for localized site content. However it's just as useful with no conditions, since it's the only way to exclude page content from the DOM without deleting it outright.
Why not just put suppressed content in components, and delete it from the page?
We've also used components for this in the past, however that can create hundreds of components, and loses position information in the page. For a client, managing their site, that's a pain.
An example here is the COVID banner notices & pop-ups era. They were part of many of our client site-navs as a component within a component. Having to remove and re-add that was too complex for many clients, so we built intricate CMS-driven banners and popups. It was cool, but it was overkill.
With the introduction of the visibility feature, they can now just click visible/hidden, publish and they're done. We have a happier design team, and happier clients.
Transcript
One of my favorite new features in Webflow in 2023 is the introduction of the visibility and user access settings panel under the settings menu for every element. This feature was originally designed, at least partially, for the purposes of Webflow's memberships platform. It allows you to choose which elements are visible based on login or logout state and was intended to support the ability to have conditional visibility on elements based on the user's access groups in memberships.
However, many people are confused about how this particular setting is different from the style setting where you can mark something as 'display: none' in the layout. There are two significant differences that I wanted to cover today because understanding this distinction can be an incredibly powerful tool in site design.
Let's start with the style panel. The layout options for any element include block, flex, CSS grids, inline blocks, plain text, and the ability to hide things. These settings are breakpoint-specific, which means that using the 'display: none' setting as a layout option, you can make breakpoint-specific decisions on which elements you want to appear.
For instance, suppose you have a title element that you only want to appear on desktops and tablets, but not on mobile devices. You can have it visible on desktop and then as you cascade down through the breakpoints, you can change that display setting to 'none' at the mobile landscape breakpoint. This will then cascade down to mobile portrait, making your heading visible on desktop and tablet, but not on mobile devices.
However, it's important to understand that no matter what, that element is always in the page, even when you cannot see it. This makes a big difference for developers who are searching for and selecting elements in the page. It also affects certain third-party tools such as fin Suites filtering, which will see hidden elements as well and still try to apply its filtering logic to them.
This is where the big difference between the 'display: none' style and the 'visibility: hidden' setting comes in. If you mark something as hidden, it is completely suppressed. The suppression happens server-side, so it is not in the page at all. If you publish this page, you're not going to find that element at any breakpoint. This is not a breakpoint-specific setting; it's going to apply everywhere.
This feature is very useful when you are building and managing a site. There are certain changes that you might want to make, like redesigning a section or changing out a custom code block. If you switch that to 'visibility: hidden', it's not just invisible, it's gone from the page and it will not execute at all.
One of the places where I find this most useful is when I'm doing redesigns of a site. If I want a section to go away so that it is no longer dead weight in the generated page, I can just mark it as hidden and it is gone from the perspective of the web browser. It never existed, it is not in the page at all.
However, I do wish that Webflow would differentiate in the indication here in the Navigator. Marking something as 'visibility: hidden' has the exact same symbol in styling as when I mark something as 'display: none'. I think ideally the indication I would like to see for sections that are fully suppressed is a second line through the eye and then probably a light gray treatment to the text itself.
This feature is something that you'll find incredibly valuable anytime you're making a change. You don't need to rip out the old elements permanently while you're halfway through the design process. One other place that I use this quite frequently is when I'm dealing with large-scale interactions around things like pop-ups. For example, a holiday hours pop-up that we only show around Christmas time. With 'visibility: hidden', I can take that pop-up and just make it go away 100% out of the page. There are no interactions running, it is just gone. This makes things just so much easier from an administrative standpoint. It's a feature that I hope you get as much use out of as we are.
