Sometimes inline CSS should stay inline

Hi wildmice,

You can exclude all inline CSS from aggregation via:

add_filter('autoptimize_css_include_inline','my_ao_css_include_inline',10,1);
function my_ao_css_include_inline() {
        return false;
	}

Or, enter the CSS selector for the specific CSS you wish to exclude from aggregation into the “Exclude CSS from Autoptimize” field in the AO dashboard.

Best,
AJ

…forgot to mention you could also wrap the CSS you wish to exclude in <!--noptimize--> tags.

E.g.

<!--noptimize--><style type="text/css">
     #site-title-description {
position: absolute !important
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
     }
</style><!--/noptimize-->

Be well,
AJ

Thanks AJ. The noptimize is what i ended up using.

The more i use this plugin the more i’m impressed. At the outset i wasn’t expecting such depth of detail so didn’t even look for some of these features.

What really kind of blew me away was when i tried the option to defer CSS loading – loading it via Javascript – and despite the complexity of the page it actually worked (aside from the flash of unstyled content).

Frank has created a very special thing with AO and there’s actually very little one can’t do when factoring in the API. The icing on the proverbial cake is, of course, Frank’s tireless dedication to his creation. It sure doesn’t hurt that he’s just a great guy.

the flash of unstyled content

That too can be fixed with AO, my friend. ?? You just need to find the CSS critical to rendering your above-the-fold content and enter it into the text field provided in the UI.

Be well,
AJ

Lol, that is where i get off the big G’s bandwagon. I am building sites for *all* devices, not just mobile. On some screens *all* the content is above the fold, on phones hardly any. “Above the fold” is a futile exercise IMO.