Aggregating inline CSS changes the site

  • Resolved Gal Baras

    (@galbaras)


    5 years, 2 months ago

    I’m assuming that “Also aggregate inline CSS?” means combining STYLE blocks, before minifying everything, and in theory, the contents of CSS files and STYLE blocks are combined in the order in which they appear in the HTML code.

    In such a case, I would expect to see no difference in how the site looks, but in fact, there is a major difference.

    Compare to the live site [ redundant link removed ], where “Also aggregate inline CSS?” is turned off and everything works OK.

    Full disclosure:

    • The live site uses AO 2.5.1 and the dev site uses 2.6.1, so the latest version doesn’t help.
    • The live site is delivered via Cloudflare, but looks the same in “development mode”, so that’s not a factor either
    • This topic was modified 5 years, 2 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    also aggregate inline CSS of vs on can mean the order of CSS in the aggregated CSS is different. if you site works best with “inline CSS” off, then that is the best choice for you. there is no significant advantage/ disadvantage of having this on of off.

    hope this clarifies,
    frank

    Thread Starter Gal Baras

    (@galbaras)

    Today’s themes rely more and more heavily on inline styling by using the customizer for pretty much everything. This means a lot of unnecessary repetition on every page, and a bad ratio of text to HTML, which is also bad for SEO.

    Seems to me that since CSS order matters, if the option is there, aggregation must retain that order to match the outcome. If rendering gets messed up with this option on, and no speed is gained, why offer it?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Not every option is meant to be ticked, options are there to find the best possible configuration, which is different from site to site.

    If you do want to “also aggregate inline CSS” you probably can by finding & excluding just the right block(s) of inline CSS from CSS optimization, see the AO FAQ for more info on how excluding works.

    have a nice weekend!
    frank

    Thread Starter Gal Baras

    (@galbaras)

    Again, I disagree in principle and so far, you haven’t addressed that principle.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Well, I agree with the principle in principle, but that assumes no errors in the CSS to be aggregated. In your case there is a problem with your mediaqueries in your inline CSS which when aggregated impacts the CSS that follows ??

    @media screen and (max-width:480px){

    appears 2 times, the 2nd time inside the block of the first occurrence and to make things worse this adds an opening { that doesn’t get closed, to the CSS that follows is considered part of a mediaquery as well because of that.

    fix that and the principle will apply ??

    Thread Starter Gal Baras

    (@galbaras)

    Thank you for finding this (took a while to actually track down). It’s coming from the Responsive theme code, so will refer to the respective authors.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    you’re welcome, feel free to leave a review of the plugin and support here! ??

    Thread Starter Gal Baras

    (@galbaras)

    Done. You deserve it.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Aggregating inline CSS changes the site’ is closed to new replies.