Apply new contrast feature syntax (#4250)

* Apply new contrast feature syntax As per: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/ * add notes to changelog --------- Co-authored-by: Stacy Rendall <stacy@abley.com>
maplibre · Jun 12, 2024 · 5202598 · 5202598
1 parent 8c4cef0
commit 5202598
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@
 - ⚠️ Allow breaking lines in labels before a left parenthesis ([#4138](https://github.com/maplibre/maplibre-gl-js/pull/4138))
 - ⚠️ Fix ignoring embedded line breaks when `symbol-placement` is `line` or `line-center` ([#4124](https://github.com/maplibre/maplibre-gl-js/pull/4124))
 - Ensure loseContext exists before calling it ([#4245](https://github.com/maplibre/maplibre-gl-js/pull/4245))
+- Update deprecated `-ms-high-contrast` vendor prefix to `(forced-colors: active)` and `(prefers-color-scheme: light)` as appropriate ([#4250](https://github.com/maplibre/maplibre-gl-js/pull/4250))
 - _...Add new stuff here..._
 
 ## 4.3.2

diff --git a/src/css/maplibre-gl.css b/src/css/maplibre-gl.css
@@ -93,7 +93,7 @@
     box-shadow: 0 0 0 2px rgb(0 0 0 / 10%);
 }
 
-@media (-ms-high-contrast: active) {
+@media (forced-colors: active) {
     .maplibregl-ctrl-group:not(:empty) {
         box-shadow: 0 0 0 2px ButtonText;
     }
@@ -123,7 +123,7 @@
     background-position: center center;
 }
 
-@media (-ms-high-contrast: active) {
+@media (forced-colors: active) {
     .maplibregl-ctrl-icon {
         background-color: transparent;
     }
@@ -184,7 +184,7 @@
     background-image: svg-load("svg/maplibregl-ctrl-zoom-in.svg", fill: #333);
 }
 
-@media (-ms-high-contrast: active) {
+@media (forced-colors: active) {
     .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
         background-image: svg-load("svg/maplibregl-ctrl-zoom-out.svg", fill: #fff);
     }
@@ -194,7 +194,7 @@
     }
 }
 
-@media (-ms-high-contrast: black-on-white) {
+@media (forced-colors: active) and (prefers-color-scheme: light) {
     .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
         background-image: svg-load("svg/maplibregl-ctrl-zoom-out.svg", fill: #000);
     }
@@ -212,7 +212,7 @@
     background-image: svg-load("svg/maplibregl-ctrl-shrink.svg");
 }
 
-@media (-ms-high-contrast: active) {
+@media (forced-colors: active) {
     .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
         background-image: svg-load("svg/maplibregl-ctrl-fullscreen.svg", fill: #fff);
     }
@@ -222,7 +222,7 @@
     }
 }
 
-@media (-ms-high-contrast: black-on-white) {
+@media (forced-colors: active) and (prefers-color-scheme: light) {
     .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
         background-image: svg-load("svg/maplibregl-ctrl-fullscreen.svg", fill: #000);
     }
@@ -236,7 +236,7 @@
     background-image: svg-load("svg/maplibregl-ctrl-compass.svg", fill: #333);
 }
 
-@media (-ms-high-contrast: active) {
+@media (forced-colors: active) {
     .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
         @svg-load ctrl-compass-white url("svg/maplibregl-ctrl-compass.svg") {
             fill: #fff;
@@ -247,7 +247,7 @@
     }
 }
 
-@media (-ms-high-contrast: black-on-white) {
+@media (forced-colors: active) and (prefers-color-scheme: light) {
     .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
         background-image: svg-load("svg/maplibregl-ctrl-compass.svg", fill: #000);
     }
@@ -351,7 +351,7 @@
     animation: maplibregl-spin 2s infinite linear;
 }
 
-@media (-ms-high-contrast: active) {
+@media (forced-colors: active) {
     .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-white);
     }
@@ -377,7 +377,7 @@
     }
 }
 
-@media (-ms-high-contrast: black-on-white) {
+@media (forced-colors: active) and (prefers-color-scheme: light) {
     .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-black);
     }
@@ -407,7 +407,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     width: 14px;
 }
 
-@media (-ms-high-contrast: active) {
+@media (forced-colors: active) {
     a.maplibregl-ctrl-logo {
         @svg-load ctrl-logo-white url("svg/maplibregl-ctrl-logo.svg") {
             #outline { opacity: 1; }
@@ -419,7 +419,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     }
 }
 
-@media (-ms-high-contrast: black-on-white) {
+@media (forced-colors: active) and (prefers-color-scheme: light) {
     a.maplibregl-ctrl-logo {
         @svg-load ctrl-logo-black url("svg/maplibregl-ctrl-logo.svg") {
             #outline { opacity: 1; fill: #fff; stroke: #fff; }
@@ -523,13 +523,13 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     }
 }
 
-@media screen and (-ms-high-contrast: active) {
+@media screen and (forced-colors: active) {
     .maplibregl-ctrl-attrib.maplibregl-compact::after {
         background-image: svg-load("svg/maplibregl-ctrl-attrib.svg", fill=#fff);
     }
 }
 
-@media screen and (-ms-high-contrast: black-on-white) {
+@media screen and (forced-colors: active) and (prefers-color-scheme: light) {
     .maplibregl-ctrl-attrib.maplibregl-compact::after {
         background-image: svg-load("svg/maplibregl-ctrl-attrib.svg");
     }