Как я могу проверить, поддерживает ли мой браузер цвета HSL в Javascript?

Question

Я хочу иметь возможность определить, поддерживает ли браузер цвета HSL, если нет, то я хочу использовать сгенерированные цвета RGB (оба сгенерированы) Есть ли способ сделать это без фактической проверки, какой браузер использует пользователь?

Answer 1

Обнаружение это хорошо, но добавление запасного варианта еще лучше:

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

Сначала вы устанавливаете запасной вариант, свойство, которое в основном будут понимать браузеры, а затем вы устанавливаете новое свойство. Если этот не поддерживается, он не будет перезаписывать предыдущий.

Хотя, я не знаю, для чего вам нужен HSL.

Answer 2

Простой ответ будет: http://www.modernizr.com/. Вы можете посмотреть на исходный код и изменить его, чтобы использовать только часть о HSL.

По сути, он просто создает новый элемент, устанавливает его background-color, используя значения HSLA, а затем ищет наличие rgba или hsla в атрибутах стиля объекта.Если он присутствует, браузер поддерживает HSLA.Очень умно:

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

Обратите внимание, что для регулярного использования CSS metrobalderas ответ ниже - это путь, но для цели, которую намеревался Пол, это один из способов сделать это.

Answer 3

Если проблема заключается в том, что работать с HSL проще для генерации цветов, но вас беспокоит поддержка браузера, вы можете рассмотреть возможность работы с HSL в своей бизнес-логике, но при конвертации в RGB при применении цветов к элементам DOM.

Также см. Следующий вопрос:
Преобразование цветов HSL в RGB