UCSS — broken layout

Read this please:

https://blog.litespeedtech.com/2021/12/13/fix-incomplete-ucss/

Thank you.

This is really useful article! (by the way, it needs a bit of update. For example, there is no “UCSS Whitelist” option but “UCSS Selector Allowlist”)

So far I found that my code used “::before” selector in problematic area and it is missing from optimised version.

I added parent selectors as suggested. Waiting for UCSS to be regenerated…

Rudolf

Yes, this article should be updated, but regardless, the article explains how incomplete CSS can arise and how to resolve it.

I think, I am doing something wrong here….

Here is image with broken layout and it shows “problematic” CSS:

https://snipboard.io/L6NgkQ.jpg

Here are screenshots of unpotimised layouts that show optimised code misses “:before” selector

https://snipboard.io/4dAVKS.jpg

https://snipboard.io/BaPOpY.jpg

And here are my settings in UCSS:

https://snipboard.io/tUJSZy.jpg

I did clear all caches and UCSS as well. Until re-generated page was OK. Once UCSS regenerated same problem is back. Screenshot with problem above is after UCSS settings were set and UCSS was re-generated

Thanks,

Rudolf

You alse have to add ::before css for font-aweasome content to make them visible.

Thank you,

Just to be clear. I should use put in Allowlist like this?

.fa-times:before?

The reason I am confused is because of LiteSpeed documentation (https://docs.litespeedtech.com/lscache/lscwp/pageopt/#ucss-selector-allowlist)

“Be careful with pseudo classes (like :hover, :active, :visited, and so on). The UCSS engine ignores pseudo-class selectors in CSS content (with the exception of :not). If you wish to include a pseudo-class selector in the UCSS result, then you must add the main selector to UCSS Allowlist, but do not include the pseudo class or the colon (:).”

Rudolf

Sorry my fault, I forgot the pseudo class exclusion! ?? But the issue seems to be solved?! I can’t see it anymore if I check your page.

No, not solved, problem is there.

I am going to disable UCSS for now (and clear cache). Otherwise mobile and tablet customers can not use the site

If you disable UCSS there is no way to find out what has to be done to fix it.

OK, I had to disable UCSS for now so customers can use site.

Problems I am facing are related to ::before and ::after.

Do you have to work on my site or is it something you can test on your setup? In the worst case, I will duplicate the site under test account on same server.

To find a way to look for a solution UCSS must be enabled, so if could duplicate your site this would be good!

OK, will duplicate the site.

Just a thought — is it possible to have UCSS off for all pages except selected few? In this case I can just duplicate home page (or any other page) and it can be worked on. Given my site has many pages, clearing and re-generating cache and UCSS globally causes unnecessary server load both on my server and QUIC.cloud.

Sorry no. For this you would have to exclude all URLs from the UCSS generation. But you don’t have to wait until the UCSS has been generated for all URLs. Start UCSS and deactivate it the following day.

OK, I copied site to:

https://test.rumatech.com/hats_litespeed/

At the moment, waiting for new domain key and then UCSS generation should start. It is late here, so going to leave it. Should hopefully re-generate by tomorrow.

If you need site login details, please give me your e-mail and I will create access for you.

Thank you for all your help

Rudolf

Please notify if there is a state we can examine.