Comment puis-je vérifier si mon navigateur supporte les couleurs HSL en Javascript?

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

  •  13-10-2019
  •  | 
  •  

Question

Je veux être en mesure de déterminer si un support navigateur couleurs HSL, sinon je veux tomber en arrière sur les couleurs RVB générées (i ont tous deux généré). Est-il possible de le faire sans vérifier réellement ce navigateur l'utilisateur utilise?

Était-ce utile?

La solution

La réponse facile serait: http://www.modernizr.com/ . Vous pouvez consulter le code source et le modifier pour utiliser uniquement la partie sur HSL.

Fondamentalement, il crée juste un nouvel élément, définit sa background-color en utilisant des valeurs HSLA et recherche alors la présence de rgba ou hsla dans les attributs de style de l'objet. Le cas échéant, le navigateur prend en charge HSLA. Très intelligent: 

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

Notez que pour une utilisation régulière CSS réponse metrobalderas ci-dessous est la voie à suivre, mais dans le but que paulb prévu, cette est une façon de le faire.

Autres conseils

est agréable Detecting, mais en ajoutant une solution de repli est encore mieux: 

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

Tout d'abord, vous définissez les solutions de repli, la propriété que les navigateurs surtout comprendre, et vous définissez la nouvelle propriété. Si celui-ci est pas pris en charge, il ne sera pas remplacer le précédent.

Bien que, je ne sais pas ce que vous auriez besoin pour HSL.

Si le problème est que le travail avec HSL est plus facile de générer des couleurs, mais vous êtes inquiet au sujet du soutien du navigateur, vous pouvez envisager de travailler avec HSL dans votre logique métier, mais la conversion en RVB lors de l'application des couleurs aux éléments DOM.

Voir aussi la question suivante:
HSL à la conversion des couleurs RVB

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top