Как я могу проверить, поддерживает ли мой браузер цвета HSL в JavaScript?
-
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 преобразование цвета