Let’s talk about Visibility in CSS

#BuildTogether Day 33/100

Today is Friday, it is always an exciting day because it marks the end of the week. I am really enjoying my 100 Days of Code and I just got told by our product marketing lead that this is the most exciting thing happening at the moment and I couldn’t agree more 😍

I continued with the CSS path as I am very keen to finish my Flashcards project and deliver another amazing thing on Realm. Yes, I am going to be creating a Realm quiz for you all ;) Stay Tuned.

Visibility

The visibility property is intended to hide or show the element without changing the markup of the HTML document. It can be set to the following values:

• visible is the default value, meaning that the element is displayed as visible.
• hidden makes the element invisible.
• collapse can hide rows and columns of a table, and the table will be reconstructed taking the missing elements into account. If applied to something that is not a table element, the result is the same as if you used hidden.
• inherit will allow you to inherit the value of the parent element.
• initial sets the property to its default value.
• unset is basically a combination of the initial and inherit values. The unset keyword sets the property value as inherit if the property is inherited from the parent element; otherwise, the value is set as initial.

The elements hidden using the visibility property, still remain in the markup. To make them skip completely when rendering the document as if the element did not exist at all, set the display property to the value none.

Accessibility Concerns

Using a visibility value of hidden on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen-reading technology.

Backface-visibility

This property determines whether the backside of an element is visible or not when the front side is turned away from the screen. The back face of an element is basically a mirror reflection of the displayed front face.

This property is useful to rotate the element in the 3D space. In a usual situation with 2D transformations, backface-visibility does not affect the display of the element.

You can set the following values for the backface-visibility property:

• visible is used to make the backside of the element visible and mirrored through the front surface of the element. This is the default value.
• hidden makes the backside invisible behind the front surface of the element.
• inherit will allow you to inherit the value of the parent element.
• initial sets the property to its default value;
• unset is basically a combination of the initial and inherit values. The unset keyword sets the property value as inherit if the property is inherited from the parent element; otherwise, the value is set as initial.

Below is a code-pen for creating a cube with semi-transparent edges

visible is the default value of the backface-visibility property, we can see all the back sides of the elements.

When we add visibility: hidden; style to the element with the face class, the backside of cube elements are then hidden

Browser Support

If you want the backside of your items to be displayed in earlier versions of Chrome, Safari, Android, or Opera, duplicate the code using the -webkit- prefix.

p:hover {
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  backface-visibility: visible;
}

If you fancy finding more on my 100days of code journey, feel free to take a peek at MongoDB Community Forums.

The Journey of #100DaysOfCode (@henna_dev)