New Landing › How can we help? › Themeforest Theme Support › Flexform › Some Syntax errors in flexform/style.css prevented minification

Viewing 14 posts - 1 through 14 (of 14 total)
  • Back to forum
    Posted in: Flexform
  • July 4, 2013 at 11:31 am #10143
    dekket
    Member
    Post count: 33

    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

    July 4, 2013 at 8:54 pm #10273
    Cosmin – SUPPORT
    Member
    Post count: 3851

    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

    July 4, 2013 at 9:42 pm #10297
    dekket
    Member
    Post count: 33

    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 🙂

    July 5, 2013 at 10:58 am #10359
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Nice work!

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

    – Ed

    July 5, 2013 at 12:07 pm #10374
    dekket
    Member
    Post count: 33

    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 :/

    July 5, 2013 at 12:08 pm #10375
    dekket
    Member
    Post count: 33

    Cudos on the awesome support btw 🙂

    July 5, 2013 at 5:05 pm #10451
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    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

    July 5, 2013 at 5:20 pm #10461
    dekket
    Member
    Post count: 33

    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.. 🙂

    July 5, 2013 at 5:56 pm #10467
    dekket
    Member
    Post count: 33

    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… 🙂

    July 8, 2013 at 11:43 am #10689
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Thanks, fixed those for the next update!

    – Ed

    August 12, 2013 at 11:33 am #15826
    dekket
    Member
    Post count: 33

    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.

    August 12, 2013 at 1:11 pm #15874
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

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

    – Ed

    April 15, 2014 at 11:44 am #67234
    aliossi
    Member
    Post count: 37

    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

    April 15, 2014 at 12:23 pm #67254
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,

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

  • Back to forum
    Posted in: Flexform
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register