overflowhidden’s Twitter Archive

Hey 5t3ph — just read this: moderncss.dev/css-button-styling-guide/ If you exclusively use box-shadows for focus, your button won’t have any focus styles in High Contrast Mode. Workaround: outline-style: solid; outline-color: transparent;
On twitter.com ♻️ 1 Retweets ❤️ 1 Favorite 2020 May 14 Mood +2 🙂

…in reply to @overflowhidden
5t3ph That way most users will get box-shadows, while HCM users will get a square outline, as HCM doesn’t respect transparency. (The “outline-style: solid” is necessary for Safari for some reason.)
Permalink On twitter.com 2020 May 14 Mood +2 🙂

…in reply to @overflowhidden
5t3ph Also: if your button has no border, it will most likely just look like text in HCM. Two ways to avoid this: 1) Set a border, that’s the same color as the background, but that can mess with hover-styles. 2) Set a border using the HCM media-query: developer.mozilla.org/en-US/docs/Web/CSS/@media/-ms-high-contrast
Permalink On twitter.com ❤️ 1 Favorite 2020 May 14 Mood -2 🙁

…in reply to @overflowhidden
5t3ph (I gave a talk on accessible buttons at #alldayhey last week — the slides are here: slideshare.net/KimJohannesen/accessible-buttons)
Permalink On twitter.com ❤️ 1 Favorite 2020 May 14 Mood +1 🙂