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

NA

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:

Remaining tasks

  • Do the conversion
  • Test

User interface changes

NA

API changes

NA

Data model changes

NA

Release notes snippet

NA

CommentFileSizeAuthor
#5 interdiff-3327405-3_5.txt687 bytesgauravvvv
#5 3327405-5.patch17.13 KBgauravvvv
#3 3327405-3.patch16.41 KBjitender vaidh
#2 3327405-2.patch0 bytesjitender vaidh

Issue fork drupal-3327405

Command icon Show commands

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

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

About issue forks

Comments

smustgrave created an issue. See original summary.

jitender vaidh’s picture

jitender vaidh
Primary language Hindi
commented
StatusFileSize
new 3327405-2.patch0 bytes

Ignore this patch.

jitender vaidh’s picture

jitender vaidh
Primary language Hindi
commented
Status: Active » Needs review
StatusFileSize
new 3327405-3.patch16.41 KB

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

jitender vaidh’s picture

jitender vaidh
Primary language Hindi
commented
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3327405-5.patch17.13 KB
new interdiff-3327405-3_5.txt687 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.

longwave’s picture

longwave
he/him
Primary language English
Location UK
commented 
+++ 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.

smustgrave’s picture

smustgrave commented
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.

jitender vaidh’s picture

jitender vaidh
Primary language Hindi
commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

For the IS update

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.

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

nayana_mvr opened merge request !9868

nayana_mvr’s picture

nayana_mvr commented
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.

smustgrave’s picture

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

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

Hiding patches for MR.

left a comment on MR.

nayana_mvr’s picture

nayana_mvr commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community

Feedback appears addressed

catch’s picture

catch
he/him
Primary language English
commented
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.

groendijk’s picture

groendijk commented

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

mgifford’s picture

mgifford
he/him
Primary language English
commented
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.

kentr’s picture

kentr commented
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.

mgifford’s picture

mgifford
he/him
Primary language English
commented

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

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.

Read more in the announcement.

kentr’s picture

kentr commented
Status: Needs work » Closed (outdated)

This looks outdated.

I found no cases of the string -ms-high-contrast in core. Edit: Also checked for -ms-high-contrast-adjust.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.