Wie kann ich überprüfen, ob mein Browser HSL -Farben in JavaScript unterstützt?

StackOverflow https://stackoverflow.com/questions/4555015

  •  13-10-2019
  •  | 
  •  

Frage

Ich möchte feststellen können, ob ein Browser HSL -Farben unterstützt. Wenn nicht, dann möchte ich auf generierte RGB -Farben zurückgreifen (ich habe beide generiert). Gibt es eine Möglichkeit, dies zu tun, ohne zu überprüfen, welchen Browser der Benutzer verwendet?

War es hilfreich?

Lösung

Die einfache Antwort wäre: http://www.modernizr.com/. Sie können sich den Quellcode ansehen und ihn ändern, um nur den Teil über HSL zu verwenden.

Grundsätzlich schafft es nur ein neues Element, legt seine fest background-color Verwendung von HSLA -Werten und sucht dann nach dem Vorhandensein von rgba oder hsla in den Stilattributen des Objekts. Wenn vorhanden, unterstützt der Browser HSLA. Sehr schlau:

function supportsHSLA() {
  var style = createElement('a').style
  style.cssText = 'background-color:hsla(120,40%,100%,.5)'

  return style.backgroundColor.indexOf('rgba') > -1 ||
    style.backgroundColor.indexOf('hsla') > -1
})

Beachten Sie, dass für die reguläre CSS -Verwendung Metrobalderas antworten Im Folgenden ist der Weg zu gehen, aber für den Zweck, den Paulb beabsichtigte, ist dies eine Möglichkeit, dies zu tun.

Andere Tipps

Das Erkennen ist schön, aber ein Fallback ist noch besser:

#element{
   background: rgb(255, 10, 25);
   background: hsl(240, 100%, 50%);
}

Zuerst setzen Sie den Fallback, die Eigenschaft, die Browser meist verstehen, und dann die neue Eigenschaft festgelegt. Wenn dieser nicht unterstützt wird, wird er den vorherigen nicht überschreiben.

Obwohl ich nicht weiß, wofür Sie HSL brauchen würden.

Wenn die Beschäftigung mit HSL leichter Farben generiert ist, aber Sie sind besorgt über den Browserunterstützung. Sie können in Betracht ziehen, mit HSL in Ihrer Geschäftslogik zu arbeiten, aber bei der Anwendung der Farben auf die DOM -Elemente in RGB zu konvertieren.

Siehe auch die folgende Frage:
HSL zu RGB -Farbkonvertierung

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top