Cách xử lý CSS trong chế độ toàn màn hình (Full-Screen) của trình duyệt

Giới thiệu

Chúng ta có thể định nghĩa các kiểu cho trang web ở chế độ toàn màn hình bằng pseudo-class :fullscreen trong CSS.

Cú pháp

Cú pháp của pseudo-class :fullscreen như sau:

Selector:fullscreen { 
  attribute: /*giá trị*/ 
}

Ví dụ 1: Thay đổi nền và font

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau:

Ví dụ 2: Background hình ảnh fullscreen

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: