Quelle est la différence entre rgba (0,0,0,0) et transparent?

Dans l’ une de mes autres questions , la solution à la résolution d’un problème de rendu consistait à utiliser la valeur rgba(255, 255, 255, 255) au lieu de transparent. Nous avons testé en utilisant rgba(0, 0, 0, 0) et cela corrigeait toujours le problème, ce qui signifie que c’est la définition de transparent qui provoque l’erreur. Cependant, en regardant la spécification CSS3 du W3C (et la référence MDN ) pour la transparent constate que rgba(0, 0, 0, 0) et transparent doivent être égaux:

transparent

Entièrement transparent Ce mot-clé peut être considéré comme un raccourci pour le noir transparent, rgba (0,0,0,0), qui est sa valeur calculée.

Alors qu’est-ce que ça donne? Pourquoi deux valeurs apparemment identiques peuvent-elles produire des résultats différents? J’ai examiné le formatage de RGBA et j’ai cherché des questions similaires (en vain). Chaque question / réponse qui mentionne la conversion de transparent à rgba(0,0,0,0) toujours les mots «devrait» ou «selon» dans (par exemple ici ). Quelle est la différence réelle et pourquoi change-t-elle tellement la production?

NB: Cela se produit dans la plupart, sinon toutes les versions d’Internet Explorer. Nous soaps également que cela se produit dans certaines versions de Firefox. Cependant, Chrome et Safari n’affichent pas ce comportement, ce qui nous amène à penser qu’il existe une sorte de correctif pour cela dans -webkit .


Pour pouvoir le soumettre en tant que bogue, nous devons reproduire le problème en utilisant la quantité minimale de code. Donc, transféré de mon autre question, voici une comparaison de l’utilisation de transparent vs rgba(0,0,0,0) , et ce qui se passe lorsque nous utilisons les deux.

Transparent

 @keyframes spin{ 0% {transform:rotateZ(0deg);} 50% {transform:rotateZ(360deg);border-radius:60%;} 100%{transform:rotateZ(720deg);} } .spinme{ display:inline-block; position:relative; left:0; top:0; margin:0.2rem; width:0.8rem; height:0.8rem; border:0.2rem solid black; border-radius:0%; outline: 1px solid transparent; transform:rotateZ(0deg); animation: spin infinite 4s; } 
 

RGBA (0,0,0,0)

 @keyframes spin{ 0% {transform:rotateZ(0deg);} 50% {transform:rotateZ(360deg);border-radius:60%;} 100%{transform:rotateZ(720deg);} } .spinme{ display:inline-block; position:relative; left:0; top:0; margin:0.2rem; width:0.8rem; height:0.8rem; border:0.2rem solid black; border-radius:0%; outline: 1px solid rgba(0,0,0,0); transform:rotateZ(0deg); animation: spin infinite 4s; } 
 

Tous les deux

Comme l’a souligné @andyb, il existe un comportement étrange lors de l’utilisation des deux éléments séparés. Vous vous attendez à ce qu’un seul oscille, quel que soit leur comportement. Comme démontré:

 @keyframes spin{ 0% {transform:rotateZ(0deg);} 50% {transform:rotateZ(360deg);border-radius:60%;} 100%{transform:rotateZ(720deg);} } .spinme{ display:inline-block; position:relative; left:0; top:0; margin:0.2rem; width:0.8rem; height:0.8rem; border:0.2rem solid black; border-radius:0%; outline: 1px solid rgba(0,0,0,0); transform:rotateZ(0deg); animation: spin infinite 4s; } .spinme:nth-of-type(2){ outline: 1px solid transparent; } 
 


Pour ceux qui ne peuvent pas tester cela dans Internet Explorer, voici un fichier .gif animé du problème:

Comparaison dans un fichier .gif animé

C’est avec transparent à gauche, rgba au milieu et les deux à droite.


Comme l’a souligné @Abhitalks, j’ai mal interprété la référence, mais je laisserai ci-dessous la question pour montrer que nous avons déjà envisagé cette possibilité, ou au cas où quelque chose aurait été oublié ou oublié.

Grâce à la réponse de @ juan-cv, j’ai décidé d’essayer de créer un test pour trouver la valeur calculée pour transparent dans chaque navigateur et j’ai proposé les éléments suivants:

 $('p').text($('p').css("background-color")); 
 p{background-color:transparent;} 
  

Si vous affichez ceci dans Chrome / Safari, alors vous verrez probablement (commentaire si vous ne le faites pas) rgba(0,0,0,0) . Cependant, dans IE, vous verrez probablement toujours transparent . Je lisais la référence MSDN et j’ai constaté que:

Le mot clé transparent n’est pas pris en charge.

