search

tijsverkoyen / CssToInlineStyles

CssToInlineStyles is a class that enables you to convert HTML-pages/files into HTML-pages/files with inline styles. This is very usefull when you're sending emails.
BSD 3-Clause "New" or "Revised" License
5.8k stars 187 forks source link

DL and DT-tags workaround for HTML e-mail viewing? #230

Closed JeroenSteen closed 1 year ago

JeroenSteen commented 2 years ago

I'm trying to use a certain CSS on my HTML markup with dl and dt tags, and I want to convert it in to inline styles for showing the dl-list correctly in a e-mail message.

HTML:

<dl id="summary_description_list"><dt>Aantal</dt><dd>50</dd><dt>Formaat</dt><dd>A5 (148mm x 210mm)</dd><dt>Beprinting</dt><dd>Dubbelzijdig full color</dd><dt>Papiersoort</dt><dd>Mat xerox 120 grs</dd><dt>Betaling</dt><dd>Tikkie (iDeal/Revolut)</dd><dt>Aflevering</dt><dd>Ophalen in studio</dd><dt>Indicatief gewicht</dt><dd class="mb-15">186,48 gram</dd></dl>

CSS: dl{display:grid;grid-template-columns:max-content auto}dt{grid-column-start:1;font-weight:bold}dt:after{content:":"}dd{grid-column-start:2}/*# sourceMappingURL=lists.css.map */

PHP:

$cssToInlineStyles = new CssToInlineStyles();
$summary = $cssToInlineStyles->convert(
    $summary,
    file_get_contents('https://fonts.googleapis.com/css?family=Nova+Square').' '.
    file_get_contents('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i').' '.
    file_get_contents('../css/main.css')
);

The CssToInlineStyles code works by applying the styles, but my mail client doesn't show the styles correctly. Is their a workaround possible, since the list is showing correctly in the webversion.

stof commented 2 years ago

your CSS contains styles for a :after pseudo-elements. such styles cannot be inlined. There is no way to declare styles for a pseudo-element (or a pseudo-class or a media query) in inline styles, that's only possible for CSS. So if you ship only inline styles and not the CSS, those styles will be lost.

A solution is to add those styles as a <style> tag in the <html>, so that there are shipped as well. This way, email clients that support <style> tags will get the full CSS. Note that CssToInlineStyles reads those tags too. So for styles present in the HTML, you don't need to pass them to the convert() method in the css argument.