Style sheets are now outputted as:
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/zen/zen/tabs.css?P" />
The Flash of unstyled content happens only when the css2 @import rule is used
Example: <style type="text/css" media="screen">@import "style.css";</style>
See also http://www.bluerobot.com/web/css/fouc.asp/
Drupal outputted them before indeed with @import, but this is no longer the case, so
/* Needed to avoid Flash of Unstyled Content in IE */ may be removed from page.tpl.php
| Comment | File | Size | Author |
|---|---|---|---|
| #16 | system-unstyled-flash-334956-16.patch | 667 bytes | patrickfgoddard |
| #5 | system-unstyled-flash-334956-5.patch | 620 bytes | johnalbin |
| #4 | system-unstyled-flash-334956-4.patch | 620 bytes | johnalbin |
Comments
Comment #1
johnalbinWoo-hoo! I'll make sure to do that before the next release. :-)
Comment #2
hansrossel commentedThx! Is indeed good news.
And I meant the complete
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyled Content in IE */ ?> </script>may be removed of course.For completeness: this is the thread with the patch to use href instead of @import for css in Drupal 6: #145218: Use href instead of @import for CSS
Comment #3
johnalbinFixed!
Comment #4
johnalbinHmm… Looks like I grabbed that bit of code from core’s page.tpl.php. And, after doing some research, it appears that line was in the original patch for modules/system/page.tpl.php that was committed with the new D6 theme layer #137236: theme preprocess documentation does not exist. I can't seem to find who/where it was first introduced.
Perhaps, the "fix" went into page.tpl.php before Drupal made the switch away from @import for CSS files?
Comment #5
johnalbinKicking the testbot for good measure.
Comment #6
dries commentedCommitted to CVS HEAD. Thanks.
Comment #7
robloachMoving back to DRUPAL-6 so goba can commit if he wants. The patch at #5 still applies cleanly.
Comment #8
gábor hojtsyIs it not a common practice to use @import in the theme CSS files? Then this would break those themes in IE, right?
Comment #9
johnalbinIf a themer uses @import in their CSS files, then they wouldn't be able to use the CSS aggregator effectively, since those @imported files wouldn't be included in the aggregated CSS file. Common practice? I hope not. In the non-Drupal world, @import is common, but Drupal should be educating people why adding CSS files to the .info file is the best route.
Technically, it wouldn't be “broken" because IE would just show a temporary flash of unstyled content before displaying things correctly. And this "flash problem" might prompt a themer to discover the proper way to include a CSS file in Drupal. So, personally, I think this is safe to put into D6.
Comment #10
gábor hojtsyJohnAlbin: to me, it looks like both drupal_load_stylesheet() and drupal_build_css_cache() resolve and include @import-ed CSS files, so it is far from an improper or unsupported way to include a stylesheet in Drupal. They are supported the same way as CSS files added through .info files as far as aggregation goes. Please correct me if this is not true.
Also, since IE has a limitation of not loading CSS files above a certain number of
<link>tags, I can see people resorting to @import for at least workable development when they need their CSS unaggregated. In fact the "canonical" issue (for which others were marked duplicate) suggests using @import, but is a vibrant discussion for sure: #228818: IE: Stylesheets ignored after 31 link/style tagsComment #11
johnalbinGábor, thanks for the links. I agree we should review those 2 functions and issue #228818 before committing this to D6.
Comment #12
mki commented/modules/system/maintenance-page.tpl.php in Drupal 7 still have this fix. It is unclear to me whether this fix will be removed in Drupal 7 and 6.
Comment #14
mki commentedMarking as a bug since /modules/system/maintenance-page.tpl.php in Drupal 7 still have this fix at line 24.
Comment #15
mki commentedComment #16
patrickfgoddard commentedTaking a stab at contributing patch, something I've never done before, so please be kind. This is for /modules/system/maintenance-page.tpl.php, only. Does the previous patch need to included as well? Let me know...
Comment #17
patrickfgoddard commentedComment #18
effulgentsia commented#16 looks good to me. The cleanup already went in to html.tpl.php and Garland's maintenance-page.tpl.php, so this is just making modules/system/maintenance-page.tpl.php have the same cleanup.
Comment #19
webchickYay for less cruft. :) Committed to HEAD.
Great job on your first patch, thund3rbox! :)
Comment #20
effulgentsia commentedMoving back to a D6 issue as per #11 for John and goba to decide on, but marking postponed until resolution of #228818: IE: Stylesheets ignored after 31 link/style tags, which is RTBC for D7, but if/when that lands, will need a re-roll for D6, because the D7 patch connects with hook_css_alter() which isn't available in D6.
Comment #21
effulgentsia commentedDoesn't need to be postponed any more. #228818: IE: Stylesheets ignored after 31 link/style tags landed. #727072: Warn admin when IE 31 CSS file limit exceeds on D6 is "won't fix".
My recommendation is to mark this "won't fix", unless there is benefit. If the only thing it accomplishes is making a couple tpl.php files slightly cleaner, I don't think it's worth introducing a possible, even if unlikely, regression. There may well be some site out there that overrides the $styles variable with HTML code that uses STYLE tags instead of LINK tags and that also removes all SCRIPT tags (even drupal.js and jquery.js). Yes, that's very unlikely, and if there was any real benefit to removing the FOUC workaround in D6, then it would make sense to do so, but without any identified benefit, we should err on the side of caution with respect to changes to D6.
Comment #22
johnalbinYeah, you're right. There's no harm in leaving it in. And removing it only makes things slightly cleaner.
Comment #23
johnalbin