CSS minification fails when encountering @font-face

[Integralist]

Hi,

I have two questions, the first is a major issue and the second is
very simple and I'm asking because I'm completely new to Linux...

1.) How can I get the Pagespeed module to ignore certain CSS files?
E.g. on most of our websites we have a fonts.css file which includes
custom fonts using @font-face and at the moment the Pagespeed module
refuses to minify ANY of our other style sheets when it encounters
this fonts.css file because technically it's not valid CSS (e.g.
running through the standard W3C validator this font.css file fails
because @font-face is only currently available in CSS3 working draft).

I want to tell the server (either via .htaccess - or by modifying our
httpd config file on the server) to ignore any files called fonts.css
so at least my other stylesheets can be concatenated and minified.

2.) I've got the Pagespeed module running for all sites by default, so
what can I put into .htaccess file to get certain websites to disable
or enable specific features?

Thanks for your help.

Kind regards,
Mark

[Joshua Marantz]

Great question.  We are working on blacklist/whitelist directives using wildcards.  Stay tuned.

sent from my android

[Shawn Ligocki]

On Fri, Nov 26, 2010 at 8:22 AM, Integralist <storm...@gmail.com> wrote:

Hi,

I have two questions, the first is a major issue and the second is
very simple and I'm asking because I'm completely new to Linux...

1.) How can I get the Pagespeed module to ignore certain CSS files?
E.g. on most of our websites we have a fonts.css file which includes
custom fonts using @font-face and at the moment the Pagespeed module
refuses to minify ANY of our other style sheets when it encounters
this fonts.css file because technically it's not valid CSS (e.g.
running through the standard W3C validator this font.css file fails
because @font-face is only currently available in CSS3 working draft).

I want to tell the server (either via .htaccess - or by modifying our
httpd config file on the server) to ignore any files called fonts.css
so at least my other stylesheets can be concatenated and minified.

By the way, we will minify any CSS files that we can parse and combine any that don't have a few constraints (aren't different media types, non-first CSS don't have @import, etc.)

So the reason that other CSS files aren't being minified or combined should not be related to the fact that font.css cannot be parsed. You could try making dummy pages with various CSS files linked to see this.

 

2.) I've got the Pagespeed module running for all sites by default, so
what can I put into .htaccess file to get certain websites to disable
or enable specific features?

We are currently working on .htaccess support (right now it does not work), however people have had good luck settting up mod_pagespeed on multiple virtual hosts. See for example: http://www.chriswiegman.com/2010/11/installing-mod_pagespeed-on-individualsites/.

 

Thanks for your help.

Kind regards,
Mark

Cheers,

-Shawn 

[Integralist]

So the @font-face declaration (as far as you are concerned) should be
possible to minify without any issues?

If so I'll put together some tests for this.

Thanks!

M.

On Dec 1, 4:35 am, Shawn Ligocki <sligo...@google.com> wrote:

> virtual hosts. See for example:http://www.chriswiegman.com/2010/11/installing-mod_pagespeed-on-indiv...
> .

[Shawn Ligocki]

No, we will not parse @font-face declarations correctly and thus will not minify them. However, other CSS files that do not contain CSS3 special syntax should be minified correctly. And I think that CSS combiner will combine font.css with others (because it does not parse the CSS, just combine them).

But ti would really help to see an example, can you send a URL? There are many reasons that a CSS file might not be minified or that CSS files might not be combined, etc.

Cheers,
-Shawn

[Integralist]

It seems @font-face is a bug and prevents other stylesheets from being
minified.

See example here: view-source:http://www.bonarhouseclinic.co.uk/dev/

The CSS in the file fonts.css is...

body {
margin:0;
padding:0;
}

/*
Author : Mark McDonnell
Document : Fonts
Created on : 22-09-2010
Description : Sets the custom fonts.
Note : The URLs need to be absolute paths (so double check when
pushing to production server)
*/

body {
background-color:red;
}

@font-face {
font-family: 'AllerItalic';
/*
src: url('/Assets/Fonts/aller_it-webfont.eot');
src: local('☺'), url('/Assets/Fonts/aller_it-webfont.woff')
format('woff'), url('/Assets/Fonts/aller_it-webfont.ttf')
format('truetype'), url('/Assets/Fonts/aller_it-
webfont.svg#webfontfpGpm2yp') format('svg');
font-weight: normal;
font-style: normal;
*/
}

