全屏
<h1 class="supported">Your browser supports :has()</h1>
<h1 class="unsupported">Your browser does not support :has()</h1>
* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: 'Google Sans', sans-serif, system-ui;
}

.supported {
  display: none;
  color: hsl(130 80% 40%);
}

.unsupported {
  color: hsl(0 80% 50%);
}

@supports(selector(:has(+ *))) {
  .supported { display: block; }
  
  .unsupported {
    display: none;
  }
}
返回