css - codes - rgba colores

¿Cuál es la diferencia entre rgba(0,0,0,0) y transparente?

Question

En una de mis otras preguntas , la solución para solucionar un problema de representación fue usar el valor rgba(255, 255, 255, 255) lugar de transparent. Probamos usando rgba(0, 0, 0, 0) y esto todavía corrigió el problema, lo que significa que es la definición de transparent que causa el error. Sin embargo, mirar la especificación CSS3 del W3C (y la referencia MDN ) para transparent revela que rgba(0, 0, 0, 0) y transparent deberían ser iguales:

transparente

Totalmente transparente Esta palabra clave puede considerarse una abreviatura de negro transparente, rgba (0,0,0,0), que es su valor calculado.

Entonces, ¿qué da? ¿Por qué dos valores aparentemente idénticos pueden producir resultados diferentes? Investigué el formato de RGBA y busqué preguntas similares (sin resultado). Cada pregunta / respuesta que menciona la conversión de transparent a rgba(0,0,0,0) siempre tiene las palabras ''debería'' o ''según'' en (por ejemplo here ). ¿Cuál es la diferencia real y por qué cambia tanto la salida?

Nota: esto ocurre en la mayoría de las versiones de Internet Explorer, si no en todas. También sabemos que ocurre en algunas versiones de Firefox. Sin embargo, Chrome y Safari no muestran este comportamiento, lo que nos lleva a creer que hay algún tipo de parche para este en -webkit .

Para poder enviar esto como un error, necesitamos reproducir el problema usando la mínima cantidad de código. Entonces, transferido de mi otra pregunta, aquí hay una comparación del uso de transparent contra rgba(0,0,0,0) , y lo que sucede cuando usamos ambos.

Transparente

@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;
}

<div class="spinme"></div>

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

<div class="spinme"></div>

Ambos

Como señaló @andyb, existe un comportamiento extraño cuando se usan ambos en elementos separados. Es de esperar que solo uno se tambalee, pero ambos lo hacen. Como se demostró:

@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;
}

<div class="spinme"></div>
<div class="spinme"></div>

Para aquellos que no pueden probar esto en Internet Explorer, aquí hay un .gif animado del problema:

Esto es con transparent a la izquierda, rgba en el medio y ambos a la derecha.

Como señaló @Abhitalks, leí mal la referencia, sin embargo, dejaré lo siguiente en la pregunta para mostrar que ya hemos considerado esta posibilidad, o en caso de que algo se haya pasado por alto / pasado por alto.

Gracias a la respuesta de @ juan-cv, decidí intentar crear una prueba para encontrar el valor calculado para transparent en cada navegador, y se me ocurrió lo siguiente:

$(''p'').text($(''p'').css("background-color"));

p{background-color:transparent;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>

Si está viendo esto en Chrome / Safari, lo más probable es que vea (comente si no lo hace) rgba(0,0,0,0) . Sin embargo, en IE, probablemente todavía verá transparent . Estaba leyendo la referencia de MSDN y descubrí que:

La palabra clave transparente no es compatible.

Lo que explica por qué los navegadores muestran resultados diferentes. Sin embargo, no explica en ninguna parte cómo se define realmente su versión de transparent . Miré a través de las antiguas especificaciones CSS1 y CSS2 w3c y no pude encontrar una definición antigua. ¿Qué significa transparent ?

Answer 1

En mi opinión, no es bueno usar la misma identificación dos veces, lo que sea que esté haciendo, se entiende como un identificador. Tampoco me parece extraño que ambos muestren la animación, ya que ambos tienen la misma identificación que coincide con la animation en el 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 haces esto, solo uno se tambalea, y tiene mucho sentido para mí. Tal vez no responda a su pregunta sobre el problema transparent , pero no estoy seguro de si ese es realmente el problema de todos modos.

editar No importa qué color intente, transparent o rgba(0,0,0,0) en cualquier combinación que ambos animen en Safari.

Answer 2

He estado probando su código para el valor transparent en Chrome, instalado en una computadora portátil con sistema operativo Windows 7.

No me estoy tambaleando en absoluto. Así que espero que este problema sea específico para ciertos navegadores y sistemas operativos en función de cómo ese navegador y sistema operativo específicos decidan representar su elemento.

Este problema podría estar relacionado con si su navegador usa o no aceleración de hardware. Ahora, hay un truco para obligar a su navegador a usar la aceleración de hardware: haga que su navegador piense que se está aplicando una transformación 3D a un elemento.

Puede hacerlo agregando las siguientes propiedades a su elemento:

.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 */
}

Si bien no estoy completamente seguro de si esto solucionará el problema de bamboleo cuando se usa transparent (ya que no puedo reproducir el problema), la aplicación de este "truco" debería, en teoría, siempre brindarle la representación más fluida. Echa un vistazo, por ejemplo. Este artículo para más información.

Entonces, para su código de demostración, terminaría con esto:

@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;
}

<div id="spinme"></div>
<div id="spinme"></div>

El violín:

https://jsfiddle.net/z2r7ypy7/4/

Answer 3

rgba () es una función que calcula el color y la transparencia de un elemento, es muy útil cuando desea controlar el color y el alfa de un elemento, especialmente si no desea ser totalmente transparente. Al ser una función, le está diciendo al navegador qué color y transparencia quiere exactamente dibujar el elemento, esto está más cerca de JS que de CSS.

Por otro lado, "transparente" es una propiedad CSS que identifica que un elemento será completamente transparente, sin hacer cálculos de color y alfa. Al ser una propiedad CSS y no una función, cada navegador la aplica de una manera diferente, por lo que sería muy diferente al método utilizado por el navegador para aplicar esta propiedad.

EDITAR Ok, dices que contradigo eso en mi respuesta:

transparente

Totalmente transparente Esta palabra clave puede considerarse una abreviatura de negro transparente, rgba (0,0,0,0), que es su valor calculado.

Bueno, no lo contradigo. Una cosa es la especificación del estándar W3C, y otra cosa es la implementación de ese estándar por parte de los desarrolladores de diferentes navegadores. No romperé el código de IE para probar lo que estoy diciendo, porque es un poco ilegal, pídales directamente a los chicos de Microsoft que vean su respuesta.

Lo que te he dicho es que son navegadores que no manejan transparentes y rgba (0, 0, 0, 0) de la misma manera. Esto se debe a que la propiedad transparente es mucho más antigua que la función rgba (0, 0, 0, 0) (¿le gusta más que rgba ()?) , Y lo más probable es que, para IE, haya desarrollado un método eficaz para rgba (r, g, b, a), todavía están usando el método anterior con la propiedad transparente.

Una cosa que siempre debe tener en cuenta es que ningún navegador web cumple con los estándares W3C al 100% , es por eso que en la mayoría de las nuevas propiedades se debe agregar la extensión específica del fabricante (moz- webkit-, etc.)

Piensa por qué es tan absurdo escribir lo mismo cuatro veces, cuando todo se resolvería usando la propiedad estándar, y tú mismo responderás porque no es lo mismo usar transparente y rgba (0, 0, 0, 0) en IE .