...but if I remove the @font-face rule then the file will be
successfully minified via the pagespeed module.

Can someone please advise on this.

Kind regards,
Mark

On Dec 8, 11:35 am, Integralist <storm.m...@gmail.com> wrote:
> So the @font-face declaration (as far as you are concerned) should be
> possible to minify without any issues?
>
> If so I'll put together some tests for this.
>
> Thanks!
>
> M.
>
> On Dec 1, 4:35 am, Shawn Ligocki <sligo...@google.com> wrote:
>
>
>
>
>
>
>
> > On Fri, Nov 26, 2010 at 8:22 AM, Integralist <storm.m...@gmail.com> wrote:
> > > Hi,
>
> > > I have two questions, the first is a major issue and the second is
> > > very simple and I'm asking because I'm completely new to Linux...
>
> > > 1.) How can I get the Pagespeed module to ignore certainCSSfiles?

> > > E.g. on most of our websites we have a fonts.cssfile which includes

> > > custom fonts using @font-face and at the moment the Pagespeed module
> > > refuses to minify ANY of our other style sheets when it encounters

> > > this fonts.cssfile because technically it's not validCSS(e.g.
> > > running through the standard W3C validator this font.cssfile fails

> > > because @font-face is only currently available in CSS3 working draft).
>
> > > I want to tell the server (either via .htaccess - or by modifying our
> > > httpd config file on the server) to ignore any files called fonts.css
> > > so at least my other stylesheets can be concatenated and minified.
>

> > > By the way, we will minify anyCSSfiles that we can parse and combine any

>
> > that don't have a few constraints (aren't different media types, non-first

> >CSSdon't have @import, etc.)
>
> > So the reason that otherCSSfiles aren't being minified or combined should
> > not be related to the fact that font.csscannot be parsed. You could try
> > making dummy pages with variousCSSfiles linked to see this.

[Joshua Marantz]

The .css file is parsed as a whole.  When we encounter an error parsing a construct in a CSS file, we have to abandon the entire file to avoid corrupting it.

This does not affect mod_pagespeed's ability to minify *other* css files in the same page.  The granularity of the parse is one file.

That said, we are working on adding support for additional draft css3 constructs.  This is tracked in http://code.google.com/p/modpagespeed/issues/detail?id=108 .

-Josh

[Integralist]

I've updated the examples to show what is happening (in response to
your last reply)...

http://www.bonarhouseclinic.co.uk/dev/index.html (this has fonts.css -
which uses @font-face + layout.css + sub.css)
If you view the source you'll see that the files are being combined
but not minified.

http://www.bonarhouseclinic.co.uk/dev/index2.html (this hasn't
included the fonts.css file - which uses @font-face and just includes
layout.css + sub.css)
If you view the source you'll see that the files are being combined
but are successfully minified.

Which indicates there is a problem with your CSS parser and the @font-
face rule (I must have mis-understood Shawn Ligocki's reply and
assumed that @font-face was supported by the current CSS parser, but
that is obviously not the case).

I've also set-up a test where I have 'combine_css' turned off (http://
www.bonarhouseclinic.co.uk/dev/no-combine/index.html) and that
minifies the other two files and leaves the fonts.css file alone, but
the downside is that I now have multiple CSS files in the page
(apposed to one combined one).

I guess the sooner you are able to implement the CSS3 draft into your
CSS parser the better.

Thanks for the time being, I look forward to seeing this being updated
(for the moment I'll have to manually minify the files as I want to
leave combine_css on).

Kind regards,
Mark

[Joshua Marantz]

I see.  The problem is that combine_css runs first. We could run combine_css first (this is not configurable; we'd have to change C++) and that would mean the combined filenames would be longer.  I agree with you -- the better approach is to add more CSS3 support to our parser.  Thanks for the analysis!

Until we increase our CSS3 coverage, my gut feel is that css_combine is more important than CSS minification in the presence of gzip.  We have been adding more CSS3 support lately but not all of it has surfaced yet in the recent binary release.  I'm not sure about @font-face though -- I think that might not have landed yet.

Feel free to add yourself to the CC list for http://code.google.com/p/modpagespeed/issues/detail?id=108 and you'll be notified automatically as we add more capability in that area.

-Josh