New Rule: no-ms-high-contrast

[NotWoods]

Rule details

Auto fix uses of -ms-high-constrast to forced-colors

What type of rule is this?

Warns about a potential problem

Example code

-ms-high-contrast-adjust: none;
color: WindowText; /* Should be CanvasText */

Participation

• I am willing to submit a pull request to implement this rule.

Additional comments

Additional info: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/

[nzakas]

Thanks for the suggestion. There really isn't enough information in the description to understand what you're suggesting or why. Can you add more details?

[NotWoods]

Sure thing. -ms-high-contrast refers to a family of properties, keywords, and media rules that were used to style in high contrast mode prior to forced-colors getting standardized. Due to how many different niches there are, I felt it made more sense to have it as a dedicated rule rather than a blanket no-vendor-prefixes rule (primarily for the color keywords I'll outline below).

System color keywords

System colors, similar to named colors like rebeccapurple, can be used anywhere a color value is supported in CSS.

a {
  color: LinkText;
}

Various system colors were used with -ms-high-contrast and have been replaced.

Theme color in Windows high contrast settings	Internet Explorer and Microsoft Edge Legacy	New Microsoft Edge and web standards
Text	WindowText	CanvasText
Hyperlinks	-ms-hotlight	LinkText
Disabled Text	GrayText
Selected Text	HighlightText (foreground), Highlight (background)	HighlightText (foreground), Highlight (background)
Button Text	ButtonText (foreground), ButtonFace (background)	ButtonText (foreground), ButtonFace (background)
Background	Window	Canvas

The linter rule should ban these values and autofix to the modern equivalent. A possible enhancement is to allow the deprecated values as fallbacks (maybe using a rule option like allowFallback).

Before

a {
  color: -ms-hotlight;
}

After

a {
  color: LinkText;
}

/* or with allowFallback */
a {
  color: -ms-hotlight;
  color: LinkText;
}

Going through the docs to find this table, I stumbled on additional deprecated CSS system colors. So maybe this should be its own dedicated no-deprecated-system-colors rule instead.

Property

This one is fairly straightforward. The -ms-high-contrast-adjust property was standardized into forced-colors-adjust. Both use auto and none as the possible values.

Before

img {
  -ms-high-contrast-adjust: none;
}

After

img {
  forced-color-adjust: none;
}

/* or with allowFallback */
img {
  -ms-high-contrast-adjust: none;
  forced-color-adjust: none;
}

Media query

The -ms-high-contast query has been split into forced-colors and prefers-color-scheme.

Internet Explorer and legacy Microsoft Edge	New Microsoft Edge and web standards
@media (-ms-high-contrast: active) {}	@media (forced-colors: active) {}
@media (-ms-high-contrast: black-on-white) {}	@media (forced-colors: active) and (prefers-color-scheme: light) {}
@media (-ms-high-contrast: white-on-black) {}	@media (forced-colors: active) and (prefers-color-scheme: dark) {}

There is also a prefers-contrast media query but I haven't seen it advocated for much.

[nzakas]

Thanks for the additional detail, this is very helpful. I'm curious how long ago -ms-high-contrast was superseded? Just weighing the value of having a rule that is only picking up older, outdated things that people may not run into that much.

[NotWoods]

For what it's worth, I've had to catch this manually in 5+ PRs over the past year. (But I also work at Microsoft where we're more likely to support high contrast mode.) prefers-forced-colors was added in Chrome 89 three years ago.

To be more generalized, this proposal could be split into no-deprecated-system-colors and no-vendor-prefixes. Both of these possible rules can have suggestions or autofixes to use the standardized alternatives.

[nzakas]

To be more generalized, this proposal could be split into no-deprecated-system-colors and no-vendor-prefixes. Both of these possible rules can have suggestions or autofixes to use the standardized alternatives.

no-deprecated-system-colors - I also wonder if this would be too specific. Are there other values besides system colors that have been deprecated? Would it better to have a no-deprecated-values rule?

no-vendor-prefixes - I'm not quite sure what this might do. The name sounds like it would ban all vendor prefixes, but from the context of this conversation, it seems like maybe your intent was to flag properties where vendor prefixes are no longer needed?

And keep in mind, just like JavaScript rules, you can always create your own custom rules to do whatever you want. My goal here is to ensure this plugin has rules that are as widely-applicable as possible.