Joomla Templates Club 406,261 posts

[mtense Friend mtenseJoin date: May 2011Posts: 25Downloads:0Uploads:2 Thanks: 2 Thanked: 2 times in 1 posts]

#176692

ie8 will only include 31 css files (directly) and a vanilla installation of the JA templates like JA Social uses up most of them. I learned this the hard way. Installing and mild configuring of JA Social with modules JA Slideshow and JA Top Panel resulted in 27 css files.

<link rel=”stylesheet” href=”/templates/system/css/system.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/system/css/general.css” type=”text/css” />
<link rel=”stylesheet” href=”/modules/mod_jaslideshow/assets/themes/default/style.css” type=”text/css” />
<link rel=”stylesheet” href=”/modules/mod_jaslideshow/assets/themes/social/mod_jaslideshow.css” type=”text/css” />
<link rel=”stylesheet” href=”/modules/mod_jatoppanel/assets/style.css” type=”text/css” />
<link rel=”stylesheet” href=”/plugins/system/jat3/jat3/base-themes/default/css/addons.css” type=”text/css” />
<link rel=”stylesheet” href=”/plugins/system/jat3/jat3/base-themes/default/css/layout.css” type=”text/css” />
<link rel=”stylesheet” href=”/plugins/system/jat3/jat3/base-themes/default/css/template.css” type=”text/css” />
<link rel=”stylesheet” href=”/plugins/system/jat3/jat3/base-themes/default/css/usertools.css” type=”text/css” />
<link rel=”stylesheet” href=”/plugins/system/jat3/jat3/base-themes/default/css/css3.css” type=”text/css” />
<link rel=”stylesheet” href=”/plugins/system/jat3/jat3/base-themes/default/css/menu/mega.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/css/typo.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/css/layout.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/css/template.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/css/css3.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/css/menu/mega.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/css/mod_jatoppanel.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/themes/grey-color/css/com_agora.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/themes/grey-color/css/com_community.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/themes/grey-color/css/color.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/themes/grey-color/css/css3.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/themes/grey-color/css/menu/mega.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_social/themes/grey-color/css/mod_jatoppanel.css” type=”text/css” />
<!–><link href=”/plugins/system/jat3/jat3/base-themes/default/css/template-ie.css” type=”text/css” rel=”stylesheet” /><!–>
<!–><link href=”/templates/ja_social/css/template-ie.css” type=”text/css” rel=”stylesheet” /><!–>
<!–><link href=”/templates/ja_social/themes/grey-color/css/template-ie.css” type=”text/css” rel=”stylesheet” /><!–>
<!–><link href=”/templates/ja_social/css/template-ie8.css” type=”text/css” rel=”stylesheet” /><!–>

Add jquery and you are at 28. This doesn’t leave much room for module specific css includes.

The optimization settings may help with this (haven’t checked yet), but it can be a problem for debugging. Beware!

It would be nice if JA could figure out how to nest the css files, so that for example a theme or jat2 uses a few css files instead of 6 or 7.

Hope this help someone. Cheers!

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#452025

Thanks for the tip!
I do think JA does so many CSS files in order to make editing simpler for the user. You are always free to compress your own CSS files once the site is completed.

[hobbykwekers Friend hobbykwekersJoin date: March 2012Posts: 48Downloads:0Uploads:1 Thanks: 20 Thanked: 6 times in 1 posts]

#452047

Joining, linking and compressing the files is not always an option. Linking, joining and compressing my website with JomSocial breaks my website.

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#452079

One easy way to trim file size is to take out comments and white space for the final version of the CSS file. Comments, white space, and putting one declariation per line are all great ways for developers to organize and write their CSS. But once you’re ready to publish that file, make a copy of it and strip all the comments and white space from the copy. Upload that new slim file to your server. After all, browsers don’t care about your CSS comments and white space. If you ever need to troubleshoot, rewrite, or add to your CSS, you can do so in your ‘working copy’. Then make another slimmed down copy to republish. CSS Tweaking is a great way to strip white space and comments. See this article here for some tools to help you out.

[Author]

Posts