Inlined style in HTML

  • Resolved gabu69

    (@gabu69)


    3 years ago

    Noticed the plugin is adding an inline style into the html: https://i.imgur.com/AH1h7Pr.jpg

    Had couple of questions and suggetions:
    1) Is this necessary? whats the point of this inline style? (sorry if the questions are stupid or basic, im newbie to css but still think it has room for improvement)
    2) Can this be minified automatically by the plugin in case its compulsory?

    <style>@-webkit-keyframes bgslide{from{background-position-x: 0;}to{background-position-x: -200%;}}@keyframes bgslide{from{background-position-x: 0;}to{background-position-x: -200%;}}.wpp-widget-placeholder{margin: 0 auto; width: 60px; height: 3px; background: #dd3737; background: -webkit-gradient(linear, left top, right top, from(#dd3737), color-stop(10%, #571313), to(#dd3737)); background: linear-gradient(90deg, #dd3737 0%, #571313 10%, #dd3737 100%); background-size: 200% auto; border-radius: 3px; -webkit-animation: bgslide 1s infinite linear; animation: bgslide 1s infinite linear;}</style>

    3) Can it have an id to identify it fast for anybody where it comes from?
    <style id=”wpp-inline”> or whatever it can be for fast identification and manipulation just in case?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    Hi @gabu69,

    1) Is this necessary? whats the point of this inline style?

    That inline CSS code is used by the loading animation that your popular posts displays when you’re using the “Ajaxify Widget” option (which is enabled by default, see Settings > WordPress Popular Posts > Tools) to indicate that the list is, well, loading ??

    P.S.: I just realized that that loading animation is missing from the WordPress Popular Posts block. Will add it back on the next release (see #317).

    (sorry if the questions are stupid or basic, im newbie to css but still think it has room for improvement)

    Don’t worry, these are valid questions.

    2) Can this be minified automatically by the plugin in case its compulsory?

    Yep, no problem.

    3) Can it have an id to identify it fast for anybody where it comes from? <style id="wpp-inline"> or whatever it can be for fast identification and manipulation just in case?

    Yes, I can do that too.

    Thread Starter gabu69

    (@gabu69)

    I have the ajax widget disabled but data sampling enabled, I still see that active:
    Should that inline css still be active?

    I also see active the ajax_url:
    {“sampling_active”:1,”sampling_rate”:40,”ajax_url”:”https:\/\/www.site.com\/wp-json\/wordpress-popular-posts\/v1\/popular-posts”,”api_url”:”https:\/\/www.site.com\/wp-json\/wordpress-popular-posts”,”ID”:519561,”token”:”xxxxx”,”lang”:0,”debug”:0}
    Is that because the data sampling enabled?

    This are my options:

    View post on imgur.com

    Plugin Author Hector Cabrera

    (@hcabrera)

    Should that inline css still be active?

    I’ll correct myself: yes, that inline <style> tag is always present regardless of the “Ajaxify widget” option being enabled or not. I should probably change that.

    Is that because the data sampling enabled?

    Nope, that’s unrelated.

    Thread Starter gabu69

    (@gabu69)

    I’ll correct myself: yes, that inline <style> tag is always present regardless of the “Ajaxify widget” option being enabled or not. I should probably change that.

    Thanks, and great plugin as usual Hector

    Plugin Author Hector Cabrera

    (@hcabrera)

    Hey @gabu69, a quick FYI: Minify, clean up, and identify WPP’s loading animation inline style tag.

    Thread Starter gabu69

    (@gabu69)

    Thanks a lot Hector, later on will be done automatically by the plugin right?

    Thanks

    Plugin Author Hector Cabrera

    (@hcabrera)

    Yep, that’s correct.

    Plugin Author Hector Cabrera

    (@hcabrera)

    Hey there!

    Just a quick heads-up to let you know that the new update is out for everyone. It includes the change discussed above.

    Thanks for contributing!

    Thread Starter gabu69

    (@gabu69)

    Hi Hector,

    Thanks for the amazing support, just updated but when ajax is enabled the style is still in the html, atltho it now has id and its minified

    <style id="wpp-loading-animation-styles">@-webkit-keyframes bgslide{from{background-position-x:0}to{background-position-x:-200%}}@keyframes bgslide{from{background-position-x:0}to{background-position-x:-200%}}.wpp-widget-placeholder,.wpp-widget-block-placeholder{margin:0 auto;width:60px;height:3px;background:#dd3737;background:linear-gradient(90deg,#dd3737 0%,#571313 10%,#dd3737 100%);background-size:200% auto;border-radius:3px;-webkit-animation:bgslide 1s infinite linear;animation:bgslide 1s infinite linear}</style>

    • This reply was modified 2 years, 10 months ago by gabu69.
    • This reply was modified 2 years, 10 months ago by gabu69.
    Plugin Author Hector Cabrera

    (@hcabrera)

    Yep, the <style> tag is always printed onto <head>, see my previous comment. I didn’t change the current behavior.

    Plugin Author Hector Cabrera

    (@hcabrera)

    If you want to remove it though see wpp_insert_loading_animation_styles.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Inlined style in HTML’ is closed to new replies.

Tags