Tabs CSS loads after page loads, ugly list displayed first

There’s nothing written into the plugin itself, nor any argument support in the wp_enqueue_style function to choose for the output of the stylesheet to be output in the footer.

Here’s the line of code from the plugin.

wp_enqueue_style( 'jquery-ui-tabs', $this->plugin_cssfile( $skin ), array(), $this->ui_version );

This is called inside a function hooked onto wp_enqueue_scripts.

A quote from the wp_enqueue_style codex page.

As of WordPress 3.3 wp_enqueue_style() can be called mid-page (in the HTML body). This will load styles in the footer.

I don’t make the call mid-page though, but perhaps another plugin you have interacts(or messes) with enqueues from other plugins? Easily ruled out by testing with other plugins disabled.

First of all, thank you for your reply. Here’s my clean WP install:

https://www.gohome.ro/masca/?page_id=21

The plugin JS files are loaded at the very end of the page.

From your codex page quote, I see that styles will load in the footer, and that is the problem really. Because on a heavy-loaded page, we get to see the unordered bullet list for 1-2 seconds before the footer loads the styles and the JS files.

Can I somehow make the call in the ‘head’? Through a function or something? I don’t know, I’m not a programmer, that’s why I hope you can help with this.

Later edit: I found this, but I can’t really seem to understand all the mambo-jambo. The one linking to this said it fixes the problem, I don’t understand though:

https://stackoverflow.com/questions/14037609/wordpress-wp-enqueue-style-is-adding-the-style-to-the-footer-not-the-header

The stylesheet is output in the head of the page you’ve linked to above.

Scripts are intentionally loaded in the footer of the document, and the stylesheet is output in the head, as intended.

This line is taken from the source of the page you linked and can be seen inside the head of the document.

<link rel='stylesheet' id='jquery-ui-tabs-css'  href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css?ver=1.9.2' type='text/css' media='all' />

A flash of unstyled content is quite normal for jquery powered features when the page takes a noticable period of time to render(in my local environment it loads so fast i never see an unordered list). The various classes that style the tabbed content aren’t added until the javascript at the end of the page runs.

You can read a bit more about it on various threads and question sites if you so feel inclined, as you are certainly not the first person to have brought up this issue.

https://www.google.co.uk/search?q=jquery+ui+tabs+flash+of+unstyled+content

There a few different ways to approach this issue(fouc – flash of unstyled content), but the easiest in my mind is with some specific CSS to hide the unordered list from view until the javascript has had time to run. Once the tabs script adds the appropriate classes onto the elements, they will pop back into view.

This won’t work for older browser versions(primarily IE), but should be just fine with any fairly modern browser.

div[id^="tabs-"] ul:not([class]) { display:none; }

If you find the browser support for the :not selector a bit spotty(requires a CSS3 browser) you can always use a couple of rules instead that will only require a CSS2 enabled browser.

div[id^="tabs-"] ul { display:none; }
div[id^="tabs-"] ul.ui-tabs-nav { display:block; }
div[id^="tabs-"] .ui-widget-content ul { display:block; } /* Unhide lists in the tab content that would have been caught by the first rule */

Simply add either of the above to your theme’s stylesheet(for ease). Both will essentially do the same, the former will only work for CSS3 enabled browsers, whilst the second will give you better overall browser support and work for any browser capable of handling CSS2 selectors.

I hope that helps.

The solution you provided is an excellent one and I’ve used the CSS2 code in my stylesheet.

I want to thank you for taking the time to support this wonderful plugin!

Happy to help, all the best with your website. ??