CSS inlining

BetaThis feature is new and we're actively working to improve it. Updated

In 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 with data-embed or data-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.

Copied to clipboard!
  Contents
Is this page helpful?