Another point is that regardless of what 4.0 ends up shipping with as default, some people may want the corner banner look for a custom style on 4.0. People are like that. They get different ideas. Some 3.3 styles use a green dot already. Some don't. As long as whatever is used is accessible it doesn't really matter what people want it to look like.
Which got me thinking a bit more. One possible issue with hidden text was mentioned here: Beware smushed off-screen accessible text.
It's an 8 year old article, so I don't know if current screen readers still have this issue, but since MDN still links to it it's probably worth considering. It has implications for the way the default phpBB/FA sr-only spans are done, because they don't declare white-space: nowrap; (I have added it to my custom style).
So, with that in mind, the simplest and most bulletproof way of doing a span with text inside as a green dot would be:
That will cover everything. There's no need for clip-path or any other trickery. The text is already hidden and the dimensions are already limited. Similarly, the sr-only class could be done like this:
Which should be more bulletproof than the current way without requiring any more code.
Which got me thinking a bit more. One possible issue with hidden text was mentioned here: Beware smushed off-screen accessible text.
It's an 8 year old article, so I don't know if current screen readers still have this issue, but since MDN still links to it it's probably worth considering. It has implications for the way the default phpBB/FA sr-only spans are done, because they don't declare white-space: nowrap; (I have added it to my custom style).
So, with that in mind, the simplest and most bulletproof way of doing a span with text inside as a green dot would be:
Code:
.user_online {display: inline-block;width: 1em;height: 1em;overflow: hidden;white-space: nowrap;text-indent: 1em;background: green;border-radius: 50%;}That will cover everything. There's no need for clip-path or any other trickery. The text is already hidden and the dimensions are already limited. Similarly, the sr-only class could be done like this:
Code:
.sr-only {position:absolute;width: 1px;height: 1px;margin: 0;padding: 0;overflow: hidden;white-space: nowrap;border: 0;}Which should be more bulletproof than the current way without requiring any more code.
Statistics: Posted by Gumboots — Sun Sep 08, 2024 9:41 pm