Displaying None in CSS

Introduction

The CSS rule "display: none;" is used to hide HTML objects from being shown on a page. However, this does not prevent the objects from being downloaded to the mobile device.

These extra objects that are never displayed to the user will slow down your app and waste data.

This Best Practice provides background on why "display: none" is often used in apps and how it can cause issues, tells you how AT&T Video Optimizer can help identify instances of "display: none", and provides a recommendation for avoiding the use of "display: none" in your app.

Background

There are a number of ways to hide content using CSS, but many of them do not actually prevent the content from being loaded.

The CSS rule "display: none" is the most common approach for hiding objects and the option most often used in JavaScript libraries and JavaScript widgets.

The Issue

When "display: none" is applied, content is not displayed, but it is still downloaded. This increases the overhead for an app and slows down rendering.

This is particularly an issue with mobile networks where bandwidth is constrained.

Best Practice Recommendation

The best practice recommendation is to avoid using "display: none" as a way to hide images.

AT&T Video Optimizer helps identify this issue in your app by testing to see if the CSS rule "display: none" is being used.

• If "display: none;" is detected, the app will fail this test, and the test results will display a table of all the files in which it was detected.
• If "display: none;" is not detected, the app will pass this test.

Using Video Optimizer, you can also view the content that was downloaded by the app and confirm that content does get transferred even when its style is set to "display: none".

If the content that you are trying to hide is an image, you can work-around the issue by making the image a background-image of a DIV in CSS. When the style of the DIV is set to "display: none", the image will not load, and when CSS is disabled, it will still not load.