CSS in Email
Lucky you! You found an early release chapter - it will be fully polished and published shortly!
This Chapter isn't quite ready...
Rest assured, the gnomes are hard at work
completing this video!
CSS in email requires... some special care. But, pffff, we're Symfony developers! Let's recklessly go forward and see what happens!
In email/booking_confirmation.html.twig, add a <style> tag in the <head> and
add a .text-red class that sets the color to red. Now, add this class to the first
<p> tag.
In our app, book another trip for our good friend Steve. He's really racking up the parsecs! Do you think he'd be interested in the platinum Universal Travel credit card?
In Mailtrap, check the email. Ok, this text is red like we expect... so what's the problem? Check the HTML Source for a hint. Hover over the first error:
The
styletag is not supported in all email clients.
The more important problem is the class attribute: it's also not supported
in all email clients. We can travel to space but can't use CSS classes in emails?
Yup! It's a strange world.
The solution? Pretend like it's 1999 and inline all the styles. That's right,
for every tag that has a class, we need to find all
the styles applied from the class and add them as a style attribute. Manually,
this would suuuuck... Luckily, Symfony Mailer has you covered!
At the top of this file, add a Twig apply tag with the inline_css filter. If you're
unfamiliar, the apply tag allows you to apply any Twig filter to a block of content. At
the end of the file, write endapply.
Book another trip for Steve. Oops, an error! The inline_css filter is part of a package
we don't have installed but the error message gives us the composer require command
to install it! Copy that, jump over to your terminal and paste:
composer require twig/cssinliner-extra
Back in the app, rebook Steve's trip and check the email in Mailtrap.
The HTML looks the same but check the HTML Source. This style attribute was automatically
added to the <p> tag! That's amazing and way better than doing it manually.
If your app sends multiple emails, you'll want them to have a consistent style from
a real CSS file, instead of defining everything in a <style> tag in each template.
Unfortunately, it's not as simple as linking to a CSS file in the <head>. That's
something else that email clients don't like.
No problem!
Create a new email.css file in assets/styles/. Copy the CSS from the email template
and paste it here. Back in the template, celebrate by removing the <style> tag.
So how can we get our email to use the external CSS file? With trickery of course!
Open config/packages/twig.yaml and create a paths key. Inside, add
%kernel.project_dir%/assets/styles: styles. I know, this looks weird, but it
creates a custom Twig namespace. Thanks to this we can now render templates inside
this directory with the @styles/ prefix. But wait a minute! email.css
file isn't a twig template that we want to render! That's ok, we just need to access
it, not parse it as Twig.
Back in booking_confirmation.html.twig, for inline_css's argument, use
source('@styles/email.css'). The source() function grabs the raw content of
a file.
Jump to our app, book another trip and check the email in Mailtrap. Looks the same! The
text here is red. If we check the HTML Source, the classes are no longer in the <head>
but the styles are still inlined: they're being loaded from our external style sheet,
it's brilliant!
Up next, let's improve the HTML and CSS to make this email worthy of Steve's inbox and the expensive trip he just booked.
