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

StackOverflow https://stackoverflow.com/questions/4555015

  •  13-10-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

Другие советы

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

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

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

Хотя я не знаю, для чего вам понадобится HSL.

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top