What ?! Amazing checkVisibility() !
Introduction
傳統想要檢查 element 是否顯示這檔事兒，總是需要附加一堆額外的判斷，好比檢查 CSS display / visibility 屬性，或者 inline-size、block-size 是否為 0，亦或是檢查該 element 是否在當前 viewport 上…等等。也就是繁瑣的判斷語法總是很令 developer 感到心累，更需要不斷地與時俱進，才能有效的支援新支援的各種 CSS 語法。
The way I used to do
我個人最常用的不外乎是 CSS property check，從早期的「getComputedStyle」到這兩年新支援的 CSS Typed OM「computedStyleMap」都用過，用法大同小異，但是均不能解決繼承屬性的隱藏。好比 element 爸爸的爸爸隱藏了，透過上面兩種方式依舊無法正確地得知 element 是否屬於隱藏狀態。
- getComputedStyle
- computedStyleMap
好比 element 爸爸的爸爸隱藏了，透過上面兩種方式依舊無法正確地得知 element 是否屬於隱藏狀態。
Let’s use checkVisibility()
如今偵測 element 是否顯示可以用「checkVisibility()」來解決了，只要滿足以下條件：
- element CSS display 為「none」或「contents」。
- element 它的爸爸以及祖先的 content-visibility 為「hidden」。
均會得到 false（element not show）。不僅僅滿足了我們需求，連新穎的 content-visibility 亦有支援。除此之外，亦可以下參數強制檢查 element 最終運算後的「content-visibility」、「opacity」以及 「visibility」 properties。使用上不僅簡單，更是確切滿足了我們需求。堪稱神兵一點都不為過～
Conclusion
透過 checkVisibility() 這個新穎的支援，可以更細緻的滿足我們檢查 element 是否顯示的需求。筆者近期剛好有個 video 類型的 web component 開發，某些情況下會暫時對 component 進行隱藏，如果隱藏的 component 突然 play 便會造成使用上的困擾，這時便可以啟用 checkVisibility() 來判斷是否要對該 component 進行 init 的行為。真真便利非常～如果你手上也有類似需求的話，不妨試試看 checkVisibility() 這個神兵～