Preloading HTML Content with CSS

As mentioned previously, hiding regular HTML content from being viewed initially, and then presenting it to the user based on a programmatic schema, is a two-step process which can be easily achieved with the use of CSS and JavaScript respectively. First we select which page’s sections will be hidden from view by applying the display: none property to each of the selected elements, preloading that content in a background process (while the page is loading into the browser). In the second step, we manipulate those elements by the logic of JavaScript code, to be showed to the end user according to the desired functionality and visual effect.

The CSS code for hiding selected content is basically the following:

.hidden {
 display: none;
}

Having defined the “hidden” class, with the display property set to “none,” each element which the class is applied to will be initially hidden, creating a set of elements susceptible to being deployed by utilizing a controllable script.

As you may have guessed, building a hidden structure as a transparent process to the visitor, and having the ability to manipulate it as we wish, is an extremely powerful technique that can be exploited to achieve a huge range of effects, with little effort from us.

From dynamic forms, to content rotators, drop-down menus, or image galleries, to name a few, Web designers can use this technique for almost endless creative possibilities. For the scope of this article, we’ll show some detailed examples implementing this approach. The rest of the possible applications will be left as homework for your own future inspiration. So, what are we waiting for? Let’s dive into the first example, which involves rewriting the content rotator previously presented using the new technique.