[Resolved] Invalid css .generate-back-to-top

[Grant]

Just noticed that the css in all.min.css has a possible incorect value:

.generate-back-to-top:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;speak:none}

Should be either auto, never, always CSS Speech Module

I changed to:
generate-back-to-top:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;speak:auto}

Let me know what you think!

Edit: I had to change the syle.min.css style.css as well. I am probably missing one…
Edit2: Also found:.button.loading:before{content:"\e900";display:inline-block;font-family:"GP Premium";speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;margin-right:7px}.load-more .button:not(.loading)
I am giving up for now trying to find all the changes…

[Tom]

Hi there,

In this case, we can use speak: none, as we don’t want screen readers to try and say the icon (which won’t make sense): https://css-tricks.com/almanac/properties/s/speak/

[Grant]

Right I just can’t find the value of none in any official docs?

That page you linked to shows none however when you click the link on that page to the w3 specs (https://www.w3.org/TR/css3-speech/) it doesn’t show “none” as an option.

I haven’t been able to validate my site since this, what am I missing?

[David]

Hi there,

none is a legacy value, it was replaced in a later CSS spec with never.
So try speak: never;

[Grant]

Okay thanks, I was trying to be safer with auto. I replaced all except for one that I can’t find.
.button.loading:before{content:"\e900";display:inline-block;font-family:"GP Premium";speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;margin-right:7px}

Thanks again,
Grant

[Grant]

Got them all and the site now validates!

Thanks!

[Tom]

Thanks for the heads up! We’ve fixed this in GP 2.5.0 🙂

[Grant]

Thanks Tom I appreciate you and your team.

Cheers!

[Author]

Posts