Insert Html into Html without changing Styles

Asked

Viewed 442 times

1

I am capturing emails to be shown on screen, in html.

But my page has some styles already applied, so I include html extracted from the email body.

The styles present in this html change the one on my page.

Is there any way to prevent "imported" styles from changing my page or "isolating" the html styles that come from the email body exclusively for a div ?

In the example below, you can notice that html comes with numerous styles. And it is exactly these that alter all my original page style. 

<style>
   *{ font-family: "Times New Roman", Times, serif; }
</style>

<div id="de" class="campo_email">
    <b>De</b>: [email protected]
</div>

<div id="para" class="campo_email">
    <b>Para</b>: [email protected]
</div>

<div id="data_envio" class="campo_email">
    <b>Data</b>: 2000-01-01 00:00:00
</div>

<div id="assunto" class="campo_email">
    <b>Assunto</b>: teste
</div>

<div id="assunto" class="campo_email">
    <b>Mensagem</b>: 
    <div id="mensagem">

       <!-- AQUI VAI O HTML DO CORPO DO EMAIL -->
       <!-- POR EXEMPLO O ABAIXO -->
       <!DOCTYPE html>
       <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
       <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="x-apple-disable-message-reformatting">
         <title>Parab&eacute;ns! capSAT Rastreamento 24h</title>

        <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,700,700i,800,800i" rel="stylesheet">

       </head>

       <body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222; font-family: 'Poppins', sans-serif;">
            <center style="width: 100%; background-color: #f1f1f1;">


    </div>
</div>
html css

  • Why not just capture the data you need?

  • Why I can’t predict answers. Each answer will have a format.

1 answer

2


You can import the email as a iframe in HTML, this would maintain the CSS of iframe insolado of yours. Or else you can put !important in all styles of your HTML where you will receive the external content of the email, like creating a stronger class hierarchy in your document overwriting what comes externally, this can work if the CSS coming from the email is not written inline directly in the element tag itself...

Or there is a technique still experimental, does not work in all browser that is the CSS Contain (She’s like the old Scoped CSS)

The estate contain allows an author to indicate which element and its contents are, as far as possible, independent of the rest of the document tree. This allows the browser to recalculate the layout, style, paint, size or any combination of them to a limited DOM area and not the full page.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/contain

Your code would look like this:

.container {
    contain: strict; /* Indica que todas as regras de contenção são aplicadas ao elemento.  */
}

<div class="container">
    <!-- conteúdo vindo do email -->
</div>

But the support is very limited...

https://caniuse.com/#feat=css-containment

inserir a descrição da imagem aqui

  • Contain is not working or at prayer cost. The Strict adds up with all the contents of the div, the others make no difference at all.

  • Can you tell me how to put html in iframe ? Since it comes in BD direct text

  • @Pedroaugusto pity that it didn’t work there, but as I said is something still in Working Draft, is not fully implemented by browsers. Dude, you gotta see the way you’re injecting that code into the page. Theoretically you would have to take what’s in the database, create a separate.HTML file and create an iframe in your document that will load the . HTML you created with what was in the bank. Unfortunately I have no knowledge to help you with this routine.

  • Sometimes you can help with something https://answall.com/questions/352318/para-que-serve-e-como-usar-o-display-contents-do-css

  • 1

    Iframe for the time being was the solution, I continue the research maybe there is something better

  • @Pedroaugusto may appear another solution, let’s see if someone put something, a feather the contain have not worked, I myself have never seen any application using it rss. Success ai [] s

Show 1 more comment

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.