CssToInlineStyles
CssToInlineStyles copied to clipboard
tijsverkoyen
DL and DT-tags workaround for HTML e-mail viewing?
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.
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.
