inspector de elementos web (safari/cromo) propiedades de css atenuadas

Question

Inspector de elemento web tonto (safari/cromo) pregunta, pero no puedo entender por qué algunas propiedades están atenuadas.

Answer 1

Según fuente inspector Webkit aplicar 50% de opacidad a los estilos CSS que son "heredadas" o "implícito", desde inspector.css

.styles-section .properties .implicit, .styles-section .properties .inherited { 
    opacity: 0.5; 
} 

• implícitos son la que están bajo una propiedad de material compuesto como border: 1px solid redcolor: red será más gris
• Heredar son los que tienen el valor "heredar" explícito.

Ahora la versión actual de cromo parece de color gris algunos otros valores, es una pena que el inspector del inspector ya no funciona :(

Answer 2

Después de mirarlo en el enlace que ya ha proporcionado, los (atenuado) los descoloridos son las reglas de estilo que no tienen ninguna operación navegador vinculados a ellos, por ejemplo:

Haga clic en el pequeña flecha al lado de background: obtienes una lista de reglas que Chrome usa para interpretar tu CSS.

En float y height, solo hay una forma de interpretarla, por lo que Chrome no necesita agregar estilos específicos del navegador para que se muestre como se esperaba.

Esperanza que ayuda a explicarlo :)

reglas Faded son normas que no necesitan ninguna atención especial por parte del navegador :)

Answer 3

Sólo una conjetura - pero ¿verificó si no es solo una manera de distinguir fácilmente los estilos computados?

Answer 4

Para mí era sólo un problema de mezcla charset.

El archivo HTML en sí y uno de los archivos CSS se codificaron como UTF-8 con BOM, mientras que el otro archivo CSS se codificó como ANSI. Todavía no puedo entender cómo Chrome logró mostrar casi todo bien. Cambié todos los archivos a UTF-8 sin BOM y el problema fue resuelto. Gracias al validador W3C que me insinuó la presencia de la BOM.

Espero que esto ayude al menos a alguien más.

Answer 5

¿También se está "interpretando como imagen pero se transfirió con mime type text/css"? Yo estaba.

Esto resolvió que: Chrome interprets CSS Stylesheet as image

Básicamente, si el archivo CSS tiene 'background: url()' o 'background: url ("")' en ella, simplemente comentar a cabo o eliminarlas (o ya sabes, solo ingrese un camino allí) La página debería cargarse con los estilos css en el inspector Chrome de nuevo como activos.