2010-12-29 13 views
5

Chcę być w stanie określić, czy przeglądarka obsługuje kolory HSL, jeśli nie, chcę wrócić do generowanych kolorów RGB (mam oba generowane). Czy jest jakiś sposób, aby to zrobić bez faktycznego sprawdzenia, jakiej przeglądarki używa użytkownik?Jak mogę sprawdzić, czy moja przeglądarka obsługuje kolory HSL w JavaScript?

+2

Dlaczego nie trzymać na RGB i nie martwić się o to? Robisz wszystko, aby zrobić coś, co nie ma znaczenia dla użytkownika. – Brad

+1

HSL jest łatwiejszy w obsłudze, jeśli chodzi o generowanie kolorów programowo (w moim przypadku przyjmując liczbę od 1 do 5 i wybierając kolor z gradientu) również łatwiej jest wizualizować kolory podczas pracy z HSL – paullb

Odpowiedz

3

Łatwa odpowiedź to: http://www.modernizr.com/. Możesz spojrzeć na kod źródłowy i zmodyfikować go, aby użyć tylko części o HSL.

W zasadzie to właśnie tworzy nowy element, ustawia background-color używając wartości HSLA, a potem patrzy na obecność rgba lub hsla w atrybutach typu obiektu. Jeśli jest obecny, przeglądarka obsługuje HSLA. Bardzo mądry:

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 
}) 

Zauważ, że dla regularnego stosowania CSS metrobalderas answer poniżej jest droga, ale dla celów, które paulb przeznaczeniem, to jest jeden sposób, aby to zrobić.

5

Wykrywanie jest ładny, ale dodanie fallback jest jeszcze lepsze:

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

Najpierw należy ustawić awaryjnej tę właściwość, że w większości przeglądarek zrozumie, a następnie ustawić nową właściwość. Jeśli ta nie jest obsługiwana, nie zastąpi poprzedniej.

Chociaż nie wiem, czego potrzebujesz do HSL.

+0

To jest doskonała rada, ale nie działa dla mnie, ponieważ próbuję użyć hsl do ustawienia koloru polilinii w Google Maps (nie o tym wcześniej wspominałem). HSL jest łatwiejszy w pracy, jeśli chodzi o generowanie kolorów. – paullb

1

Jeśli problem polega na tym, że praca z HSL jest łatwiejsza do generowania kolorów, ale martwi Cię obsługa przeglądarki, możesz rozważyć pracę z HSL w logice biznesowej, ale konwersję do RGB podczas stosowania kolorów do elementów DOM.

Patrz także następujące pytanie:
HSL to RGB color conversion