CSSでレイアウトに影響を与えず見えない要素を指定する

document picture in pictureのときだけ特定要素を表示させるというのをしたかった

参考

「動画」だけでなく、すべての要素でピクチャーインピクチャーで使用可能 | Web Platform | Chrome for Developers

document picture in pictureの一部コード

 const content = document.querySelector('#dpinp');
 const pipWindow = await documentPictureInPicture.requestWindow({
   width: content?.clientWidth,
   height: content?.clientHeight,
   copyStyleSheets: true,
 });
 pipWindow.document.body.append(content);

<div id="dpinp">
  <div>
    <div>コンテンツ</div>
    <meter min={0} max={10} value={3}></meter>
    <div>
      <button id="pause-button">
        <PauseIcon />
      </button>
    </div>
  </div>
</div>

見た目のため簡略化したがpause-buttonをdocument picture in picture時は表示、通常時は非表示にさせたい

参考にあるようにdocument picture in picture時のスタイルはメディアクエリで指定できるのでそちらでやる

通常時の状態では非表示要素で用意しておきたい

Tailwind CSSを利用していたのでいつものようにhiddenかな?と思いcontentの中のタグにスタイルを設定した

Display - Tailwind CSS

hidden

display: none;

contents

display: contents;

が、pinpウィンドウのサイズを指定する際に、対象要素を表示するしないでclientHeightが変わってしまうようだった、なのでpinp対象の要素と同じサイズにならない

そういうケースにはvisiblityというプロパティを使えば良いらしい

調べたらすぐ出てきたが知らなかった

visible

visibility: visible;

invisible

visiblity: hidden;

Visibility - Tailwind CSS

「要素を「見えない状態」にしますが、DOM上のレイアウトには影響を与えません」とのこと

これだよこれ

しらなかった

component.tsx

<div id="dpinp">
  <div>
    <div>コンテンツ</div>
    <meter min={0} max={10} value={3}></meter>
    <div>
      <button id="pause-button" className="invisible">
        <PauseIcon />
      </button>
    </div>
  </div>
</div>

styles/tailwind.css

@media all and (display-mode: picture-in-picture) {
  #pause-button {
    @apply visible;
  }
}

通常時はinvisible、picture in picture時はvisible

これは良き

関連記事

Profile

Account

RSS