How to separate CSS styles between the frontend of a Webflow site and editor

2 min read
|
|
|
925 Views

Using this technique proves useful when building page transitions between Webflow pages, or custom preload elements that should be visible when the page loads.

The issue when doing smooth transitions on a page is the initial state of the element. We want to set the initial state with CSS because that gets loaded with the page render. If we use JS to show the element on page load it can cause a short blink effect something similar to “FOUC” when loading web fonts. JS code can be delayed for a number of reasons that is why it’s safer to set the initial state with CSS and then use JS to hide the element when the page finished loading.

Create default styles for the preloader element

First we create a div, make the div take fullscreen and apply a background colour. We set the display to none, that way it doesn’t show in the Webflow editor, if it would be visible then we couldn’t select other element on the page in the editor.

/* Create a fullscreen element that shows above all content */
.preloader {
    display: none;
    z-index: 99999;
    background-color: #000;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    pointer-events: none;
}

But now the problem is that we need to change the display property on the frontend of the page with JS code. As stated above that is not optimal. The optimal way would be to have the same class but different styles in the editor and on the page itself.

Set different style that gets applied on the frontend only

We can achieve this with the following code, added to global Custom Code or to an embed element.

/* This class gets applied in the frontend only */
html.w-mod-js .preloader {
    display: block;
}

The above code triggers when the html element has .w-mod-js class applied, which happens only on the frontend of the site. That way we get a hidden .preloader element in the Webflow editor but on the frontend the element CSS is set to display: block and thus is visible on page render.