Some Syntax errors in flexform/style.css prevented minification

[dekket]

Google Page Speed was bugging me about the style.css, so I decided to minify it myself without using clunky plugins. I renamed it to .less and compiled it with CodeKit. CodeKit went bat-shit and spat out one syntax after another.
For example, it’s not filter:alpha(opacity: 60); – it should be opacity=60.
It also complained about the -webkit-border-radius. Not sure exactly why, but since Webkit uses border-radius I just removed it.
The biggest hurdle however – and I’m guessing this is why minifying plugins can’t handle the stylesheet – is that the file is actually not clear text. It looks like it and the document encoding looks accurate. But some of the syntax errors CodeKit spat out were just fine. So I added a few line breaks before the rule and re-wrote it, then removed the old one. And then CodeKit didn’t complain anymore. I have a feeling there were some hidden characters that screwed it up.

I’m now running a minified version of the style.css and it’s running just fine.

And Page Speed is no longer complaining – about the CSS anyways 🙂

I’ve also minified css/responsive.css, includes/page-builder/assets/js_composer_front.css.

Any chance you can implement these changes in the final release? You can grab my files if you want, I haven’t done any customization to them other than the minification and what I’ve mentioned above. They’re at:
http://onlinebyran.se/wp-content/themes/flexform/style.css
http://onlinebyran.se/wp-content/themes/flexform/css/responsive.css
http://onlinebyran.se/wp-content/themes/flexform/includes/page-builder/assets/js_composer_front.css

[Cosmin – SUPPORT]

Hey,

Wow, you’re serious about this, good on you 🙂

The file is simply a text file with a .css extension, nothing special in there, all text. Also, filter:alpha(opacity: 60); is valid syntax for Internet Explorer, so I have a few doubts about how well that tool interprets code. (same with -webkit-…., it’s fallback syntax for Webkit browsers – though I agree it really isn’t the case for this for most properties)

Nonetheless, awesome job, thanks for sharing, I’ll shoot a note to Ed about this.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[dekket]

Yes, of course I’m serious – I’m a coder at heart, but I’m also lazy enough that I won’t roll my own theme from scratch unless I’m being paid by the hour 🙂

Yea I know it’s just clear text, but sometimes weird, invisble characters sneak in for some reason. Different editors interpret document encoding differently etc.

Yes, I also assumed the filter syntax was correct, but not according to W3C. The YUI minifier that CodeKit uses is quite picky so the tiniest thing wrong and it’ll throw a fit.

And Thanks 🙂

[Swift Ideas – Ed]

Nice work!

I’ve looked around for the filter css error, but can’t seem to find it. What file was it in?

– Ed

[dekket]

It’s in the flexform/style.css. Search for ‘filter:alpha(opacity’ and it should be there 🙂

I’m sure I can find it when I’m back in the office, no access on the phone :/

[dekket]

Cudos on the awesome support btw 🙂

[Swift Ideas – Ed]

I did a search, but nothing returned with a semi-colon – all had equals signs. Not sure where/how this would have occurred.

You’re welcome!

– Ed

[dekket]

I have now looked in the original files from Themeforest, and I can’t find it either. So strange, since I never touched the flexform/style.css, I just override the styles from the child theme whenever I need to.

I have a feeling that the automatic update did a number on the files.

I’m gonna manually replace all now and see what the results are.. 🙂

[dekket]

Ok so… I have now done a quite thorough investigation into all the syntax errors. Please see screenshot of the CodeKit output 🙂 I’ve included the exact issues in the screenshot. There’s also a screenshot of Coda’s error about Mixed Line endings. Not sure what that is, but perhaps you guys do.

Turns out that there is indeed hidden characters in the file that you simply can’t see. This became apparent on the last error when I used the arrow keys to move the cursor, and it got “stuck” in one instance. It’s clear that it moved one bit but with zero size. So something has screwed up in between computers/editors/whatever. I’m guessing this is a problem with how Coda on Mac interprets file encoding on files edited elsewhere.
I did however find the opacity issues that I couldn’t find before. Turns out there’s a space in between “alpha” and the beginning bracket “(“.
Here are the declarations (pasted exactly):

#top-bar-social > ul {
float: right;
margin-top: 3px;
margin-bottom: 0;
-moz-opacity: 0.5;
filter: alpha(opacity: 50);
opacity: 0.5;
}

.logo-fade #logo a:hover img {
-moz-opacity: 0.6;
filter: alpha(opacity: 60);
opacity: 0.6;
}

It’s now been minified again and all works as it should. I think… 🙂

[Swift Ideas – Ed]

Thanks, fixed those for the next update!

– Ed

[dekket]

Ed, these are not fixed in v1.5…
Not as many perhaps, but still plenty of errors when trying to minify. I didn’t track them all this time though.

[Swift Ideas – Ed]

Apologies, didn’t see the others in the image. Have just been through the rest to check now and sorted them.

– Ed

[aliossi]

Hi,

I just checked my site with a css validation tool, because i am using the flexform the theme as well. On http://jigsaw.w3.org/css-validator/validator?uri=ostseeflug.com&profile=css3&usermedium=all&warning=1&vextwarning=&lang=de i got reported about 848 errors and 1128 warnings. I am not a coder and i am wondering if I am supposed to be worry about it? Lot of theses css files are flexform-files.

http://jigsaw.w3.org/css-validator/validator?uri=ostseeflug.com&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

best regards

Andreas

[Mohammad – SUPPORT]

Hi,

@aliossi – Please dont worry about that . It will not effect your website .
Thanks 🙂
With Best Regards
Swift Ideas