Convert -ms-high-contrast to forced-colors [#3327405]

Problem/Motivation

Follow up from #3321006: Drop -ms- vendor prefixed CSS properties

Microsoft is deprecating -ms-high-contrast and -ms-high-contrast-adjust. We need to update our CSS accordingly.

Steps to reproduce

Proposed resolution

Convert all cases of -ms-high-contrast to forced-colors
Convert all cases of -ms-high-contrast-adjust to forced-color-adjust.

The Microsoft deprecation notice has instructions for conversion, and there are examples in commit ab4a24f9 for #3269341: Claro <details> element not rendering properly in forced colors.

For background images:

Set the background to the appropriate system-color
Specify the original (full-color) SVG image as a CSS mask
Example using mask-image
Example using mask shorthand
Background discussion

Remaining tasks

Do the conversion
Test

User interface changes

API changes

Data model changes

Release notes snippet

Comment	File	Size	Author
#5	interdiff-3327405-3_5.txt	687 bytes	gauravvvv
#5	3327405-5.patch	17.13 KB	gauravvvv
#3	3327405-3.patch	16.41 KB	jitender vaidh
#2	3327405-2.patch	0 bytes	jitender vaidh

Issue fork drupal-3327405

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3327405-remove--ms-high-contrast changes, plain diff MR !9868
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

15 December 2022 at 14:11

smustgrave created an issue. See original summary.

Status	File	Size
new	3327405-2.patch	0 bytes

Comment #3

jitender vaidh

Hindi

commented 27 December 2022 at 13:34

Status:

Active

» Needs review

Status	File	Size
new	3327405-3.patch	16.41 KB

I removed -ms-high-contrast this CSS property from Olivero themes folder.

Comment #4

jitender vaidh

Hindi

commented 27 December 2022 at 13:37

Comment #5

gauravvvv commented 30 December 2022 at 05:21

Status	File	Size
new	3327405-5.patch	17.13 KB
new	interdiff-3327405-3_5.txt	687 bytes

One file drupal/core/themes/stable9/css/core/normalize-fixes.css was left. I have added the updated patch along with interdiff. Please review.

Comment #6

longwave

he/him

English

commented 5 January 2023 at 22:28

+++ b/core/themes/olivero/css/components/fieldset.css
@@ -114,13 +114,6 @@
-@media screen and (-ms-high-contrast: active) {
-
-  .fieldset__error-message {
-    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
-  }
-}
-

I am pretty sure that this one and some similar ones are by design - they provide an alternative version of the image when Windows is in high-contrast mode.

Comment #7

smustgrave commented 8 January 2023 at 23:26

Status:	Needs review	» Needs work
Issue tags:		+Needs issue summary update, +Needs accessibility review

I never filled in the IS complete so that will need to be done.

Comment #6 sounds like this could introduce accessibility issues so those probably should be looked at.

Comment #8

jitender vaidh

Hindi

commented 9 January 2023 at 10:09

Status:

Needs work

» Needs review

Comment #9

smustgrave commented 9 January 2023 at 14:24

Status:

Needs review

» Needs work

For the IS update

Comment #10

9 January 2023 at 14:24

Version:

10.1.x-dev

» 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Comment #11

18 October 2024 at 09:32

nayana_mvr made their first commit to this issue’s fork.

Comment #12

18 October 2024 at 09:45

nayana_mvr opened merge request !9868

Comment #13

nayana_mvr commented 18 October 2024 at 10:11

Issue summary:	View changes
Status:	Needs work	» Needs review

I have re-rolled the patch for D11 and raised MR. Updated TODO items in the Issue Summary. Please check if it's fine.

Comment #14

smustgrave commented 21 October 2024 at 17:14

Status:	Needs review	» Needs work
Issue tags:	-Needs issue summary update, -Needs accessibility review	+Needs Review Queue Initiative

4 files were hidden/shown/deleted

Status	File	Size
hidden	3327405-2.patch	0 bytes
hidden	3327405-3.patch	16.41 KB
hidden	3327405-5.patch	17.13 KB
hidden	interdiff-3327405-3_5.txt	687 bytes

Don't believe accessibility is needed since this is now dropping IE code.

Hiding patches for MR.

left a comment on MR.

Comment #15

nayana_mvr commented 22 October 2024 at 06:11

Status:

Needs work

» Needs review

Comment #16

smustgrave commented 22 October 2024 at 13:28

Status:

Needs review

» Reviewed & tested by the community

Feedback appears addressed

Comment #17

catch

he/him

English

commented 22 October 2024 at 13:37

Status:

Reviewed & tested by the community

» Needs work

No-one responded to @longwave in #6 properly, that should have happened before this was worked on and marked RTBC.

It looks like we should be replacing the media selector with https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast and/or maybe forced-colors, rather than just removing these styles, someone who knows CSS/accessibility things more should confirm though.

Comment #18

groendijk commented 15 January 2025 at 19:15

Came across this issue: https://www.drupal.org/project/drupal/issues/3167032, talking about -ms-high-contrast too.

Comment #19

mgifford

he/him

English

commented 26 February 2025 at 14:51

Issue tags:

+Accessibility

This is now a depreciated tag https://blogs.windows.com/msedgedev/2024/04/29/deprecating-ms-high-contr...

So yes, we should remove this and rebuild the functionality with The forced-colors media query.

Comment #20

kentr commented 30 March 2025 at 02:48

Title:	Potentially remove -ms-high-contrast	» Convert -ms-high-contrast to forced-colors
Issue summary:	View changes
Issue tags:		+forced colors, +high contrast
Related issues:		+#3269341: Claro <details> element not rendering properly in forced colors

Updated the title and IS to reflect that the code must be converted to use forced-colors rather than removed.

RE @longwave's comment, #6:

I suggest converting background image cases to mask-image or mask using the original (full-color) image and using the appropriate system-color as the background.

There are many examples of the technique in Claro. I linked to a couple in the IS.

Comment #21

mgifford

he/him

English

commented 8 July 2025 at 13:21

I like your suggestion around use of mask-image or mask @kentr.

Comment #22

8 July 2025 at 13:21

Version:

11.x-dev

» main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Convert -ms-high-contrast to forced-colors

Problem/Motivation

Steps to reproduce

Proposed resolution

For background images:

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Issue fork drupal-3327405

Comments

Parent issue

Related issues

Referenced by