2010-12-29 5 views
5

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 tatsächlich zu überprüfen, welchen Browser der Benutzer verwendet?Wie kann ich prüfen, ob mein Browser HSL-Farben in Javascript unterstützt?

+2

Warum nicht RGB-Stick und nicht darum kümmern? Sie tun alles dafür, etwas zu tun, das für den Benutzer keinen Unterschied macht. – Brad

+1

HSL ist leichter zu arbeiten in Bezug auf die Erzeugung von Farben programmatisch (in meinem Fall eine Zahl zwischen 1 und 5 und die Wahl einer Farbe aus einem Gradienten) auch ich finde es einfacher, Farben zu visualisieren, wenn Sie mit HSL arbeiten – paullb

Antwort

3

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

Grundsätzlich schafft es nur ein neues Element, setzt seine background-color Verwendung HSLA-Werte und sucht dann nach dem Vorhandensein von rgba oder hsla im Stil Attribute des Objekts. Wenn vorhanden, unterstützt der Browser HSLA. Sehr clever:

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 regelmäßige CSS Nutzung metrobalderas answer unter dem Weg zu gehen, aber für den Zweck, die dazu bestimmt paulb, das ist eine Möglichkeit, es zu tun.

5

Detecting ist schön, aber ein Rückfall ist das Hinzufügen noch besser:

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

Zuerst legen Sie den Rückfall, die Eigenschaft, die vor allem verstehen, Browser, und legen Sie die neue Eigenschaft. Wenn dieser nicht unterstützt wird, wird der vorherige nicht überschrieben.

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

+0

Dies ist ein guter Rat, aber funktioniert nicht für mich, während ich versuche, hsl zu verwenden, um die Farbe einer Polylinie in Google Maps zu setzen (nicht, dass ich das vorher erwähnte). Mit HSL lässt sich leichter Farbe erzeugen. – paullb

1

Wenn Sie Bedenken haben, dass die Arbeit mit HSL einfacher ist, Farben zu generieren, aber Sie sich Sorgen um die Browserunterstützung machen, können Sie in Ihrer Geschäftslogik mit HSL arbeiten, aber beim Anwenden der Farben auf die DOM-Elemente in RGB konvertieren.

siehe auch die folgende Frage:
HSL to RGB color conversion

Verwandte Themen