This article explains the Safelist in CSS Optimizer and how to use it.
The Safelist
The Safelist is a list of CSS classes that CSS Optimizer will not process or remove from the final optimized CSS file.
Today’s websites use a variety of ways to implement CSS. This means there is a chance that turning on CSS Optimizer may cause the website styling to go haywire. When that happens we can use the Safelist to tell CSS Optimizer to keep it intact the safelisted CSS rules in the final optimized CSS file. Then the website will display correctly again.
Try this first
If you are not comfortable working with CSS code try this method to get your website displaying properly again.
- Go to CSS Optimizer Options page.
CSS Optimizer Options page.
- Copy the value below into your Safelist.
slider|menu|nav|mobile|rs-|arrow
Paste into your Safelist.
- Check Enable.
- Click on Save Changes.
- Delete Cache in Autoptimize.
Delete Cache in Autoptimize.
- Open your website in an incognito window to check if it is displaying properly.
Check your website in an incognito window.
Note that it is good practice to Delete Cache in Autoptimize every time you change settings in CSS Optimizer. The value above is a list of CSS classes we found to work for most websites. If you are still having issues after entering this value and you don’t want to mess around with CSS, you can contact our support team and we will find out the right Safelist values for you.
How to use the Safelist
If you are familiar with CSS you can use the following method to find the right CSS classes / rules to include in your Safelist.
Turn off CSS Optimizer. (Optional)
In rare cases, you may need to turn off CSS Optimizer to revert your website to a working state while you troubleshoot the issue. Skip this section if your website is in a workable state.
- Go to CSS Optimizer Options page.
- Uncheck Enable.
- Click on Save Changes.
- Delete Cache in Autoptimize.
Open your website in an incognito window. Your website should return to displaying properly again.
Find the problem CSS class(es).
We recommend using normal windows(not incognito windows) to find problem CSS classes. I will be using an example website to explain the next steps. In our example, the menu is not rendering properly when CSS Optimizer is turned on.
- In the window your website is loaded in, open Developer Tools.
Open Developer Tools.
- Select the inspect element tool.
Select the inspect element tool.
- Click on the problematic element. In our case, it is the menu.
Click on the problem element.
- Then in the Styles panel, look for the CSS class that is in charge of rendering the element. In our example, it is “tmc_header_2”.
In the Styles panel, look for the problem CSS class.
Enter the CSS class name into the Safelist.
- Copy the CSS class name.
- Go to CSS Optimizer Options page.
- Add a pipe symbol “|“ and then paste the CSS class name.
Paste the CSS class name into the Safelist.
- If you have previously turned off CSS Optimizer, check Enable.
- Click on Save Changes.
- Delete Cache in Autoptimize.
If your website is still not displaying correctly, continue to look for the right CSS classes. Once you have added the right CSS class(es) to the Safelist your website should display properly when CSS Optimizer is turned on again. If you are still having problems getting your website to display correctly, don’t hesitate to contact our support team.
Things you should know about Safelist
Spaces are not allowed. To separate each individual class name, please use the pipe symbol, “|”.
Use the pipe symbol to separate each CSS class name.
CSS Class names in the Safelist are treated as a greedy value. If the value in the Safelist appears in any part of a CSS class name, that CSS class will not be processed by CSS Optimizer.
Here’s a quick example. Let’s say I have a CSS file containing these three CSS classes.
Quick example.
And I add “header” into the Safelist.
Add “header” to the Safelist.
CSS Optimizer will not process all three classes here and will keep them in the final optimized CSS file. Because all three classes contain the word “header”.
All three classes will be kept intact because they contain the word “header”.
Be it in the front, the middle or the end of the class name, as long as it contains the value in the Safelist it will not be processed.
