Deep understanding of CSS element visibility and cssvisibility

Deep understanding of CSS element visibility and cssvisibility
* Directory [1] defines [2] attributes [3] display [4] JS [5] transition [6] API [7] Before DEMO

Visibility attributes are common in comparison with display attributes. But in fact, this property has its own interesting usage. This article describes the visibility attributes in detail.

 

Definition

Visibility

Value: visible | hidden | collapse | inherit

Initial Value: visible

Apply to: All elements

Inheritance: Yes

 

Attribute

Visible: visible to elements

Hidden: The elements are invisible, but the elements still affect the layout of the document.

[Note] You can set the descendant element of a hidden element to visible, which will make the descendant element appear normally.

Collapse: Used in the table <col> or <colgroup>, indicating that all cells in the column or column group are not displayed. For non-table elements, collapse and hidden have the same meaning.

[Note] the webkit kernel browser does not support using the collapse attribute for <col> or <colgroup> elements.

 

Display

Visibility: hidden and display: none are two ways to hide elements, which are often compared. In fact, the difference is very simple. The former is not separated from the document stream and retains the physical area occupied by the previous elements; the latter is separated from the document stream. If it is re-displayed, the page needs to be re-drawn.

 

JS

After the element is set to visibiliy: hidden, although it still occupies the physical area, js effect is no longer acceptable.

// Js effect: When the mouse moves into the element, the background color of the parent class turns black; when the mouse moves out, the background color restores the initial value.

 

Transition

In fact, visibility is a discrete step. In the range of 0 to 1, 0 indicates hidden, and 1 indicates display. Visibility: hidden can be viewed as visibility: 0; visibility: visvisible can be viewed as visibility: 1. Therefore, the visibility application transition is equivalent to 0 ~ 1. In fact, as long as the visibility value is greater than 0, it is displayed. Due to this phenomenon, we can use transition to hide the delayed display of elements.

#oShow{    visibility: visible;    transition: visibility 0.2s  0.5s;}#oShow:hover{    visibility: hidden;}

Visibility works with opacity and transtion to enable true elements to fade in and out. If only opacity is used, even if the final element opacity is changed to 0, the image can still overwrite other elements and accept js effects. Therefore, visibility can be used to hide elements.

#oShow{    visibility: visible;    opacity: 1;    transition: 1s;}#oShow:hover{    visibility: hidden;    opacity: 0;}

 

API

Most of the current browsers use the multi-tab mode, but the performance of these pages is uneven. For some pages with poor performance, when users switch back from other tab pages, page disorder, page freezing, or even browser freezing may occur due to poor page performance.

HTML5 adds the page visibility API. This API has two attributes, one event

[Note] IE9-not supported by safari. So you can use document. hidden! = 'Undefined' for browser Recognition

Document. hidden: indicates whether the current page is visible.

When the current tab page is active, the attribute value of document. hidden is false; otherwise, the value is true.

Document. visibilityState: returns the visible status of the current page.

Hidden: visible when the browser minimizes, switches tabs, and locks the screen on the computer: when the user is viewing the current page, prerender: The document is loaded off the screen or invisible unloaded: when the document is about to be unloaded

[Note] prerender and undloaded are not supported by all browsers and are rarely used.

Visibilitychange event: this event is triggered when the status of document. visibilityState changes.

Application scenarios

[1] When the page property is hidden, stop the timer or animation on the tab in the page to reduce memory usage.

[2] When the page status is switched to control the playing or stopping of music or video

[3]...

 

DEMO

[1] When the page is not activated, the animation in the page is paused. When the page is re-activated, the animation effect is resumed.

.box{    width: 500px;    background-color: lightgreen;    border: 1px solid black;}@keyframes loop{    0%{        width: 100px;    }    100%{        width: 500px;    }}#div{    width: 100px;    height: 100px;    background-color: pink;    animation: loop 200s alternate infinite linear;}    

<div class="box">    <div id="div"></div></div>

function getCSS(obj,style){    if(window.getComputedStyle){        return getComputedStyle(obj)[style];    }    return obj.currentStyle[style];};var oTimer = setInterval(function(){    document.title=div.innerHTML = parseInt(getCSS(div,'width'));},100);document.addEventListener('visibilitychange',function(){    if(document.hidden){        div.style.animationPlayState = 'paused';    }else{        div.style.animationPlayState = 'running';    }    },false);

[2] Page switching to control playing and pausing music

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls ></audio>

Var mark; document. addEventListener ('visibilitychange', function () {if (document. hidden) {// if the user clicks suspend if (audio. paused) {mark = false;} else {audio. pause (); mark = true ;}} else {// when the pause is caused by PAGE switching, if (mark) {audio. play () ;}}, false );