I am building a mass mailer system where you can see a preview of the email before it is sent. I render the email html into a preview box using jquery -- $().html(theHtml).
Html emails use all inline css for their styles. When I fill the html, it overrides some of my css.
I am looking for a solution to completely stop this from happening. Is there any way to self contain the email html/css so it does not affect the entire document?
I understand that adding !important to my styles will do the trick, but it is not a very scalable option.
Thanks in advance.
Unfortunately !important is the only way to override an inline style - that's just how specificity works.
However you might be able to get around it by making all of the "wrapper" CSS (e.g. the CSS for YOUR page, not the HTML email preview) more specific by using IDs and classes etc so that their styles don't get overridden by generic style declarations embedded in the HTML email.
I'm a little confused though - are you trying to override "inline" styles (as in elements with the style="your css here" attribute) or embedded CSS (e.g. "your css here")? If it's the latter, just make important stuff more specific in your own CSS.
Some more info about specificity: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Using an iframe as Sander suggested might be a simpler solution than trying to restructure your CSS specificity rules though.
Are you using the same class/id names for your website and the emails? This should not be the case.
I highly recommend using a pseudo-namespace for your CSS.
Basically, add an arbitrary prefix to your CSS that won't be contained in the inlined 3rd-party content: <div class='foo'> becomes <div class='myapp-foo'>
Having used this practice on our projects recently, it requires only a bit more discipline, but makes the app easier to manage for embedding other content.
Related
Also what is the best way to hide the elements from the DOM so that the attacker won't be able to change the css property or html attribute in order to access the element. I know we can use React or Angular to develop website and it is easier to hide or display elements. But I want to know in pure HTML & JS what is the best way?
Anyone can just use the browser console and find all elements with for example:
document.querySelectorAll('*');
It does not matter if elements are hidden with CSS.
Even if you encrypt your HTML you will have to decrypt it to show it to the browser. Then the above code still finds all the elements.
Any code you have can be deactivated by setting a breakpoint and rewriting it in-browser using the developer tools.
Even if you replace document.querySelectorAll and all like them with an empty function, developers can still just add jQuery or any DOM querying engine and find your elements that way.
Any code you can use to hide or show elements can just be executed using the browser console if someone spends the time understanding your code.
How else would you debug or test it?
Angular, Vue etc. does remove elements from the DOM but you should never expect this to be a security feature! A hacker can easily set a breakpoint anywhere in your code, inspect API results from the Network panel, go into the components' code to find out what HTML they would be rendering and much more I haven't started to mention.
To implement security you want to only have in the browser what the user needs to see.
There is no way around it.
DOM, stylings, scripts, assets, etc. can always be accessed using developer tools.
As for the question in your question title:
style attribute styles have a higher specificity than CSS from file (or style tags)
CSS from file (or style tags) with !important has higher specificity than styles from the style attribute
style attribute styles with !important have the highest specificty
So !important just overrides specificity if you want to look at it that way. Other than that you should read about CSS Specificity.
Both are same. If you store your value from html hidden or css hide. Anyone can find out them.
So if you are using html , js & css and want to pass value as hidden than disable developer tool and shortkey to open it by this way you can protect your data or else use any encryption method for that.
I have application where user can paste their html code, when ever I paste html with style tag those CSS rules are applied to my application too.
Those CSS rules should be applied only to pasted code.
Found this:
http://www.w3schools.com/tags/att_style_scoped.asp
But it only works with firefox, would be perfect solution for this problem.
Now I'm thinking about parsing pasted CSS rules and applying them to html as inline css rules.
Is there any better solution?
Use iFrame to provide safe way of showing user supplied HTML code. That way even when user tries to overwrite your site to look like bank account he still have no access to outer-iFrame content.
Does anybody meet this requirement: I use Bootstrap css to build a html page. And I want to send this html content by email. I can use "$('#myelement').html();" to get its detailed content. But it is without css style. How can I convert Bootstrap css style to plain html, like ?
Really appericate your any idea.
Unfortunately most email clients will not accurately display an embedded stylesheet; you'll need to use inline styles and tables instead of floats, etc. Check out this thread: Best practices for styling HTML emails. Hubspot also does a great job of outlining some of the differences between web and email CSS.
You can try Emogrifier for converting External Css to Inline.
It will helps to convert and make reliable for E-mail view.
There is whole lot of differences between standard HTML + CSS as rendered in modern browsers and what actually works in HTML based email. The latter is much less standardised. Typically, you would expect to use inline styles rather than a embedded stylesheet for a lot of the CSS content to work.
This has already been discussed on this thread:
Best Practices & Considerations when writing HTML Emails
I am using a link generated from a RSS converter (webrss.com), which sits inside a javascript tag at the end of my html. I have needed to convert an RSS feed to HTML for displaying on some digital signage. It works great, except I am having trouble overriding its default styles. I can change .li and .a styles but not font-size in the body or html tags.
I have looked everywhere for a solution and have tried using !important in my CSS but it isn't working. I would like to use an external style sheet and have it override all styles in the js tag at the end of my html.
Is this possible? I'm new to this and am stuck, please help!
Possible they are setting some of the styles inline on the elements eg. <span style="font-size:12px">contents</span> using JS themselves. If they are, there is no way to override it with CSS you'll have to use js your self to override their styles.
Basically, specificity and valid css can be your issue.
Specificity: You can inspect element to see what styles are applying. Assuming your css code is valid, it will show up for the selected element, below the css rules taking precedence above your own. Something like "li {font-size: 11px !important;}" should take precedence above all others, unless there is a more specific selector using the important piece as well.
Validity: For all html elements (li, a, body, html), you select them by just writing them out (ie "html {color: red;}" NOT ".html {color: red;}". I see you've mentioned .li and .a in your question, which may have just been an accident. Note that the dot is not necessary unless it is a class name assigned (ie. ). Check if your css is even listed in the inspector for that element to check if your css is valid.
You can override inline styles with css. The important tag trumps the inline style. See http://css-tricks.com/override-inline-styles-with-css/
The best way to override rule in JS is using CSSOM, I found this lib may help:
https://github.com/cssobj/cssobj
It's render CSSOM from JS, and you can change rules directly from JS.
I've got a CSS file which provides some styles, but one of them really sucks (the <code> tag styling). I'd like to eliminate it, possibly through JavaScript. Is there a quick way to do this?
Edit: These elements don't need styling, and I don't need to replace the existing styling, I just need to get rid of it.
You can make a more specific CSS declaration for <code>. Mileage may vary, depending on your mark-up.
body code {
... your styling ...
}
See: http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
I ended up just altering the stylesheet and hosting a copy. Not ideal, but functional.