Preventing CSS when in edit mode
Only apply CSS when we’re not in the Squarespace Editor to prevent layout issues.
In the last series, we learned how to make a block sticky. However, the block continues to be sticky in the Squarespace backend when editing the page.
Having your code still apply while editing might seem nice, but it can have unintended consequences when editing a website. For example, above, I can’t change the z-index value of my sticky block.
These types of quirks can be really confusing for us designers and even more so for a client.
So personally, I prefer to disable the sticky property when in edit mode — this allows me to continue to use the entire toolset that Squarespace has to offer.
To do this, we need to take advantage of a class that Squarespace adds to the body element of our website when we are editing, sqs-edit-mode-active. Using this, we can disable our sticky code like so:
body:not(.sqs-edit-mode-active) {
.fe-block-id{
position: sticky;
top:45vh;
}
}When the body element doesn’t have the class sqs-edit-mode-active, apply our sticky code.
1. This class is applied to the body element, the same element as our #collection-id so if I’m using this with a collection ID, the collection ID would replace the body selector.
#collection-id:not(.sqs-edit-mode-active) {
.fe-block-id{
position: sticky;
top:45vh;
}
}2. Nested selectors (see above, where the .fe-block-id{} is within the #collection-id:not(){}) don’t currently work between <style> tags in the Page or Site Header Code Injection areas. So you need to deconstruct the CSS like so:
<style>
body:not(.sqs-edit-mode-active) .fe-block-yui_3_17_2_1_1672689031022_409345{
position: sticky;
top:45vh;
}
</style>
