CSS inlining
BetaThis feature is new and we're actively working to improve it. UpdatedIn the code editor of Design Studio, use the CSS inlining transformer (aka CSS pre-processing) to convert embedded CSS into inline styles. This can help improve page loading times and tells browsers to treat your styles as the most important.
Click Transformers > CSS Inlining then turn on Inline CSS.
Once enabled, you can customize what styling should be converted or preserved. The state of those toggles will be saved if you deactivate and later reactivate the transformer.
CSS inlining does not convert all styles in Design Studio
- It does not convert
<style>
tags withdata-embed
ordata-ignore-inlining
. - It does not download and convert external stylesheets
<link rel="stylesheet" href="....css" />
.
If you want to inline all styles, avoid using these attributes or linking to outside CSS files.