1 |
|
2 | /**
|
3 | * 1. IE10 from Windows 7 and legacy Microsoft Edge
|
4 | * Microsoft Edge79 supports the new standards
|
5 | * 2. As with all other keywords, these names are ASCII case-insensitive.
|
6 | * They are shown here with mixed capitalization for legibility.
|
7 | * 3. Use transparent outline instead of removing it,
|
8 | * in forced color modes, you'll get a visual outline,
|
9 | * as the color will be overridden by the system colors.
|
10 | *
|
11 | * https://drafts.csswg.org/css-color-4/#css-system-colors
|
12 | * https://www.a11yproject.com/posts/2020-01-23-operating-system-and-browser-accessibility-display-modes/
|
13 | * https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
|
14 | *
|
15 | * Internet Explorer and legacy Microsoft Edge | New Microsoft Edge and web standards
|
16 | * @media (-ms-high-contrast: active) {} | @media (forced-colors: active) {}
|
17 | * @media (-ms-high-contrast: black-on-white) {} | @media (forced-colors: active) and (prefers-color-scheme: light) {}
|
18 | * @media (-ms-high-contrast: white-on-black) {} | @media (forced-colors: active) and (prefers-color-scheme: dark) {}
|
19 | * -ms-high-contrast-adjust: none; | forced-color-adjust: none;
|
20 | */
|
21 |
|
22 | @media (-ms-high-contrast: active), (forced-colors: active) {
|
23 | .preserveOriginalColors {
|
24 | -ms-high-contrast-adjust: none; /* 1 */
|
25 | forced-color-adjust: none;
|
26 | }
|
27 | .useSystemColors {
|
28 | background-color: Window; /* 1 */
|
29 | background-color: Canvas; /* 2 */
|
30 | border-color: -ms-hotlight; /* 1 */
|
31 | border-color: LinkText;
|
32 | color: WindowText; /* 1 */
|
33 | color: CanvasText;
|
34 | }
|
35 | }
|
36 | @media (prefers-color-scheme: dark) {
|
37 | body {
|
38 | background-color: #000;
|
39 | color: #fff;
|
40 | }
|
41 | }
|
42 | @media (inverted-colors: inverted) {
|
43 | img,
|
44 | video {
|
45 | filter: invert(100%);
|
46 | }
|
47 | }
|
48 | @media (prefers-reduced-motion: reduce) {
|
49 | .anim {
|
50 | animation: none;
|
51 | }
|
52 | }
|
53 |
|
54 | :focus {
|
55 | outline: 2px solid transparent; /* 3 */
|
56 | box-shadow: 0 0 10px 2px rgba(0, 0, 0, .8);
|
57 | }
|
58 |
|