encapsular css

Estoy haciendo un informe y dentro del informe tengo que enviar correos electrónicos de diferentes proveedores, estos correos electrónicos vienen con sus propios CSS (generalmente CSS en línea pero a veces aplican estilos generales). Usualmente uso iframes para encapsular css para que no rompa el mío, pero no puedo usarlo ahora.encapsular css

¿Hay alguna manera de encapsular css sin el uso de iframes?

aquí es un ejemplo del problema que estoy teniendo:

<html> 
    <head> 
    <style> 
     // I enclose it to content so it doesn't override the email css 
     #my_content table, #my_content p { 
     color: black; 
     } 
    </style> 
    </head> 
    <body> 
    <div id='my_content'> 
     ... some stuff ... 
    <div id='email'> 
     <html> 
      <head> 
      <style> 
       table { 
       margin-left: 100cm; // screws up all my tables 
       } 
       .... some styles that should only apply inside the email div ... 
      </style> 
      </head> 
      <body> 
      .... email content ... 
      </body> 
     </html> 
     </div> 
    </div> 
    </body> 
</html>

pude extraer la estructura html y acaba de obtener lo que hay en el cuerpo, pero luego no todos mis correos electrónicos a mirar como debería. ¡También el html debe ser válido para que cualquier sugerencia sea genial!

Fuente

2012-08-28 Hassek

¿Entonces no usa clases? – ChaosPandion

¡Sí! Use el atributo 'scoped'. No obstante, todavía no creo que sea compatible en ningún lado. (Bueno, puede encenderlo en Google Chrome en 'chrome:. // flags') – Ryan

hago uso de clases, Me explico mejor en la cuestión de cómo los correos electrónicos están rompiendo mi css – Hassek

Puede tratar de verificar la parte css del correo electrónico en busca de colisiones con sus propios nombres de clase. acabo de encontrar este post que podría ser útil para Usted: Listing known CSS classes using Javascript

Fuente

2012-08-28 20:15:49 Andre

Una vez hecho esto, ¿qué se supone que debe hacer? –

Ya veo. Podría intentar reemplazar esas colisiones con identificadores ligeramente modificados. Pero eso no sería tan fácil como simplemente usar css solo como hayk. mart – Andre

puede anteponer #email a sus selectores CSS, por lo que sólo se aplican a su div.

Por ejemplo, cambiar

.classname { display: block }

#email .classname { display: block }

Editar: Si no tiene ningún control sobre el CSS correo electrónico como arxanas indica, considerar el uso de LESS. Less es un preprocesador de CSS que permite anidar selectores de CSS. Si incluye less.js, a continuación, puede hacer algo como esto:

#email { 
    CSS goes here 
}

less.js va a analizar esto y convertirlo en CSS.

Fuente

2012-08-28 20:16:04

Creo que el problema es que los estilos se están cargando y él no tiene control sobre ellos. –

Gracias arxanas por la aclaración, agregué una sugerencia para este escenario o –

sí tengo ningún control sobre el css ya es parte de un correo electrónico – Hassek

Respuesta

Cuestiones relacionadas