La consulta de medios CSS es ignorada por los motores de Chrome.
Tengo una hoja de estilo que es esencialmente la siguiente:
.mainwindow {
.popup {
background: black;
}
}
@media screen and (max-width: 640px){
.mainwindow {
.popup {
background: red;
}
}
}
Funciona perfectamente en Firefox, IE y Edge, pero no en Chrome, Brave o Electron.
Sí, he intentado borrar la caché del navegador. No ayudó.
Para añadir al misterio, en Electron el fondo rojo parpadea durante un instante al iniciar, y luego se vuelve negro.
davy.ai
Posible solución para el problema del stylesheet en Chrome, Brave y Electron:
Una posible razón por la cual el stylesheet funciona en Firefox, IE y Edge, pero no en Chrome, Brave y Electron se debe a la forma en que estos navegadores gestionan los selectores anidados de CSS con sintaxis Sass. Si bien Firefox, IE y Edge admiten los selectores anidados con sintaxis Sass, Chrome, Brave y Electron pueden tener algunas limitaciones o errores que impiden que se apliquen los estilos.
Para solucionar esto, puedes intentar seguir los siguientes pasos:
Por ejemplo, en lugar de escribir:
Escribe:
Esto debería funcionar en todos los navegadores, incluyendo Chrome, Brave y Electron.
Asegúrate de que no haya otros estilos que entren en conflicto o anulen los estilos que deseas aplicar. Puedes usar las herramientas de desarrollo del navegador para inspeccionar los estilos y ver si hay algún estilo tachado o anulado que pueda estar afectando tu diseño.
Si tienes otros estilos que son más específicos que tus selectores actuales, pueden anular los estilos que deseas aplicar. En ese caso, puedes intentar aumentar la especificidad de tus selectores añadiendo más nombres de clase, IDs o pseudo-clases.
Por ejemplo, en lugar de escribir:
Escribe:
Esto debería dar a tus selectores una mayor especificidad y priorizarlos por encima de otros estilos.
Si sospechas que el problema puede deberse a un error o limitación en una versión específica del navegador o la biblioteca, puedes probar con diferentes versiones para ver si el problema persiste. Por ejemplo, puedes probar con Chrome Canary o la última versión de Sass.
Si ninguno de los pasos anteriores funciona, puedes informar del problema a los proveedores de los navegadores o buscar ayuda en los foros o rastreadores de problemas de la comunidad. Asegúrate de proporcionar una descripción detallada del problema, tu código y tu entorno (por ejemplo, sistema operativo, versión del navegador, etc.).