css minified?

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
magallo
Forum Members
Forum Members
Posts: 98
Joined: Thu Mar 24, 2011 12:37 am

css minified?

Post by magallo »

Hi all, does anyone knows how to minify the default {cms_stylesheet} ?
is it possible to minify the css files?
thanks
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1030
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: css minified?

Post by DIGI3 »

There's no plugin for that currently, but enough people have asked for it that I'm sure someone would write one if a few people could sponsor it.

You can always just use [[strip]] in your stylesheet templates and be most of the way there, and if you're using compression on your server, then minifying won't really accomplish anything anyway - other than silencing SEO experts.
Not getting the answer you need? CMSMS support options
magallo
Forum Members
Forum Members
Posts: 98
Joined: Thu Mar 24, 2011 12:37 am

Re: css minified?

Post by magallo »

Thanks for the feedback, in fact I do need to silence the seo experts :)
I'm going to give it a try. I'm also going to try using the [[jsmin]] tag. Lets see if it helps.
magallo
Forum Members
Forum Members
Posts: 98
Joined: Thu Mar 24, 2011 12:37 am

Re: css minified?

Post by magallo »

I created a plugin that would minify the existing default {cms_stylesheet} here:
http://dev.cmsmadesimple.org/projects/cssminifier

to use it, you need to add the following into the template:

Code: Select all

{capture assign=stylesheets}{cms_stylesheet nolinks=true}{/capture}
{cssMinifier css=$stylesheets}
next version will take the data from the database.
Let me know your thoughts.
arnoud
Power Poster
Power Poster
Posts: 1399
Joined: Sun Apr 19, 2009 9:33 am

Re: css minified?

Post by arnoud »

Ofcourse somebody will write a CSS optimization module when enhough funds are raised. But there are already tremendous JavaScript optimizers that are hard to beat and standardized on other open-source projects.

Implementing pre- and postprocessors is something you can start with today for example: Export your Design Manager CSS files and compress them with: cssnano + css-mqpacker

https://cssnano.co
https://github.com/hail2u/node-css-mqpacker

Btw: When you bump the exiration dates on the default cmsms/doc/htaccess.txt file (access plus 1 year) most speed test tools also give a better score. SEO fanatics will love it.
User avatar
PinkElephant
Forum Members
Forum Members
Posts: 154
Joined: Fri Feb 06, 2009 2:08 pm

Re: css minified?

Post by PinkElephant »

Thank you!
magallo wrote:

Code: Select all

{capture assign=stylesheets}{cms_stylesheet nolinks=true}{/capture}
{cssMinifier css=$stylesheets}
I was lazy and went with

Code: Select all

{cssMinifier css={cms_stylesheet nolinks=true}}
... and it seems to work well. :)

(It looks like the hardcoded 'tmp/cache' will miss when $config['tmp_cache_location'] is set).

Why this matters to SEO is beyond me. ;)

EDIT: Forgot to say it might be worth including additional css units like rem.
magallo
Forum Members
Forum Members
Posts: 98
Joined: Thu Mar 24, 2011 12:37 am

Re: css minified?

Post by magallo »

PinkElephant wrote:(It looks like the hardcoded 'tmp/cache' will miss when $config['tmp_cache_location'] is set).
You're making a good point, i was not aware of this $config option.

btw, i already have a working version that grabs the data directly from the database but it will only convert [[root_url]] to $config['root_url']. I think it's too complicated to convert all the smarty processing : [[$red = '#900' scope='global']].....
arnoud
Power Poster
Power Poster
Posts: 1399
Joined: Sun Apr 19, 2009 9:33 am

Re: css minified?

Post by arnoud »

Css Custom Properties catch up and will become a good replacement for variables set in Smarty in after ie11 is phased out: https://caniuse.com/#feat=css-variables.

Maybe you can process (the uncompressed) CSS templates through Smarty first and put that into your minifyCSS function after.

https://www.smarty.net/docsv2/en/api.functions.tpl

-- untested --:

Code: Select all

$uncompressed = $smarty->fetch('uncompressed.css');
minifyCSS($smarty->display('eval:'.$uncompressed));
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3268
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: css minified?

Post by velden »

Note:

Without having a look at the code I think it's bad practice to read the data from the database directly.

Available API's should be used.
arnoud
Power Poster
Power Poster
Posts: 1399
Joined: Sun Apr 19, 2009 9:33 am

Re: css minified?

Post by arnoud »

velden wrote:Without having a look at the code I think it's bad practice to read the data from the database directly.
What do you mean?

cssMinifier is reading a file from the tmp directory.
smarty methods are not protected and part of the cmsms api.
my example is pseudo code btw.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3268
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: css minified?

Post by velden »

magallo wrote: ...
btw, i already have a working version that grabs the data directly from the database but it will only convert [[root_url]] to $config['root_url']. I think it's too complicated to convert all the smarty processing : [[$red = '#900' scope='global']].....
Locked

Return to “Layout and Design (CSS & HTML)”