Drag and drop area styles moved from footer to header

jmclaren
HubSpot Employee

Drag and drop areas produce styles from attributes in the template and page-editor. These styles are output in the standard_footer_includes. Those styles are moving to the standard_header_includes.

What's happening?

Drag and drop areas are customizable from both the page editor and in the templates themselves. In the templates, developers can add these styles using attributes on the HubL drag and drop tags.  

 

The CSS styles are added to the page using a <style> tag that appears in the

standard_footer_includes. We're changing this so that we now load these styles last in the standard_header_includes

 

CSS styling is influenced by the order of styles in a page. Because we're moving the styles from the end of the HTML document to the head, this could influence the styling of some pages. Drag and drop area based styles are implemented with !important to ensure that editor styles take precedence. However, an inline style or a rule with an !important loaded lower in the page could override those styles.

 

To prevent issues, ensure that the dnd styles are loaded last. To do so, you can add your stylesheets above the standard_header_includes, through require_css, or linked to modules/templates. 

 

We expect the number of sites negatively impacted by this change will be very low. 

Why is it happening?

CSS is a render-blocking resource. The browser loads and processes CSS in a cascade, meaning CSS earlier in the doc will be rendered right away. Loading new styles later in a page's rendering can cause a flash of incompletely styled content. This update prevents that issue for drag and drop areas.

When is it happening?

We are already slowly rolling this out to all HubSpot accounts with access to HubSpot CMS functionality, that includes accounts with CMS Hub and Marketing Hub.

We estimate we will be done rolling this out to all accounts by July 20th, 2020.

Questions or comments? ask below.

Jon McLaren

Sr. CMS Developer Advocate

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

0 Replies

No replies on this post just yet

No one has replied to this post quite yet. Check back soon to see if someone has a solution, or submit your own reply if you know how to help! Karma is real.

Reply to post

Need help replying? Check out our Community Guidelines

0 Replies 0