Hola, Al importar código HTML con consultas @media anidadas, las reglas no se mapean correctamente en la variable styles. Esto provoca que los estilos se rompan en el html de resultados, porque simplemente faltan algunas partes del CSS. Para probar importé esta plantilla: Para importar la plantilla seguí estos pasos:Haz clic en el icono de la papelera para eliminar la plantilla actualEjecutar 'editor.setStyle("")' para asegurarse de que los estilos estén vacíosImportar la plantilla mencionada P...

Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.

💬 Answered: Estilos incompletos tras la importación…

Pregunta

Hola,

Al importar código HTML con consultas @media anidadas, las reglas no se mapean correctamente en la variable styles. Esto provoca que los estilos se rompan en el html de resultados, porque simplemente faltan algunas partes del CSS.

Para probar importé esta plantilla:

<html>
    <head>
        <style type="text/css">
            @media (ancho máximo: 1000px) {
                @media única pantalla {	 
                    .makeBold {
                        Peso-fuente: negrita;
                    }
                }
                @media solo imprimir {	 
                    .makeBold {
                         color: rojo;
                    }
                }
            }
        </style>
    </head>
    <body>
        <p class="makeBold">test</p>
        <p>Prueba</p>
    </body>
</html>

Para importar la plantilla seguí estos pasos:

Haz clic en el icono de la papelera para eliminar la plantilla actual
Ejecutar 'editor.setStyle("")' para asegurarse de que los estilos estén vacíos
Importar la plantilla mencionada

Por alguna razón, la salida de los estilos almacenados difiere entre la Demo de la Página Web y la Demo del Boletín:

Salida de 'editor.store()["estilos"]' en Webpage Demo v0.14.43 (https://grapesjs.com/demo.html):

[  
   {  
      "selectores":[  

],
      "selectorsAdd":"",
      "estilo":{  
         "indefinido":"indefinido"
      },
      "mediaText":"(ancho máximo: 1000px)",
      "state":"",
      "estilizado":Cierto,
      "atRuleType":"media",
      "singleAtRule":0,
      "importante":0
   }
]

Resultados de 'editor.store()["estilos"]' en Newsletter Demo v0.14.43 (https://grapesjs.com/demo-newsletter-editor.html):

[  
   {  
      "selectores":[  
         {  
            "nombre":"makeBold",
            "sello":"makeBold",
            "tipo":1,
            "activo": cierto,
            "privado":falso,
            "protegido":falso
         }
      ],
      "selectorsAdd":"",
      "estilo":{  
         "pw-fuente":"negrita",
         "color":"rojo"
      },
      "mediaText":"(ancho máximo: 1000px)",
      "state":"",
      "estilizado":Cierto,
      "atRuleType":"media",
      "singleAtRule":0,
      "importante":0
   }
]

En la webpage-demo el problema es que los estilos han desaparecido por completo. En el caso del Boletín-Demo, se pierde la @media-consulta interna.

Estilos incompletos tras la importación con estilos @media anidados

Pregunta

Respuestas (2)

Preguntas y respuestas relacionadas

[Bug]: Los estilos siempre se aplicaban a las clases

[BUG] Las reglas de consulta de medios son anuladas por las reglas de clase en el lienzo

[PREGUNTA] Modales se abren una vez

Cómo añadir !important en todas las APIs generadas

Plugins de pago que cumplen con este problema

Tutoriales relacionados

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Explorar categorías de plugins