By default, we use inline CSS styles, which are applied directly within an HTML element's style attribute, offering a way to style specific elements individually.
However, if you want to reduce the weight of the compiled HTML by embedding CSS within the head section, you can enable CSS optimization.
By enabling CSS optimization, the weight size of your email templates will be reduced compared to inline CSS, which makes it possible to keep emails from getting clipped. The most popular email clients, such as Gmail, Yahoo, Apple, Outlook, and AOL accept and render embedded styles. Nevertheless, there is a small list of email clients that do not support embedded styles.
How to add the CSS optimization control in the editor?
Pass this parameter within Plugin initialization to display a control and manage its state:
cssOptimization: {
defaultValue: true,
onValueChanged: (value) => console.log('css optimization value changed', value),
},
"onValueChanged" - you should pass your function, which will be triggered once the customer interacts with this control. Using this function, you can monitor changes in the state of a CSS optimization setting in emails.
You can access the control by going to the "Appearance" → "General Settings" menu.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.