Template:Screen reader-only/styles.css: Difference between revisions
From The Goon Show Depository
m (1 revision imported) |
en>TheDJ (use clip-path) |
||
| Line 17: | Line 17: | ||
border: 0; | border: 0; | ||
clip: rect(0, 0, 0, 0); /* Removed from CSS specification */ | clip: rect(0, 0, 0, 0); /* Removed from CSS specification */ | ||
/* clip-path is the replacement for clip, but very few browsers support it | /* clip-path is the replacement for clip, but very few browsers support it. */ | ||
clip-path: polygon(0px 0px, 0px 0px, 0px 0px); | |||
height: 1px; | height: 1px; | ||
margin: -1px; | margin: -1px; | ||
Revision as of 07:29, 2 May 2023
/* {{pp-template}}
This implementation is from
https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/#showing-additional-content-for-screen-readers
which is a slight tweak from https://accessibility.18f.gov/hidden-content/ .
https://webaim.org/techniques/css/invisiblecontent/#techniques
has slightly different CSS clip, rect (1px) for all dimensions.
WARNING:
Template:Fraction and friends use this styles.css page and class directly rather
than going through the template.
*/
/* We retain .sr-only as the class name because it's used by the outside world. */
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0); /* Removed from CSS specification */
/* clip-path is the replacement for clip, but very few browsers support it. */
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
