Einen CSS Custom Property Wert mit JavaScript abrufen

Hier ist ein cleverer Trick von Andy Bell, bei dem er CSS Custom Properties verwendet, um mit JavaScript zu prüfen, ob ein bestimmtes CSS-Feature unterstützt wird.

Im Grunde nutzt er die Fähigkeit von CSS, die Browserunterstützung für eine bestimmte Eigenschaft zu prüfen, indem er eine benutzerdefinierte Eigenschaft setzt, die einen Wert von entweder 0 oder 1 (Boolesch!) zurückgibt, und informiert dann JavaScript, basierend auf diesem Wert auszuführen.

Hier ist sein Beispiel

.my-component {
  --supports-scroll-snap: 0;
}

@supports (scroll-snap-type: x mandatory) {
  .my-component {
    --supports-scroll-snap: 1;
  }
}

const myComponent = document.querySelector('.my-component');
const isSnapSupported = getCSSCustomProp('--supports-scroll-snap', myComponent, 'boolean');

Wie Andy erwähnt, ist ein weiterer gängiger Weg, dies zu tun, Pseudo-Elemente auf dem body-Element zu verwenden und sie dann mit JavaScript abzurufen. Aber dieser Ansatz mit @supports erscheint mir persönlich viel sauberer und weniger hacky. Ich frage mich, wie viele weitere intuitive Dinge wir mit CSS Custom Properties tun können werden, denn dies ist ein interessanter Fall, bei dem CSS JavaScript anweist und nicht umgekehrt.

Direkter Link →