Added optional ::selection styling for .window-body children

[vtlanglois]

In this PR

• Added an optional color-highlight¹ class that can apply ::selection styling based on Windows 98 text highlighting styling.¹

💭 Reasoning

Adding this styling can ensure that developers and designers can build a more authentic UI based on Windows 98, down to how text highlighting was styled.

📔 Dev Notes

The decision to make ::selection styling apply thru an optional class was to ensure that a developer would have to consciously choose if they want an area to have W98 selection styling on an element, as there can be significant accessibility impacts² if done.

This also has the benefit of allowing a user of 98.css to choose when and where on a window-body element they want the custom highlight styling to occur, as the use of text-shadow with this custom highlight styling could make some highlights look off.

The foreground and background of this selection styling surpasses WCAG AA and AAA with a contrast ratio of 18.07:1³.

Footnotes

1. Name for class and styling sourced from Windows Interface Guidelines, chapter 13 - Visual Design, page 325 ↩ ↩²

2. https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#accessibility_concerns ↩

3. https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=00005E ↩

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
98css	✅ Ready (Inspect)	Visit Preview	Apr 28, 2024 5:05pm