브라우저가 Javascript에서 HSL 색상을 지원하는지 어떻게 확인할 수 있습니까?

Question

브라우저에서 HSL 색상을 지원하는지 확인하고 싶다면 생성 된 RGB 색상으로 되돌아 가야합니다 (둘 다 생성되었습니다). 사용자가 어떤 브라우저를 사용하고 있는지 실제로 확인하지 않고이를 수행 할 수있는 방법이 있습니까?

Answer 1

쉬운 대답은 http://www.modernizr.com/입니다. 소스 코드를보고 HSL에 대한 부분 만 사용하도록 수정할 수 있습니다.

은 기본적으로는, 새로운 요소를 만들고 그 background-color 사용 HSLA 값을 설정 한 다음 개체의 스타일 속성에 rgba 또는 hsla의 존재를 찾습니다. 브라우저가 있으면 HSLA를 지원합니다. 아주 영리한 : 일반 CSS 사용 metrobalderas answer 아래 갈 수있는 방법이지만, 구성 paulb하기위한 목적으로,이 그것을 할 수있는 한 가지 방법이라고

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

참고.

Answer 2

감지 좋은,하지만 대체를 추가하면 더 나은입니다 :

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

먼저, 대체, 이해 대부분의 브라우저를 속성을 설정 한 다음 새 속성을 설정합니다. 이 파일이 지원되지 않으면 이전 파일을 덮어 쓰지 않습니다.

비록 내가 HSL이 필요한지 모르겠다.

Answer 3

HSL로 작업하는 것이 색상을 생성하는 것이 더 쉽지만 브라우저 지원이 걱정되는 경우 비즈니스 로직에서 HSL로 작업하는 것을 고려할 수 있지만 색상을 DOM 요소에 적용 할 때는 RGB로 변환하는 것이 좋습니다.
HSL to RGB color conversion