This extension integrates a CSS inliner into the TYPO3 core mailer.
This extension is installable from various sources:
-
Via Composer:
composer require pagemachine/typo3-mail-css-inliner -
From the TYPO3 Extension Repository
After installing the extension registers itself automatically, no further configuration is necessary.
Designing mails is hard. Especially requirements like table layouts and inline styles are complicated to handle and take a lot of time to get right. This extension takes one burden off your shoulders and takes care of turning a regular stylesheet to inline styles. See our blog post about Mail styling in TYPO3 now easier.
Before:
<!doctype html>
<html>
<head>
<title>CSS Inline Test</title>
<style>
body {
color: #333;
}
h1 {
font-size: 36px;
}
a {
color: #337ab7;
}
</style>
</head>
<body>
<h1>Headline</h1>
<p>Content with <a href="https://example.org">link</a>.</p>
</body>
</html>After:
<html>
<head>
<title>CSS Inline Test</title>
<style>
body {
color: #333;
}
h1 {
font-size: 36px;
}
a {
color: #337ab7;
}
</style>
</head>
<body style="color: #333;">
<h1 style="font-size: 36px;">Headline</h1>
<p>Content with <a href="https://example.org" style="color: #337ab7;" target="_blank">link</a>.</p>
</body>
</html>Currently only <style> elements are supported, external styles via <link> are not imported.
All tests can be executed with the shipped Docker Compose definition:
docker compose run --rm app composer build