CSS检测元素是否在视口内（无JS）

Question

为简单起见，这是对现实世界问题的简化：

我正在寻找一种CSS方式来定位视口内部/外部的元素。在摘要中，默认情况下，所有平方的div都具有红色背景，只有进入视口的正方形才应具有蓝色背景...

不允许使用Javascript：-）

#container {}
.square {
  display: inline-block;
  width: 150px;
  height: 150px;
  background: red;
  border: solid 1px black;
}

/* I want to achieve the behavior of the `:inside-viewport` pseudo selector... */
.square:inside-viewport {
  background: blue;
}

<div id="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>