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
Related
I want to convert my HTML page to PDF format with keeping CSS style on it. I'm doing it already but I cannot grab CSS. I'm getting only html without css. Is this possible to do somehow?
I suggest you take a look at DOMPdf. Its a PHP library for generating PDFs.
https://github.com/dompdf/dompdf
There is also a JavaScript library but I guess its not as powerful like the PHP version.
https://github.com/MrRio/jsPDF
Don't know exacty what you're attempting to do. But you should look at this tool : html2print. (on github : github.com/osp/osp.tools.html2print)
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.
I am using ngSanitize in an AngularJS application to remove unwanted or dangerous parts. However, the content is generated using an HTML Richtext editor and contains some style information, which gets removed (e.g. the text color).
I know that it is useful to remove inlined CSS styles, but I would prefer a whitelist with CSS attributes that do not get removed. Is there a way to achieve this without granting all CSS attributes?
Reading the documentation for ngSanitize, it looks as though it uses two whitelists to determine what data to block (described here, in $compileProvider).
The two whitelists are aHrefSanitizationWhitelist([regexp]) and imgSrcSanitizationWhitelist([regexp]). However, it looks as though these two only handle URLs for links to prevent XSS attacks.
You can use sce.trustAsHtml() (or, possibly, data-bind-html-unsafe if that's still a thing, but I think that's deprecated) but that's not exactly what you want; that would open you up to all HTML, safe or unsafe.
It might be worth it to check out the documentation for $sce. Looking at it so far, there's an option for escaping CSS, but I'm not sure if it would escape inline CSS in an HTML tag. So far, I see no options for providing a whitelist to the parseAs method.
Edit:
Looking through the $sanitize source code, it looks as though it's set to allow stuff in style tags, but not style attributes. Style attributes will get stripped by sanitize unless you change the source code. Classes, however, don't get stripped, so you may have a workaround there. (In fact, by allowing classes and not inline styles, you can possibly restrict style usage in your comments section.)
The only other alternative would be to roll your own, it seems, unless someone already has.
The folks over at textAngular have a fork of ng-sanitize that will allow for style attributes. Use their version instead of ng-sanitize.
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.
The only reasons I see on the internet to not to use inline-css is because of the separation of html and css & management, but if this is not a problem in my case I don't care I will use.
Another pro I can say is this: imagine you want to load a widget made by another user, you will only need to load 1 file, the javascript and not the css.
But it might have other problems?
thanks
If you read your question again, you have answered it yourself. There is a reason for the "separation" of html and CSS. Because at some point in time, you will eventually want to change the look of what you have coded up. These are the times when having a separate CSS file would be very helpful so you are only ever making changes in one place and not throughout your application.
EDIT
Another usefulness of having the CSS separate is the caching. Most of the modern browsers cache the CSS files. This means there are less round-trips to the server and quicker response times. I'm not sure if same is the case for JavaScript, because JavaScript files would be cached, but the client browser will have to execute the code every time it loads.
I think this is a good question that is worth exploring. I don't think there is a performance or standards-based argument for not using inline CSS - it works perfectly well - the only (though considerable) argument for separated CSS is for maintainability / readability. And so if you are generating CSS from JavaScript, generating it inline is just as sound as any other way.
In fact, DOM APIs in general expose much simpler methods for assigning styles directly to elements ( https://developer.mozilla.org/en/DOM/element.style ) than for creating new stylesheets. Therefore almost all JavaScript libraries, like jQuery, when they have to manipulate styles they do it by adding inline styles to an element.
Having said that, I have never before seen a situation where the mark-up and styling for a whole page was generated with JavaScript. I would expect this to be rather inefficient. I can see that if you have a web application where all content is pulled in through Ajax (a perfectly good solution) then you might write a fair bit of the mark-up with JavaScript, but still it would be better/more efficient to load most of the surrounding mark-up for your content in the initial page load, and then use JavaScript to swap out content within existing elements.
In any case, I would recommend that you keep most of your CSS in an external stylesheet with relevant classes already defined, so that all your JavaScript does is create elements with the correct class. This would have a performance advantage and would also mean that all your style information was located in one place, and is separate from your JavaScript, which would make your code easier to maintain.
It's OK to use inline css. (in this specifice case)