Getting: Element style not allowed as child of element noscript in this context

  • Resolved newbiedev

    (@newbiedev)


    2 months ago

    Hi Team

    Thanks for the awesome plugin.

    While checking HTML errors on our website, we found that one of the errors is coming when we have enabled Lazy loading of images in Autoptimize.

    Below is the error we are getting in w3 validator:

    1. Error:?Element?style?not allowed as child of element?noscript?in this context. (Suppressing further errors from this subtree.)From line?6, column?65380; to line?6, column?65386<noscript><style>.lazylContexts in which element?style?may be used:Where?metadata content?is expected.In a?noscript?element that is a child of a?head?element.Content model for element?noscript:When?scripting is disabled, in a?head?element: in any order, zero or more?link?elements, zero or more?style?elements, and zero or more?meta?elements.When?scripting is disabled, not in a?head?element:?transparent, but there must be no?noscript?element descendants.Otherwise: text that conforms to the requirements given in the prose.

    So far we have been able to understand it is coming from autoptimize > classes > autoptimizeImages.php where below line is present:

    echo apply_filters( ‘autoptimize_filter_imgopt_lazyload_cssoutput’, ” );

    Can you help us know how to resolve this issue without breaking any other functionalities of Autoptimize. We would like to continue using lazyload for images via your plugin itself.

    Thanks in advance!

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

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

    (@optimizingmatters)

    well, there’s a tradeoff there; if you want people who for whatever reason don’t have javascript active to have an optimal experience, you need that CSS even if W3C’s validator frowns upon it.

    but if you insist you can make that CSS disappear with this code snippet;

    
add_filter( 'autoptimize_filter_imgopt_lazyload_cssoutput', '__return_empty_string' );

    hope this clarifies/ helps,
    frank

    Thread Starter newbiedev

    (@newbiedev)

    Thanks for the revert. Need some clarification on two points:

    1. should I add this code snippet in functions.php?

    2. Alternatively , if I add the noscript lazyload css script in <head> and remove from here in the plugin – would it solve the issue – while at the same time not hampering user experience?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    1. functions.php indeed or you can use the code snippets plugin.

    2. no, as at that point the CSS is applied also for users that do have JS ??

    Thread Starter newbiedev

    (@newbiedev)

    Thanks for the revert

    Continuing on pt-2 above: What if I add the below code to <head> section?

    <noscript><style>.lazyload{display:none;}</style></noscript>
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    I *think* the W3 validator might frown upon <noscript being in <head, but why not give it a try? ??

    Thread Starter newbiedev

    (@newbiedev)

    Here’s the final approach I’ve implemented and it seems to be working fine without any errors from w3 validator

    1. Added below to functions.php

    add_filter( 'autoptimize_filter_imgopt_lazyload_cssoutput', '__return_empty_string' );

    2. Added the below code to <head> section?

    <noscript><style>.lazyload{display:none;}</style></noscript>
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    good job! ??

    Thread Starter newbiedev

    (@newbiedev)

    Thanks for your support!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.