CSS pre-processing
UpdatedWhat’s CSS pre-processing?
CSS pre-processing converts your CSS styles to inline attributes in your emails. By default, we pre-process emails created in the code and rich text editors before they leave Customer.io.
- If your email uses our legacy liquid and pre-processing is enabled, then we process the email using Premailer. Find more info at their Github repository.
- In addition to inlining, Premailer also checks CSS properties against e-mail client capabilities.
- If your email uses our latest liquid and pre-processing is enabled, then we process the email using Juice. This will not process external stylesheets.
Check your liquid version
To determine which version of liquid your email uses, learn more about our Liquid upgrade.
Why disable it?
If you’re using a custom email template that was already pre-processed, CSS pre-processing may cause issues with your layout. This most frequently happens with responsive email templates on mobile devices.
Disabling CSS pre-processing means that your CSS will stay exactly as specified in your template, avoiding these problems.
By email editor
We have three email editors and each has a different relationship to CSS pre-processing:
- Drag and drop - CSS pre-processing is always disabled
- Rich text - CSS pre-processing is always enabled
- Code - CSS pre-processing is enabled by default, but you can disable it
You can only disable CSS pre-processing for emails created in the code editor.
You can disable it at the workspace-level or for an individual email.
If you have any questions about this, please let us know!
Code editor
Workspace-level setting
Within Workspace Settings > Email, click the Default Email Settings tab to find “CSS Pre-processing with the Code Editor.”
By default, the setting is enabled across your workspace. It only influences emails created in the code editor, not those made in the rich text or drag and drop editors.
Send a test message to yourself to see how your email will look with pre-processing enabled.
Disable pre-processing
If you disable the workspace-level setting, we will not apply pre-processing to any new emails created in the code editor. We will continue to pre-process CSS in any emails created while the workspace-level setting was enabled.
To change pre-processing on existing messages, change the email-level setting.
Send a test message to yourself to see how your email will look with pre-processing disabled.
Email-level setting
Within an email created in the code editor, you’ll see a checkbox for CSS pre-processing. By default, this is set to your workspace setting. The email-level setting takes precedence over the workspace-level toggle if, for instance, CSS pre-processing is disabled in your workspace but enabled for a message.
This is only available for emails created in the code editor, not those made in the rich text or drag and drop editors.
Send a test message to yourself to see how your email will look with pre-processing enabled.
Disable pre-processing
To disable CSS pre-processing on an email, uncheck the CSS pre-processing box in the header.
Send a test message to yourself to see how your email will look with pre-processing disabled.
