Last modified: 2012-04-08 16:15:23 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T37815, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 35815 - ResourceLoader modules that style server output should be loadable without javascript or FOUC
ResourceLoader modules that style server output should be loadable without ja...
Status: RESOLVED INVALID
Product: MediaWiki
Classification: Unclassified
ResourceLoader (Other open bugs)
1.19
All All
: Unprioritized normal (vote)
: ---
Assigned To: Nobody - You can work on this!
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-04-08 14:09 UTC by Dmitriy Sintsov
Modified: 2012-04-08 16:15 UTC (History)
3 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description Dmitriy Sintsov 2012-04-08 14:09:32 UTC
When I tested my MediaWiki extension in Firefox with Javascript being turned off, the stylesheet-only module did not load, so the visual appearance of page was incorrect.

	# not loaded with OutputPage::addModules( 'ext.jqgmap.styles' ) anymore,
	# because when Javascript is off, the style does not appear
	'ext.jqgmap.styles' => array(
		'styles' => 'common.css',
		'position' => 'top'
	),

	# Next line does not work when Javascript is disabled, thus was commented out:
	# $out->addModules( 'ext.jqgmap.styles' );


When I use "old-way" of loading stylesheet without using ResourceLoader, it loads just fine even when JS is off:

	# Loading 'ext.jqgmap.styles' manually, instead:
	$out->addLink(
		array(
			'rel' => 'stylesheet',
			'type' => 'text/css',
			'href' => self::$scriptPath . '/common.css'
		)
	);

Why not to detect such modules and to load them at server-side instead of client-side? Stylesheets are not scripts, they should be available even when JS is off.
Comment 1 Krinkle 2012-04-08 14:41:05 UTC
I understand your issue summary but the title is confusing. What do you mean by applying styles server-side?

I've adjusted the summery:
> - ResourceLoader modules which define only CSS styles should be applied at server-side.
> + ResourceLoader modules that style server output should be loadable without javascript or FOUC[1]

To answer your question, if you see unstyled content while the page is loading, use "position" => "top", to load it before the page content is loaded.

Although javascript disabled contexts are not fully supported, for modules that only style server output (e.g. no styles that apply to content inserted or manipulated by JavaScript), you can use $out->addModuleStyles() to instead load the module as a <link> tag in the top.

Don't use the old addLink() link since that will not take advantage of load optimalisation and doesn't cache properly (in that it might remain in user cache after it has changed, and it won't remain long enough if it doesn't change), ResourceLoader takes care of that with addModuleStyles().

Be careful not to use addModuleStyles() for modules that contain javascript because if you later load the module again with addModules(), the style will be loaded twice. If this situation occurs, separate your modules into a style-only module for server output and another module with javascript and styling for the dynamically generated content.

Assuming addModuleStyles() is the solution to your problem, I've marked this report as INVALID since the bug in question is not a bug but was already solved, the solution was just not documented enough for you to find it. If this doesn't solve your problem, please feel free to re-open it.


[1] Flash of unstyled content
Comment 2 Dmitriy Sintsov 2012-04-08 16:15:23 UTC
Thanks for pointing out to newer function. However it probably would be elegant if ResourceLoader detected such modules itself.

Sorry for choosing improper word, my English is not perfect. Probably should be "loading styles server-side" or "generating styles server-side", instead of inserting then via JS.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links