Visibility

Syntax

Class
Properties
visible
visibility: visible;
invisible
visibility: hidden;

 

Appearance

invisible elements do take up space ( visibility: hidden ) as opposed to hidden elements ( display: none ).

Using opacity-0 has the same visual effect as invisible, though they respond to interactivity differently.

<div class="t1 w-full flex flex-row flex-center"> <div class="t1 w-64 h-64 m-16 bg-c-white shadow-4"></div> <div class="t1 w-64 h-64 m-16 bg-c-white shadow-4 visible"></div> <div class="t1 w-64 h-64 m-16 bg-c-white shadow-4"></div> </div>

 

Interactivity

invisible elements do not respond to clicks as opposed to those with opacity-0.

In this example, the last element will be blue while the middle element is active (clicked).

click the middle element <div class="t1 w-full flex flex-row flex-center"> <div class="t1 w-64 h-64 m-16 bg-c-white shadow-4"></div> <div class="t1 w-64 h-64 m-16 bg-c-white shadow-4 visible"></div> <div class="t1 w-64 h-64 m-16 bg-c-white shadow-4 active:+bg-c-blue"></div> </div>

invisible elements can not be focused as opposed to those with opacity-0.

In this example, the last element will be blue while the middle element is focused.

click the first element then press TAB <div class="t1 w-full flex flex-row flex-center"> <button class="t1 w-64 h-64 m-16 bg-c-white shadow-4 focus:outline-2-black"></button> <button class="t1 w-64 h-64 m-16 bg-c-white shadow-4 focus:outline-2-black visible"></button> <button class="t1 w-64 h-64 m-16 bg-c-white shadow-4 focus:outline-2-black focus:+bg-c-blue"></button> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Show the element.
t1 visible
.t1.visible { visibility: visible; }
Hide the element.
t1 invisible
.t1.invisible { visibility: hidden; }