Ce qui explique pourquoi les navigateurs affichent des résultats différents. Cependant, cela n’explique pas où leur version de transparent est réellement définie. J’ai parcouru les anciennes spécifications CSS1 et CSS2 w3c et je n’ai pas trouvé d’ancienne définition. Que signifie transparent ?

    rgba () est une fonction qui calcule la couleur et la transparence d’un élément, elle est très utile lorsque vous souhaitez contrôler la couleur et l’alpha d’un élément, surtout si vous ne voulez pas être totalement transparent. En tant que fonction, vous dites au navigateur quelle couleur et quelle transparence vous voulez dessiner, ceci est plus proche de JS que de CSS.

    D’autre part, “transparent” est une propriété CSS qui identifie un élément qui sera complètement transparent, sans faire de calculs de couleur et d’alpha. En tant que propriété CSS et non comme une fonction, chaque navigateur l’applique différemment, de sorte qu’il diffère beaucoup de la méthode utilisée par le navigateur pour appliquer cette propriété.

    EDIT Ok, vous dites que je contredit cela dans ma réponse:

    transparent

    Entièrement transparent Ce mot-clé peut être considéré comme un raccourci pour le noir transparent, rgba (0,0,0,0), qui est sa valeur calculée.

    Eh bien, je ne contredis pas cela. Une chose est la spécification du standard W3C, et une autre chose est l’implémentation de ce standard par les développeurs de navigateurs différents. Je ne vais pas casser le code d’IE pour prouver ce que je dis, parce que c’est un peu illégal, demander directement aux gars de Microsoft de voir leur réponse.

    Ce que je vous ai dit, c’est que ce sont des navigateurs qui ne gèrent pas les transparents et les rgba (0, 0, 0, 0) de la même manière. C’est parce que la propriété transparent est beaucoup plus ancienne que la fonction rgba (0, 0, 0, 0) (vous aimez ça plus que rgba ()?) , Et très probablement, tandis que pour IE avez développé une méthode efficace pour rgba (r, g, b, a), ils utilisent toujours l’ancienne méthode avec la propriété transparent.

    Une chose que vous devez toujours garder à l’esprit est qu’aucun navigateur Web ne répond aux normes W3C à 100% , c’est pourquoi dans la plupart des nouvelles propriétés il faut append l’extension spécifique du fabricant (moz-webkit-, etc.)

    Pensez pourquoi il est si absurde d’écrire la même chose quatre fois, alors que tout serait résolu en utilisant la propriété standard, et que vous répondriez vous-même parce qu’il n’est pas pareil d’utiliser transparent et rgba (0, 0, 0, 0) dans IE .

    J’ai essayé votre code pour la valeur transparent dans Chrome, installé sur un ordinateur portable exécutant Windows 7 OS.

    Je ne reçois aucune oscillation que ce soit. Je pense donc que ce problème est spécifique à certains navigateurs et systèmes d’exploitation en fonction de la manière dont ce navigateur et ce système d’exploitation spécifiques décident de rendre votre élément.

    Ce problème peut être lié au fait que votre navigateur utilise ou non l’accélération matérielle. Maintenant, il existe une astuce pour forcer votre navigateur à utiliser l’accélération matérielle: faites penser à votre navigateur qu’une transformation 3D est appliquée à un élément.

    Vous pouvez le faire en ajoutant les propriétés suivantes à votre élément:

     .fake3Dtransformation { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */ } 

    Bien que je ne sois pas tout à fait sûr que cela résoudra le problème lors de l’utilisation de transparent (car je ne suis pas en mesure de reproduire le problème), appliquer ce “hack” devrait en théorie vous donner le rendu le plus fluide. Découvrez par exemple. cet article pour plus d’informations.

    Donc, pour votre code de démonstration, vous vous retrouveriez avec ceci:

     @keyframes spin{ 0% {transform:rotateZ(0deg);} 50% {transform:rotateZ(360deg);border-radius:60%;} 100%{transform:rotateZ(720deg);} } #spinme{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); display:inline-block; position:relative; left:0; top:0; margin:0.2rem; width:0.8rem; height:0.8rem; border:0.2rem solid black; border-radius:0%; outline: 1px solid rgba(0,0,0,0); animation: spin infinite 4s; } #spinme:nth-of-type(2){ outline: 1px solid transparent; } 
     

    À mon avis, il n’est pas bon d’utiliser le même identifiant deux fois, quoi que vous fassiez, cela signifie un identifiant. Je ne trouve pas non plus bizarre qu’ils montrent tous les deux l’animation, car ils ont tous deux le même identifiant qui correspond à l’ animation du css.

     #spinme{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); display:inline-block; position:relative; left:0; top:0; margin:0.2rem; width:0.8rem; height:0.8rem; border:0.2rem solid black; border-radius:0%; outline: 1px solid rgba(0,0,0,0); transform:rotateZ(0deg); } #spinme:nth-of-type(1){ animation: spin infinite 4s; } 

    Si vous faites cela, un seul vacille, et cela me semble parfaitement logique. Peut-être que cela ne répond pas à votre question sur la question de la transparent , mais je ne suis pas certain que ce soit vraiment le problème.

    edit Quelle que soit la couleur que j’essaie, transparent ou rgba(0,0,0,0) dans n’importe quelle combinaison, ils s’animent tous les deux sur Safari.