Issue #2562💬 RespondidoAbierto el 11 de febrero de 2020por WebEtSolutionsReacciones 0

Gjs-css-rules ordenación inválida

Respuesta rápidapor WebEtSolutions

¡Lo siento! Así que cuando el atributo mediaCondition está en el ancho mínimo en la configuración del editor, necesitamos ordenar gjs-css-rules en el renderizado para obtener el buen orden en el editor CssRulesView.js -> después de la línea 126 -> prs.sort() si es móvil primero Gracias Adiós Flo.

Lee la respuesta completa abajo ↓

Pregunta

Hola,

En la última versión 0.15.10, tenemos un problema con el generador de CSS. Los dispositivos están configurados de la siguiente manera: '''javascript mediaCondition: 'max-width', deviceManager: { Dispositivos: [ { Nombre: 'Pequeño', Ancho: '40em', }, { Nombre: 'Medium', Ancho: '64em', }, { Nombre: 'Grande', } ] },


Cuando añado una regla como el color de fondo, en el CSS real tengo
'''html
<style>
@media (ancho máximo: 40em)
.id-USR-ix0a {
    Color de fondo: #ff0000;
}

@media (ancho máximo: 64em)
.id-USR-ix0a {
    Color de fondo: #828282;
}

.id-USR-ix0a {
    color de fondo: #000000;
}
</style>

Este orden es perfecto. Pero en el estilo javascript (para editor) sí

'''html

<div id="gjs-css-rules"></div> <div id="gjs-css-rules-40"></div> <div id="gjs-css-rules-64"></div> ``` Así que mi resultado CSS en editor es '''html <style> @media (ancho máximo: 64em) .id-USR-ix0a { Color de fondo: #828282; }

@media (ancho máximo: 40em) .id-USR-ix0a { Color de fondo: #ff0000; }

.id-USR-ix0a { color de fondo: #000000; } </style>

Y el estilo por debajo de 40 es el 64em...

¿Tienes alguna idea de la corrección?

¡Muchas gracias!

Flo.

Respuestas (2)

WebEtSolutions11 de febrero de 2020

¡Lo siento!

Así que cuando el atributo mediaCondition está en el ancho mínimo en la configuración del editor, necesitamos ordenar gjs-css-rules en el renderizado para obtener el buen orden en el editor

CssRulesView.js -> después de la línea 126 -> prs.sort() si es móvil primero

Gracias Adiós Flo.

artf14 de febrero de 2020

Puedes usar la propiedad 'priority' en la definición de tu dispositivo

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.