Interaction refinements

Interaction refinements

Careful control over touch, caret, printing, and color adjustment.

touch-action

What gestures a touchscreen element allows:

.pan-zone {
  touch-action: pan-y;        /* only vertical panning */
  touch-action: none;         /* disable gestures */
  touch-action: manipulation; /* allow pan/zoom, no double-tap zoom */
}

caret-color

Color of the text cursor:

input {
  caret-color: #04aa6d;
}

forced-colors

Windows high-contrast mode queries:

@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
}

print-color-adjust

Let the user choose whether backgrounds print:

p {
  print-color-adjust: exact;   /* keep backgrounds when printing */
}

user-select (already seen)

user-select: none on buttons.

TL;DR

• touch-action limits touch gestures (carousels!).
• caret-color colors the text caret.
• forced-colors adapts to Windows high-contrast.
• print-color-adjust controls ink on print.