:fullscreen

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

:fullscreen là lớp giả (pseudo-class) trong CSS, khớp với mọi phần tử hiện đang ở chế độ toàn màn hình. Nếu nhiều phần tử đã được đặt ở chế độ toàn màn hình, lớp giả này sẽ chọn tất cả chúng.

Cú pháp

css

:fullscreen {
  /* ... */
}

Lớp giả :fullscreen cho phép bạn cấu hình stylesheet để tự động điều chỉnh kích thước, kiểu dáng hoặc bố cục nội dung khi các phần tử chuyển đổi qua lại giữa chế độ toàn màn hình và cách trình bày thông thường.

Ví dụ

Tạo kiểu cho phần tử toàn màn hình

Ví dụ này áp dụng màu nền khác nhau cho một phần tử <div>, tùy thuộc vào việc nó có đang ở chế độ toàn màn hình hay không. Ví dụ bao gồm một <button> để bật/tắt toàn màn hình.

html

<div class="element">
  <h1><code>:fullscreen</code> pseudo-class demo</h1>

  <p>
    This demo uses the <code>:fullscreen</code> pseudo-class to automatically
    change the background color of the <code>.element</code> div.
  </p>

  <p>
    Normally, the background is light yellow. In fullscreen mode, the background
    is light pink.
  </p>

  <button class="toggle">Toggle Fullscreen</button>
</div>

Lớp giả :fullscreen được dùng để ghi đè background-color của thẻ <div> khi nó ở chế độ toàn màn hình.

css

.element {
  background-color: lightyellow;
}

.element:fullscreen {
  background-color: lightpink;
}

JavaScript sau đây cung cấp một hàm xử lý sự kiện để bật/tắt toàn màn hình khi <button> được nhấp.

document.querySelector(".toggle").addEventListener("click", (event) => {
  if (document.fullscreenElement) {
    // If there is a fullscreen element, exit full screen.
    document.exitFullscreen();
    return;
  }
  // Make the .element div fullscreen.
  document.querySelector(".element").requestFullscreen();
});

.element {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  padding: 1.2em;
}