CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

ブラウザのフルスクリーンモードでCSSを処理する方法は？

CSS：fullscreen pseudo-classを使用して、フルスクリーンモードでWebページのスタイルを定義できます。

CSS：fullscreenpseudo-classの構文は次のとおりです。 

Selector:fullscreen {
   attribute: /*value*/
}

次の例は、CSS：fullscreenpseudo-classを示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 3%;
}
:fullscreen {
   background-color: thistle;
   font-size: 2em;
}
:-webkit-full-screen {
   background-color: thistle;
   font-size: 2em;
}
:-ms-fullscreen {
   background-color: thistle;
   font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
   if (item.requestFullscreen) {
      item.requestFullscreen();
   } else if (item.webkitRequestFullscreen) {
      item.webkitRequestFullscreen();
   } else if (item.msRequestFullscreen) {
      item.msRequestFullscreen();
   }
}
</script>
</body>
</html>

出力

これにより、次の結果が生成されます-

ブラウザのフルスクリーンモードでCSSを処理する方法は？

例

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 3%;
   color: white;
   box-shadow: inset 0 0 40px green;
}
:fullscreen {
   background: url("https://images.unsplash.com/photo-1612149413930- 72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
   font-size: 2em;
}
:-webkit-full-screen {
   background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
   font-size: 2em;
}
:-ms-fullscreen {
   background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
   font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
   if (item.requestFullscreen) {
      item.requestFullscreen();
   } else if (item.webkitRequestFullscreen) {
      item.webkitRequestFullscreen();
   } else if (item.msRequestFullscreen)
      item.msRequestFullscreen();
   }
}
</script>
</body>
</html>

出力

これにより、次の結果が生成されます-

ブラウザのフルスクリーンモードでCSSを処理する方法は？

ブラウザのフルスクリーンモードでCSSを処理する方法は？


  1. Firefox ブラウザでピクチャ イン ピクチャ モードを使用する方法

    この投稿では、Picture in Picture モードまたは PIP モードについて説明します。これは、さまざまなアプリケーションへの最新の追加として最も一般的に見られます。 PIP モードは、ある画面でビデオを視聴しながら別の画面で同時に作業できる機能です。これは、今年初めに WhatsApp に導入されました。 デスクトップの場合、Chrome は最近、Picture in Picture モードを導入しました。この機能を実現する次の候補は Mozilla Firefox です。ピクチャ イン ピクチャ モードは、デスクトップ機能を簡単に使用できるようになるため、すべての人に恩恵をも

  2. ブラウザをシークレット モードで自動的に起動する方法

    ブラウザでシークレット タブを自動的に開きたい場合は、読み進めてください。プライベート ブラウジング モードまたはシークレット モードを使用すると、完全ではありませんが匿名でサーフィンできます。ユーザーがプライベート モードでブラウジングするときはいつでも、既定では、ブラウザーはユーザーがアクセスした Web ページ、検索履歴、Cookie、および一時ファイルを保存しません。 ほとんどすべての最新の Web ブラウザーはプライベート ブラウジングを提供しますが、通常モードでブラウザーを起動した後、手動でシークレット モードを開始する必要があります。しかし、ブラウザをデフォルトでシークレット