CSS Combine ignores link media attribute

  • Resolved Gal Baras

    (@galbaras)


    5 years ago

    The only thing active on this site now is CSS Combine, and the page styling is different from the uncombined version. See specifically styles for the product blocks (the li.product elements) on the page, compared to the live page (cached, combined and minified with another plugin).

    To see the source stylesheets, add “?nocache” to the live page URL.

    I think the plugin is combining files included with different values for the media attribute. In this case, it seems to be woocommerce-smallscreen.css, included with media='only screen and (max-width: 768px)' on the page.

    To combine properly, the styles in this file must be wrapped in a media query.

    • This topic was modified 5 years ago by Gal Baras.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • stanley@litespeed

    (@stanleylitespeed)

    Hi @galbaras, woocommerce-smallscreen.css bug is one of the known issues when using CSS combine, so it must be excluded if using CSS combine.

    Thread Starter Gal Baras

    (@galbaras)

    That’s not a solution. It’s a workaround.

    Combined CSS should be kept in the same order it appears on the unoptimized page, because this order matters, and there may be media queries inside some files, while others are broken up into separate inclusions.

    The same thing should hold true for combining scripts, and be observed especially when also including inline styles and/or scripts. Order of appearance matters and must be retained.

    In the days of HTTP/2 and QUIC, having a single combined file does not have a major performance advantage of having a small number of them. Therefore, when encountering a “special” link tag, like the WooCommerce smallscreen stylsheet, the plugin should automatically split things up, while retaining the order of the styles.

    Thread Starter Gal Baras

    (@galbaras)

    In case this wasn’t clear, here’s what happens:

    Unoptimised: some stylesheets (A), small-screen stylesheet (B), other stylesheets (C, which specifically includes the child theme stylesheet with ultimate style overrides).

    Optimised: A+C, then C – resulting in styles from the small-screen stylesheet taking effect on the mobile version of the site, which is incorrect.

    Bottom line: exclusions only work when the order of the stylesheets doesn’t matter. Since the plugin can’t know, it should combine only A, include B, and then combine C separately to keep the correct order of styles.

    Plugin Support LiteSpeed Lisa

    (@lclarke)

    Thank you for the extra information.

    Optimised: A+C, then C

    Did you mean to say “Optimised: A+C, then B?”

    (BTW, I will mark this “resolved” after I hear back RE: that B/C thing. I realize the issue itself is not actually resolved, but it is an issue we have logged internally, and there is a work-around. Marking the topic resolved here keeps the active forum issues easier to find.)

    Thread Starter Gal Baras

    (@galbaras)

    Good catch. I actually meant A+C, then B. The small-screen styles take precedence, and they shouldn’t. They should appear in the order as on the unoptimized page.

    Thread Starter Gal Baras

    (@galbaras)

    This is not resolved yet, because excluding the smallscreen stylesheet gives incorrect results. What should I do (apart from excluding everything that follows the smallscreen CSS file)?

    Plugin Support LiteSpeed Lisa

    (@lclarke)

    We know the issue is not yet actually resolved, but it is an issue we have logged internally, and there is a work-around. Marking the topic resolved here keeps the active forum issues easier to find.

    Right now the only work-around is to turn off CSS Combine.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS Combine ignores link media attribute’ is closed to new replies.