Upgrade to Pro — share decks privately, control downloads, hide ads and more …

その要素は本当に「見えている」のか 〜要素の “visibility” に関する考察〜

canalun
August 08, 2023

その要素は本当に「見えている」のか 〜要素の “visibility” に関する考察〜

重要: 2023/9/29追記:
下記に掲載している資料の中身に間違いがありました。checkVisibility()APIが要素のサイズについて確認してくれる旨の記述は誤りで、要素のサイズは確認されません!失礼しました🙇‍♂

-----

第1回 3rdparty.js(https://3rdpartyjs.connpass.com/event/289558/
)で発表した資料です🌝

2ページ目の注意書きにもあるように、gifがふんだんに使われている関係でSpeaker Deckでは内容が伝わりづらくなっています😭
gifにも興味があるよ〜という方は、下記リンクよりpptxファイルを直接ご覧ください!
(資料を無断で二次利用(転載、流用、コピーなどなど)することはなしでお願いします🙇)
https://docs.google.com/presentation/d/1o9bzUOBT6P9Mss8fPcfaX-EZ2lIOAKNS/edit?usp=sharing&ouid=110830955971099412594&rtpof=true&sd=true

テックタッチに興味がある方はこちらから!
https://techtouch.jp

canalun

August 08, 2023
Tweet

More Decks by canalun

Other Decks in Programming

Transcript

  1. checkVisibility()で確認してくれるコト - サイズが0: width / height - boxがない: display /

    content-visibility - 透明: opacity - invisible: visibility ✅ ✅ ✅ ✅ 祖先要素も見てくれる🌝
  2. checkVisibility()で確認してくれるコト - サイズが0: width / height - boxがない: display /

    content-visibility - 透明: opacity - invisible: visibility ✅ ✅ ✅ ✅ 祖先要素も見てくれる🌝 非対応ブラウザ向けには、 自分で実装しよう! (w3cに実装の定義が載っているヨ) (polyfillでもいいヨ)