CSS3 Print-color-adjust

<!DOCTYPE html>
<title>Example</title>
<style>
body {
  font-family: sans-serif;
  padding: 10px;
}
.print-demo {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.card {
  padding: 16px;
  border-radius: 8px;
  width: 160px;
  text-align: center;
  font-weight: bold;
  color: white;
  font-size: 14px;
}
.card-exact {
  background-color: #7c3aed;
  print-color-adjust: exact;
}
.card-economy {
  background-color: #059669;
  print-color-adjust: economy;
}
.label {
  display: block;
  color: #555;
  font-weight: normal;
  font-size: 12px;
  margin-top: 6px;
}
</style>

<p>These boxes demonstrate <code>print-color-adjust</code>. When printed, the purple box retains its background color; the green box may have it removed to save ink.</p>

<div class="print-demo">
  <div>
    <div class="card card-exact">print-color-adjust: exact</div>
    <span class="label">Background preserved when printing</span>
  </div>
  <div>
    <div class="card card-economy">print-color-adjust: economy</div>
    <span class="label">Background may be removed when printing</span>
  </div>
</div>