Compatibilité des codes couleurs Web non transparentes avec les navigateurs.

Le format de code couleur Web Hexadécimal pour les propriétés CSS ou les attributs HTML est reconnu par tous les navigateurs. Certaines couleurs Web Hexadécimal sont associée à un nom qui correspnd au format de code couleur Nommé. Je vous conseille de ne pas utiliser le format de code couleur Nommé car certains noms sont plus ou moins récents, c'est le cas de la couleur prédéfinie "rebeccapurple" qui est apparue dans le brouillon des spécifiCcations CSS4 en 2017.

Si le code couleur Web RGB ou HSL n'est pas reconnu par le navigateur alors, votre couleur ne sera pas interprétée. Vous risquez de vous retrouver dans des situations embarassantes si vous mélanger les codes couleurs Web. L'exemple ci-dessous pause problème sous le navigateur Internet Explorer < 9+. Le fond est blanc par défaut car le format couleur HSL n'est pas interprété et le texte sera aussi blanc. color : #fff;
background-color : hsl(199,59%,47%);

Le code couleur Web RGB (Red, Green, Blue) introduit en CSS2

Le format couleur RGB est compatible avec le navigateur Chrome 1+
Chrome 1+
Le format couleur RGB est compatible avec le navigateur FireFox 1+
FireFox 1+
Le format couleur RGB est compatible avec le navigateur Safari 1+
Safari 1+
Le format couleur RGB est compatible avec le navigateur Internet Explorer 4+
Internet Explorer 4+
Le format couleur RGB est compatible avec le navigateur Opera 3.5+
Opera 3.5+

Le code couleur Web HSL (Hue, Saturation, Lightness) introduit en CSS3

Le format couleur HSL est compatible avec le navigateur Chrome 1+
Chrome 1+
Le format couleur HSL est compatible avec le navigateur FireFox 1+
FireFox 1+
Le format couleur HSL est compatible avec le navigateur Safari 3.1+
Safari 3.1+
Le format couleur HSL est compatible avec le navigateur Internet Explorer 9+
Internet Explorer 9+
Le format couleur HSL est compatible avec le navigateur Opera 9.5+
Opera 9.5+

Compatibilité des couleurs Web transparentes avec les navigateurs.

Le format de code couleur Nommée avec transparence n'existe pas pour le web.
(*)Dans les futurs spécifications CSS4, le format de code couleur Hexadécimal acceptera en fin de code un alpha background-color : #00ffff77;. A ce jour (10/2016), aucun navigateur ne le reconnait.
Pour information, Internet Explorer utilise le format de code couleur Hexadécimal avec un alpha mais au début pour la propriété Css propriétaire Filter.

filter: progid:DXImageTransform.Microsoft.gradient(
 startColorstr='#69f1e767', endColorstr='#feb645', GradientType=0
);

Si le format de code couleur avec transparence RGBA ou HSLA n'est pas reconnu par le navigateur alors, votre couleur ne sera pas interprétée.
En règle générale, on fait précéder la couleur avec Alpha par une couleur non Alpha. background-color : #3191be;
background-color : hsl(199,59%,47%,0.25);

Le code couleur Web avec transparence RGBA (Red, Green, Blue, Alpha) introduit en CSS3

Le format couleur RGBA est compatible avec le navigateur Chrome 1+
Chrome 1+
Le format couleur RGBA est compatible avec le navigateur FireFox 3+
FireFox 3+
Le format couleur RGBA est compatible avec le navigateur Safari 3.1+
Safari 3.1+
Le format couleur RGBA est compatible avec le navigateur Internet Explorer 9+
Internet Explorer 9+
Le format couleur RGBA est compatible avec le navigateur Opera 10+
Opera 10+

Le code couleur Web avec transparence HSLA (Hue, Saturation, Lightness, Alpha) introduit en CSS3

Le format couleur HSLA est compatible avec le navigateur Chrome 1+
Chrome 1+
Le format couleur HSLA est compatible avec le navigateur FireFox 3+
FireFox 3+
Le format couleur HSLA est compatible avec le navigateur Safari 3.1+
Safari 3.1+
Le format couleur HSLA est compatible avec le navigateur Internet Explorer 9+
Internet Explorer 9+
Le format couleur HSLA est compatible avec le navigateur Opera 10+
Opera 10+

Compatibilité des codes couleur Web avec les navigateurs en Javascript

Voici un script Javascript qui va vous permettre de savoir si les différents formats de codes couleurs Web sont reconnus par le navigateur.
supportColor est un Object qui contient les propriétés suivantes :
- rgb qui a une valeur true si le format de couleur Web est reconnu, false si le format de couleur Web n'est pas reconnu.
- rgba qui a une valeur true si le format de couleur Web est reconnu, false si le format de couleur Web n'est pas reconnu.
- hsl qui a une valeur true si le format de couleur Web est reconnu, false si le format de couleur Web n'est pas reconnu.
- hsla qui a une valeur true si le format de couleur Web est reconnu, false si le format de couleur Web n'est pas reconnu.
- hexaa qui a une valeur true si le format de couleur Web est reconnu, false si le format de couleur Web n'est pas reconnu.

var supportColor = (function(){ var obj = document.createElement('span'); var s = { rgb:false, rgba:false, hsl:false, hsla:false, hexaa:false }; try { obj.style.backgroundColor = 'hsl(1,1%,1%)'; s.hsl = obj.style.backgroundColor != ''; } catch(err){} obj.style.backgroundColor = ''; try { obj.style.backgroundColor = 'hsla(1,1%,1%,0.1)'; s.hsla = obj.style.backgroundColor != ''; } catch(err){} obj.style.backgroundColor = ''; try { obj.style.backgroundColor = 'rgb(1,1,1)'; s.rgb = obj.style.backgroundColor != ''; }catch(err){} obj.style.backgroundColor = ''; try { obj.style.backgroundColor = 'rgba(1,1,1,0.1)'; s.rgba = obj.style.backgroundColor != ''; } catch(err){} obj.style.backgroundColor = ''; try { obj.style.backgroundColor = '#ff000010'; s.hexaa = obj.style.backgroundColor != ''; } catch(err){ } obj.style.backgroundColor = ''; obj = null; return s ; })();

Votre navigateur

supporte le RGB : oui
supporte le RGBA : oui
supporte le HSL : oui
supporte le HSLA : oui
supporte le #RGBA : oui

Avis sur l'article

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Votes: 0.0 / 5 - 0 vote
Cliquez sur une étoile pour voter.