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

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


javascript css hsl
person paullb    schedule 29.12.2010    source источник
comment
Почему бы не придерживаться RGB и не беспокоиться об этом? Вы изо всех сил пытаетесь сделать что-то, что не имеет никакого значения для пользователя.   -  person Brad    schedule 29.12.2010
comment
С HSL легче работать с точки зрения программного создания цветов (в моем случае я беру число от 1 до 5 и выбираю цвет из градиента), также мне легче визуализировать цвета при работе с HSL.   -  person paullb    schedule 31.12.2010

Ответы (3)


arrow_upward
3
arrow_downward

Простой ответ: 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 ниже - это путь, но для цели, которую намеревался Павел, это один из способов сделать это.

person devius    schedule 29.12.2010

arrow_upward
5
arrow_downward

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

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

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

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

person metrobalderas    schedule 29.12.2010
comment
Это отличный совет, но он не работает для меня, поскольку я пытаюсь использовать hsl для установки цвета полилинии в Картах Google (хотя я не упоминал об этом раньше). С HSL легче работать с точки зрения генерации цветов. - person paullb; 31.12.2010

arrow_upward
1
arrow_downward

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

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

person Sygmoral    schedule 24.06.2016