FOUC

  • Resolved politicske

    (@politicske)


    5 years, 7 months ago

    Hi Robin.

    1. I was having a problem with FOUC for the icons on mobile (they flashed full width as grey icons before adopting the CSS style when the page loaded fully). I figured out how to solve the issue by copying the plugins CSS code (scriptless-social-sharing/includes/css/scriptlesssocialsharing-style.css) to my “Critical CSS Rules” of my optimization plugin. A question though, how often do you change the CSS with each update? I would like to be updated so that I can update the CSS accordingly.
    2. I have decided to only show icons on my website minus text (it looks ‘neat’ that way). But I still want to direct screen readers. How do I show tooltips on hover? (e.g. if I hover on the Facebook icon, it shows “share on Facebook”).

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    The CSS changes are generally indicated in the changelog. On a major release, such as 3.0, which added support for SVG icons and different layouts, there was a lot of change in the CSS file. Minor releases usually won’t change the CSS, unless there is something critical which needs to be adjusted. You can also browse the CSS file history in the SVN browser and see when it was last changed.

    The text on the icon-only buttons is still available to screen reader users–a tooltip is not necessary. The button labels are merely hidden visually with CSS, but not hidden from users of assistive technology. Adding additional text may duplicate the label for these users. If you want to modify the button output, look into the scriptlesssocialsharing_link_markup filter (ref).

    Thread Starter politicske

    (@politicske)

    1. Thanks. I will be checking on this coz I need to update my critical CSS rules every time there is a major update.
    2. This explanation makes sense. Thanks a lot. No need to modify then.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘FOUC’ is closed to new replies.