diff --git a/.stylelintrc b/.stylelintrc
index 8fa0d8ebfe..3446b0006e 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -5,7 +5,7 @@
     "declaration-block-semicolon-newline-after": "always-multi-line",
     "block-opening-brace-space-before": "always-multi-line",
     "declaration-block-single-line-max-declarations": 3,
-    "selector-class-pattern": "maplibregl-[a-z-]+",
+    "selector-class-pattern": "map(box|libre)gl-[a-z-]+",
     "at-rule-no-unknown": [true, {
       "ignoreAtRules": ["svg-load"]
     }]
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f9c9a87aa9..2df23c03b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 ### 🐞 Bug fixes
 
 - *...Add new stuff here...*
+- Fix breaking changes introduced in v1.15.0 by adoption dual naming scheme for CSS class names
 
 ## 1.15.1
 
diff --git a/README.md b/README.md
index 157f16dde5..996be44784 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ If you depend on mapbox-gl directly, simply replace `mapbox-gl` with `maplibre-g
   }
 ```
 
-And replace ```mapboxgl``` with ```maplibregl``` in your JavaScript/HTML/CSS code:
+And replace ```mapboxgl``` with ```maplibregl``` in your JavaScript and optionannly in your HTML/CSS code:
 ```diff
 -    var map = new mapboxgl.Map({
 +    var map = new maplibregl.Map({
diff --git a/src/css/maplibre-gl.css b/src/css/maplibre-gl.css
index 683ccec056..cd22e95405 100644
--- a/src/css/maplibre-gl.css
+++ b/src/css/maplibre-gl.css
@@ -1,23 +1,28 @@
-.maplibregl-map {
+.maplibregl-map,
+.mapboxgl-map {
     font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
     overflow: hidden;
     position: relative;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.maplibregl-canvas {
+.maplibregl-canvas,
+.mapboxgl-canvas {
     position: absolute;
     left: 0;
     top: 0;
 }
 
-.maplibregl-map:-webkit-full-screen {
+.maplibregl-map:-webkit-full-screen,
+.mapboxgl-map:-webkit-full-screen {
     width: 100%;
     height: 100%;
 }
 
 .maplibregl-canvas-container.maplibregl-interactive,
-.maplibregl-ctrl-group button.maplibregl-ctrl-compass {
+.maplibregl-ctrl-group button.maplibregl-ctrl-compass,
+.mapboxgl-canvas-container.mapboxgl-interactive,
+.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
     cursor: -webkit-grab;
     cursor: -moz-grab;
     cursor: grab;
@@ -27,71 +32,105 @@
     user-select: none;
 }
 
-.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer {
+.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer,
+.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
     cursor: pointer;
 }
 
 .maplibregl-canvas-container.maplibregl-interactive:active,
-.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active {
+.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active,
+.mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
     cursor: -webkit-grabbing;
     cursor: -moz-grabbing;
     cursor: grabbing;
 }
 
 .maplibregl-canvas-container.maplibregl-touch-zoom-rotate,
-.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas {
+.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas,
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
     touch-action: pan-x pan-y;
 }
 
 .maplibregl-canvas-container.maplibregl-touch-drag-pan,
-.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas {
+.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas,
+.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
     touch-action: pinch-zoom;
 }
 
 .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,
-.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas {
+.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas,
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
     touch-action: none;
 }
 
 .maplibregl-ctrl-top-left,
 .maplibregl-ctrl-top-right,
 .maplibregl-ctrl-bottom-left,
-.maplibregl-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; }
-.maplibregl-ctrl-top-left     { top: 0; left: 0; }
-.maplibregl-ctrl-top-right    { top: 0; right: 0; }
-.maplibregl-ctrl-bottom-left  { bottom: 0; left: 0; }
-.maplibregl-ctrl-bottom-right { right: 0; bottom: 0; }
+.maplibregl-ctrl-bottom-right,
+.mapboxgl-ctrl-top-left,
+.mapboxgl-ctrl-top-right,
+.mapboxgl-ctrl-bottom-left,
+.mapboxgl-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; }
 
-.maplibregl-ctrl {
+.maplibregl-ctrl-top-left,
+.mapboxgl-ctrl-top-left     { top: 0; left: 0; }
+
+.maplibregl-ctrl-top-right,
+.mapboxgl-ctrl-top-right    { top: 0; right: 0; }
+
+.maplibregl-ctrl-bottom-left,
+.mapboxgl-ctrl-bottom-left  { bottom: 0; left: 0; }
+
+.maplibregl-ctrl-bottom-right,
+.mapboxgl-ctrl-bottom-right { right: 0; bottom: 0; }
+
+.maplibregl-ctrl,
+.mapboxgl-ctrl {
     clear: both;
     pointer-events: auto;
 
     /* workaround for a Safari bug https://github.com/mapbox/mapbox-gl-js/issues/8185 */
     transform: translate(0, 0);
 }
-.maplibregl-ctrl-top-left .maplibregl-ctrl     { margin: 10px 0 0 10px; float: left; }
-.maplibregl-ctrl-top-right .maplibregl-ctrl    { margin: 10px 10px 0 0; float: right; }
-.maplibregl-ctrl-bottom-left .maplibregl-ctrl  { margin: 0 0 10px 10px; float: left; }
-.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 10px 10px 0; float: right; }
 
-.maplibregl-ctrl-group {
+.maplibregl-ctrl-top-left .maplibregl-ctrl,
+.mapboxgl-ctrl-top-left .mapboxgl-ctrl     { margin: 10px 0 0 10px; float: left; }
+
+.maplibregl-ctrl-top-right .maplibregl-ctrl,
+.mapboxgl-ctrl-top-right .mapboxgl-ctrl    { margin: 10px 10px 0 0; float: right; }
+
+.maplibregl-ctrl-bottom-left .maplibregl-ctrl,
+.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl  { margin: 0 0 10px 10px; float: left; }
+
+.maplibregl-ctrl-bottom-right .maplibregl-ctrl,
+.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 10px 10px 0; float: right; }
+
+.maplibregl-ctrl-group,
+.mapboxgl-ctrl-group {
     border-radius: 4px;
     background: #fff;
 }
 
-.maplibregl-ctrl-group:not(:empty) {
+.maplibregl-ctrl-group:not(:empty),
+.mapboxgl-ctrl-group:not(:empty) {
     -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
 
 @media (-ms-high-contrast: active) {
-    .maplibregl-ctrl-group:not(:empty) {
+    .maplibregl-ctrl-group:not(:empty),
+    .mapboxgl-ctrl-group:not(:empty) {
         box-shadow: 0 0 0 2px ButtonText;
     }
 }
 
-.maplibregl-ctrl-group button {
+.maplibregl-ctrl-group button,
+.mapboxgl-ctrl-group button {
     width: 29px;
     height: 29px;
     display: block;
@@ -103,11 +142,13 @@
     cursor: pointer;
 }
 
-.maplibregl-ctrl-group button + button {
+.maplibregl-ctrl-group button + button,
+.mapboxgl-ctrl-group button + button {
     border-top: 1px solid #ddd;
 }
 
-.maplibregl-ctrl button .maplibregl-ctrl-icon {
+.maplibregl-ctrl button .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
     display: block;
     width: 100%;
     height: 100%;
@@ -116,120 +157,147 @@
 }
 
 @media (-ms-high-contrast: active) {
-    .maplibregl-ctrl-icon {
+    .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl-icon {
         background-color: transparent;
     }
 
-    .maplibregl-ctrl-group button + button {
+    .maplibregl-ctrl-group button + button,
+    .mapboxgl-ctrl-group button + button {
         border-top: 1px solid ButtonText;
     }
 }
 
 /* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
-.maplibregl-ctrl button::-moz-focus-inner {
+.maplibregl-ctrl button::-moz-focus-inner,
+.mapboxgl-ctrl button::-moz-focus-inner {
     border: 0;
     padding: 0;
 }
 
 .maplibregl-ctrl-attrib-button:focus,
-.maplibregl-ctrl-group button:focus {
+.maplibregl-ctrl-group button:focus,
+.mapboxgl-ctrl-attrib-button:focus,
+.mapboxgl-ctrl-group button:focus {
     box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
 }
 
-.maplibregl-ctrl button:disabled {
+.maplibregl-ctrl button:disabled,
+.mapboxgl-ctrl button:disabled {
     cursor: not-allowed;
 }
 
-.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon {
+.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
     opacity: 0.25;
 }
 
-.maplibregl-ctrl button:not(:disabled):hover {
+.maplibregl-ctrl button:not(:disabled):hover,
+.mapboxgl-ctrl button:not(:disabled):hover {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
-.maplibregl-ctrl-group button:focus:focus-visible {
+.maplibregl-ctrl-group button:focus:focus-visible,
+.mapboxgl-ctrl-group button:focus:focus-visible {
     box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
 }
 
-.maplibregl-ctrl-group button:focus:not(:focus-visible) {
+.maplibregl-ctrl-group button:focus:not(:focus-visible),
+.mapboxgl-ctrl-group button:focus:not(:focus-visible) {
     box-shadow: none;
 }
 
-.maplibregl-ctrl-group button:focus:first-child {
+.maplibregl-ctrl-group button:focus:first-child,
+.mapboxgl-ctrl-group button:focus:first-child {
     border-radius: 4px 4px 0 0;
 }
 
-.maplibregl-ctrl-group button:focus:last-child {
+.maplibregl-ctrl-group button:focus:last-child,
+.mapboxgl-ctrl-group button:focus:last-child {
     border-radius: 0 0 4px 4px;
 }
 
-.maplibregl-ctrl-group button:focus:only-child {
+.maplibregl-ctrl-group button:focus:only-child,
+.mapboxgl-ctrl-group button:focus:only-child {
     border-radius: inherit;
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
     background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #333);
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
     background-image: svg-load('svg/maplibregl-ctrl-zoom-in.svg', fill: #333);
 }
 
 @media (-ms-high-contrast: active) {
-    .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #fff);
     }
 
-    .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-zoom-in.svg', fill: #fff);
     }
 }
 
 @media (-ms-high-contrast: black-on-white) {
-    .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #000);
     }
 
-    .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-zoom-in.svg', fill: #000);
     }
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
     background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #333);
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
     background-image: svg-load('svg/maplibregl-ctrl-shrink.svg');
 }
 
 @media (-ms-high-contrast: active) {
-    .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #fff);
     }
 
-    .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-shrink.svg', fill: #fff);
     }
 }
 
 @media (-ms-high-contrast: black-on-white) {
-    .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #000);
     }
 
-    .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-shrink.svg', fill: #000);
     }
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
     background-image: svg-load('svg/maplibregl-ctrl-compass.svg', fill: #333);
 }
 
 @media (-ms-high-contrast: active) {
-    .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
         @svg-load ctrl-compass-white url(svg/maplibregl-ctrl-compass.svg) {
             fill: #fff;
             #south { fill: #999; }
@@ -240,7 +308,8 @@
 }
 
 @media (-ms-high-contrast: black-on-white) {
-    .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-compass.svg', fill: #000);
     }
 }
@@ -297,31 +366,38 @@
     #dot { display: none; }
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate);
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate-disabled);
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate-active);
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate-active-error);
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate-background);
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate-background-error);
 }
 
-.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon,
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon {
     -webkit-animation: maplibregl-spin 2s infinite linear;
     -moz-animation: maplibregl-spin 2s infinite linear;
     -o-animation: maplibregl-spin 2s infinite linear;
@@ -330,37 +406,45 @@
 }
 
 @media (-ms-high-contrast: active) {
-    .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-white);
     }
 
-    .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-disabled-white);
     }
 
-    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-active);
     }
 
-    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-active-error);
     }
 
-    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-background);
     }
 
-    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-background-error);
     }
 }
 
 @media (-ms-high-contrast: black-on-white) {
-    .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-black);
     }
 
-    .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon,
+    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-disabled-black);
     }
 }
@@ -390,7 +474,8 @@
     100% { transform: rotate(360deg); }
 }
 
-a.maplibregl-ctrl-logo {
+a.maplibregl-ctrl-logo,
+a.mapboxgl-ctrl-logo {
     width: 88px;
     height: 23px;
     margin: 0 0 -4px -4px;
@@ -401,12 +486,14 @@ a.maplibregl-ctrl-logo {
     background-image: svg-load('svg/maplibregl-ctrl-logo.svg');
 }
 
-a.maplibregl-ctrl-logo.maplibregl-compact {
+a.maplibregl-ctrl-logo.maplibregl-compact,
+a.mapboxgl-ctrl-logo.mapboxgl-compact {
     width: 14px;
 }
 
 @media (-ms-high-contrast: active) {
-    a.maplibregl-ctrl-logo {
+    a.maplibregl-ctrl-logo,
+    a.mapboxgl-ctrl-logo {
         @svg-load ctrl-logo-white url(svg/maplibregl-ctrl-logo.svg) {
             #outline { opacity: 1; }
             #fill { opacity: 1; }
@@ -418,7 +505,8 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
 }
 
 @media (-ms-high-contrast: black-on-white) {
-    a.maplibregl-ctrl-logo {
+    a.maplibregl-ctrl-logo,
+    a.mapboxgl-ctrl-logo {
         @svg-load ctrl-logo-black url(svg/maplibregl-ctrl-logo.svg) {
             #outline { opacity: 1; fill: #fff; stroke: #fff; }
             #fill { opacity: 1; fill: #000; }
@@ -428,14 +516,16 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     }
 }
 
-.maplibregl-ctrl.maplibregl-ctrl-attrib {
+.maplibregl-ctrl.maplibregl-ctrl-attrib,
+.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
     padding: 0 5px;
     background-color: rgba(255, 255, 255, 0.5);
     margin: 0;
 }
 
 @media screen {
-    .maplibregl-ctrl-attrib.maplibregl-compact {
+    .maplibregl-ctrl-attrib.maplibregl-compact,
+    .mapboxgl-ctrl-attrib.mapboxgl-compact {
         min-height: 20px;
         padding: 2px 24px 2px 0;
         margin: 10px;
@@ -444,22 +534,27 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
         border-radius: 12px;
     }
 
-    .maplibregl-ctrl-attrib.maplibregl-compact-show {
+    .maplibregl-ctrl-attrib.maplibregl-compact-show,
+    .mapboxgl-ctrl-attrib.mapboxgl-compact-show {
         padding: 2px 28px 2px 8px;
         visibility: visible;
     }
 
     .maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact-show,
-    .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact-show {
+    .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact-show,
+    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show,
+    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show {
         padding: 2px 8px 2px 28px;
         border-radius: 12px;
     }
 
-    .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner {
+    .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner,
+    .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
         display: none;
     }
 
-    .maplibregl-ctrl-attrib-button {
+    .maplibregl-ctrl-attrib-button,
+    .mapboxgl-ctrl-attrib-button {
         display: none;
         cursor: pointer;
         position: absolute;
@@ -476,73 +571,90 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     }
 
     .maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button,
-    .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button {
+    .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button,
+    .mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button,
+    .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button {
         left: 0;
     }
 
     .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,
-    .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
+    .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner,
+    .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,
+    .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner {
         display: block;
     }
 
-    .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
+    .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button,
+    .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button {
         background-color: rgba(0, 0, 0, 0.05);
     }
 
-    .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact::after {
+    .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact::after,
+    .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
         bottom: 0;
         right: 0;
     }
 
-    .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib.maplibregl-compact::after {
+    .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib.maplibregl-compact::after,
+    .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
         top: 0;
         right: 0;
     }
 
-    .maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact::after {
+    .maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact::after,
+    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
         top: 0;
         left: 0;
     }
 
-    .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact::after {
+    .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact::after,
+    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
         bottom: 0;
         left: 0;
     }
 }
 
 @media screen and (-ms-high-contrast: active) {
-    .maplibregl-ctrl-attrib.maplibregl-compact::after {
+    .maplibregl-ctrl-attrib.maplibregl-compact::after,
+    .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
         background-image: svg-load('svg/maplibregl-ctrl-attrib.svg', fill=#fff);
     }
 }
 
 @media screen and (-ms-high-contrast: black-on-white) {
-    .maplibregl-ctrl-attrib.maplibregl-compact::after {
+    .maplibregl-ctrl-attrib.maplibregl-compact::after,
+    .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
         background-image: svg-load('svg/maplibregl-ctrl-attrib.svg');
     }
 }
 
-.maplibregl-ctrl-attrib a {
+.maplibregl-ctrl-attrib a,
+.mapboxgl-ctrl-attrib a {
     color: rgba(0, 0, 0, 0.75);
     text-decoration: none;
 }
 
-.maplibregl-ctrl-attrib a:hover {
+.maplibregl-ctrl-attrib a:hover,
+.mapboxgl-ctrl-attrib a:hover {
     color: inherit;
     text-decoration: underline;
 }
 
-/* stylelint-disable-next-line selector-class-pattern */
-.maplibregl-ctrl-attrib .mapbox-improve-map {
+/* stylelint-disable selector-class-pattern */
+.maplibregl-ctrl-attrib .mapbox-improve-map,
+.mapboxgl-ctrl-attrib .mapbox-improve-map {
     font-weight: bold;
     margin-left: 2px;
 }
+/* stylelint-enable selector-class-pattern */
 
-.maplibregl-attrib-empty {
+.maplibregl-attrib-empty,
+.mapboxgl-attrib-empty {
     display: none;
 }
 
-.maplibregl-ctrl-scale {
+.maplibregl-ctrl-scale,
+.mapboxgl-ctrl-scale {
     background-color: rgba(255, 255, 255, 0.75);
     font-size: 10px;
     border-width: medium 2px 2px;
@@ -553,7 +665,8 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     box-sizing: border-box;
 }
 
-.maplibregl-popup {
+.maplibregl-popup,
+.mapboxgl-popup {
     position: absolute;
     top: 0;
     left: 0;
@@ -565,43 +678,54 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
 
 .maplibregl-popup-anchor-top,
 .maplibregl-popup-anchor-top-left,
-.maplibregl-popup-anchor-top-right {
+.maplibregl-popup-anchor-top-right,
+.mapboxgl-popup-anchor-top,
+.mapboxgl-popup-anchor-top-left,
+.mapboxgl-popup-anchor-top-right {
     -webkit-flex-direction: column;
     flex-direction: column;
 }
 
 .maplibregl-popup-anchor-bottom,
 .maplibregl-popup-anchor-bottom-left,
-.maplibregl-popup-anchor-bottom-right {
+.maplibregl-popup-anchor-bottom-right,
+.mapboxgl-popup-anchor-bottom,
+.mapboxgl-popup-anchor-bottom-left,
+.mapboxgl-popup-anchor-bottom-right {
     -webkit-flex-direction: column-reverse;
     flex-direction: column-reverse;
 }
 
-.maplibregl-popup-anchor-left {
+.maplibregl-popup-anchor-left,
+.mapboxgl-popup-anchor-left {
     -webkit-flex-direction: row;
     flex-direction: row;
 }
 
-.maplibregl-popup-anchor-right {
+.maplibregl-popup-anchor-right,
+.mapboxgl-popup-anchor-right {
     -webkit-flex-direction: row-reverse;
     flex-direction: row-reverse;
 }
 
-.maplibregl-popup-tip {
+.maplibregl-popup-tip,
+.mapboxgl-popup-tip {
     width: 0;
     height: 0;
     border: 10px solid transparent;
     z-index: 1;
 }
 
-.maplibregl-popup-anchor-top .maplibregl-popup-tip {
+.maplibregl-popup-anchor-top .maplibregl-popup-tip,
+.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
     -webkit-align-self: center;
     align-self: center;
     border-top: none;
     border-bottom-color: #fff;
 }
 
-.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
+.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
     -webkit-align-self: flex-start;
     align-self: flex-start;
     border-top: none;
@@ -609,7 +733,8 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     border-bottom-color: #fff;
 }
 
-.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
+.maplibregl-popup-anchor-top-right .maplibregl-popup-tip,
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
     -webkit-align-self: flex-end;
     align-self: flex-end;
     border-top: none;
@@ -617,14 +742,16 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     border-bottom-color: #fff;
 }
 
-.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
+.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
+.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
     -webkit-align-self: center;
     align-self: center;
     border-bottom: none;
     border-top-color: #fff;
 }
 
-.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
+.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
     -webkit-align-self: flex-start;
     align-self: flex-start;
     border-bottom: none;
@@ -632,7 +759,8 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     border-top-color: #fff;
 }
 
-.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
+.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip,
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
     -webkit-align-self: flex-end;
     align-self: flex-end;
     border-bottom: none;
@@ -640,21 +768,24 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     border-top-color: #fff;
 }
 
-.maplibregl-popup-anchor-left .maplibregl-popup-tip {
+.maplibregl-popup-anchor-left .maplibregl-popup-tip,
+.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
     -webkit-align-self: center;
     align-self: center;
     border-left: none;
     border-right-color: #fff;
 }
 
-.maplibregl-popup-anchor-right .maplibregl-popup-tip {
+.maplibregl-popup-anchor-right .maplibregl-popup-tip,
+.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
     -webkit-align-self: center;
     align-self: center;
     border-right: none;
     border-left-color: #fff;
 }
 
-.maplibregl-popup-close-button {
+.maplibregl-popup-close-button,
+.mapboxgl-popup-close-button {
     position: absolute;
     right: 0;
     top: 0;
@@ -664,11 +795,13 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     background-color: transparent;
 }
 
-.maplibregl-popup-close-button:hover {
+.maplibregl-popup-close-button:hover,
+.mapboxgl-popup-close-button:hover {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
-.maplibregl-popup-content {
+.maplibregl-popup-content,
+.mapboxgl-popup-content {
     position: relative;
     background: #fff;
     border-radius: 3px;
@@ -677,54 +810,65 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     pointer-events: auto;
 }
 
-.maplibregl-popup-anchor-top-left .maplibregl-popup-content {
+.maplibregl-popup-anchor-top-left .maplibregl-popup-content,
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content {
     border-top-left-radius: 0;
 }
 
-.maplibregl-popup-anchor-top-right .maplibregl-popup-content {
+.maplibregl-popup-anchor-top-right .maplibregl-popup-content,
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
     border-top-right-radius: 0;
 }
 
-.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content {
+.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content,
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content {
     border-bottom-left-radius: 0;
 }
 
-.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content {
+.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content,
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
     border-bottom-right-radius: 0;
 }
 
-.maplibregl-popup-track-pointer {
+.maplibregl-popup-track-pointer,
+.mapboxgl-popup-track-pointer {
     display: none;
 }
 
-.maplibregl-popup-track-pointer * {
+.maplibregl-popup-track-pointer *,
+.mapboxgl-popup-track-pointer * {
     pointer-events: none;
     user-select: none;
 }
 
-.maplibregl-map:hover .maplibregl-popup-track-pointer {
+.maplibregl-map:hover .maplibregl-popup-track-pointer,
+.mapboxgl-map:hover .mapboxgl-popup-track-pointer {
     display: flex;
 }
 
-.maplibregl-map:active .maplibregl-popup-track-pointer {
+.maplibregl-map:active .maplibregl-popup-track-pointer,
+.mapboxgl-map:active .mapboxgl-popup-track-pointer {
     display: none;
 }
 
-.maplibregl-marker {
+.maplibregl-marker,
+.mapboxgl-marker {
     position: absolute;
     top: 0;
     left: 0;
     will-change: transform;
 }
 
-.maplibregl-user-location-dot {
+.maplibregl-user-location-dot,
+.mapboxgl-user-location-dot {
     background-color: #1da1f2;
     width: 15px;
     height: 15px;
     border-radius: 50%;
 }
 
-.maplibregl-user-location-dot::before {
+.maplibregl-user-location-dot::before,
+.mapboxgl-user-location-dot::before {
     background-color: #1da1f2;
     content: '';
     width: 15px;
@@ -737,7 +881,8 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     animation: maplibregl-user-location-dot-pulse 2s infinite;
 }
 
-.maplibregl-user-location-dot::after {
+.maplibregl-user-location-dot::after,
+.mapboxgl-user-location-dot::after {
     border-radius: 50%;
     border: 2px solid #fff;
     content: '';
@@ -768,15 +913,18 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     100% { transform: scale(1); opacity: 0; }
 }
 
-.maplibregl-user-location-dot-stale {
+.maplibregl-user-location-dot-stale,
+.mapboxgl-user-location-dot-stale {
     background-color: #aaa;
 }
 
-.maplibregl-user-location-dot-stale::after {
+.maplibregl-user-location-dot-stale::after,
+.mapboxgl-user-location-dot-stale::after {
     display: none;
 }
 
-.maplibregl-user-location-accuracy-circle {
+.maplibregl-user-location-accuracy-circle,
+.mapboxgl-user-location-accuracy-circle {
     background-color: #1da1f233;
     width: 1px;
     height: 1px;
@@ -785,11 +933,15 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
 
 .maplibregl-crosshair,
 .maplibregl-crosshair .maplibregl-interactive,
-.maplibregl-crosshair .maplibregl-interactive:active {
+.maplibregl-crosshair .maplibregl-interactive:active,
+.mapboxgl-crosshair,
+.mapboxgl-crosshair .mapboxgl-interactive,
+.mapboxgl-crosshair .mapboxgl-interactive:active {
     cursor: crosshair;
 }
 
-.maplibregl-boxzoom {
+.maplibregl-boxzoom,
+.mapboxgl-boxzoom {
     position: absolute;
     top: 0;
     left: 0;
diff --git a/src/ui/anchor.js b/src/ui/anchor.js
index 158d46c0d0..251b0904c5 100644
--- a/src/ui/anchor.js
+++ b/src/ui/anchor.js
@@ -26,7 +26,7 @@ export const anchorTranslate: {[_: Anchor]: string} = {
 export function applyAnchorClass(element: HTMLElement, anchor: Anchor, prefix: string) {
     const classList = element.classList;
     for (const key in anchorTranslate) {
-        classList.remove(`maplibregl-${prefix}-anchor-${key}`);
+        classList.remove(`maplibregl-${prefix}-anchor-${key}`, `mapboxgl-${prefix}-anchor-${key}`);
     }
-    classList.add(`maplibregl-${prefix}-anchor-${anchor}`);
+    classList.add(`maplibregl-${prefix}-anchor-${anchor}`, `mapboxgl-${prefix}-anchor-${anchor}`);
 }
diff --git a/src/ui/control/attribution_control.js b/src/ui/control/attribution_control.js
index 3c5c554154..a8dea88e48 100644
--- a/src/ui/control/attribution_control.js
+++ b/src/ui/control/attribution_control.js
@@ -54,16 +54,16 @@ class AttributionControl {
         const compact = this.options && this.options.compact;
 
         this._map = map;
-        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-attrib');
-        this._compactButton = DOM.create('button', 'maplibregl-ctrl-attrib-button', this._container);
+        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib');
+        this._compactButton = DOM.create('button', 'maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button', this._container);
         this._compactButton.addEventListener('click', this._toggleAttribution);
         this._compactButton.type = 'button';
         this._setElementTitle(this._compactButton, 'ToggleAttribution');
-        this._innerContainer = DOM.create('div', 'maplibregl-ctrl-attrib-inner', this._container);
+        this._innerContainer = DOM.create('div', 'maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner', this._container);
         this._innerContainer.setAttribute('role', 'list');
 
         if (compact) {
-            this._container.classList.add('maplibregl-compact');
+            this._container.classList.add('maplibregl-compact', 'mapboxgl-compact');
         }
 
         this._updateAttributions();
@@ -100,11 +100,11 @@ class AttributionControl {
     }
 
     _toggleAttribution() {
-        if (this._container.classList.contains('maplibregl-compact-show')) {
-            this._container.classList.remove('maplibregl-compact-show');
+        if (this._container.classList.contains('maplibregl-compact-show') || this._container.classList.contains('mapboxgl-compact-show')) {
+            this._container.classList.remove('maplibregl-compact-show', 'mapboxgl-compact-show');
             this._compactButton.setAttribute('aria-pressed', 'false');
         } else {
-            this._container.classList.add('maplibregl-compact-show');
+            this._container.classList.add('maplibregl-compact-show', 'mapboxgl-compact-show');
             this._compactButton.setAttribute('aria-pressed', 'true');
         }
     }
@@ -192,9 +192,9 @@ class AttributionControl {
 
         if (attributions.length) {
             this._innerContainer.innerHTML = attribHTML;
-            this._container.classList.remove('maplibregl-attrib-empty');
+            this._container.classList.remove('maplibregl-attrib-empty', 'mapboxgl-attrib-empty');
         } else {
-            this._container.classList.add('maplibregl-attrib-empty');
+            this._container.classList.add('maplibregl-attrib-empty', 'mapboxgl-attrib-empty');
         }
         // remove old DOM node from _editLink
         this._editLink = null;
@@ -202,9 +202,9 @@ class AttributionControl {
 
     _updateCompact() {
         if (this._map.getCanvasContainer().offsetWidth <= 640) {
-            this._container.classList.add('maplibregl-compact');
+            this._container.classList.add('maplibregl-compact', 'mapboxgl-compact');
         } else {
-            this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show');
+            this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show');
         }
     }
 
diff --git a/src/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js
index fc719b42d5..3cad78b8b1 100644
--- a/src/ui/control/fullscreen_control.js
+++ b/src/ui/control/fullscreen_control.js
@@ -58,7 +58,7 @@ class FullscreenControl {
     onAdd(map: Map) {
         this._map = map;
         if (!this._container) this._container = this._map.getContainer();
-        this._controlContainer = DOM.create('div', `maplibregl-ctrl maplibregl-ctrl-group`);
+        this._controlContainer = DOM.create('div', `maplibregl-ctrl maplibregl-ctrl-group mapboxgl-ctrl mapboxgl-ctrl-group`);
         if (this._checkFullscreenSupport()) {
             this._setupUI();
         } else {
@@ -84,8 +84,8 @@ class FullscreenControl {
     }
 
     _setupUI() {
-        const button = this._fullscreenButton = DOM.create('button', (`maplibregl-ctrl-fullscreen`), this._controlContainer);
-        DOM.create('span', `maplibregl-ctrl-icon`, button).setAttribute('aria-hidden', true);
+        const button = this._fullscreenButton = DOM.create('button', (`maplibregl-ctrl-fullscreen mapboxgl-ctrl-fullscreen`), this._controlContainer);
+        DOM.create('span', `maplibregl-ctrl-icon mapboxgl-ctrl-icon`, button).setAttribute('aria-hidden', true);
         button.type = 'button';
         this._updateTitle();
         this._fullscreenButton.addEventListener('click', this._onClickFullscreen);
@@ -116,7 +116,9 @@ class FullscreenControl {
         if ((fullscreenElement === this._container) !== this._fullscreen) {
             this._fullscreen = !this._fullscreen;
             this._fullscreenButton.classList.toggle(`maplibregl-ctrl-shrink`);
+            this._fullscreenButton.classList.toggle(`mapboxgl-ctrl-shrink`);
             this._fullscreenButton.classList.toggle(`maplibregl-ctrl-fullscreen`);
+            this._fullscreenButton.classList.toggle(`mapboxgl-ctrl-fullscreen`);
             this._updateTitle();
         }
     }
diff --git a/src/ui/control/geolocate_control.js b/src/ui/control/geolocate_control.js
index fa4bf1e992..f9adf876f2 100644
--- a/src/ui/control/geolocate_control.js
+++ b/src/ui/control/geolocate_control.js
@@ -127,7 +127,7 @@ class GeolocateControl extends Evented {
 
     onAdd(map: Map) {
         this._map = map;
-        this._container = DOM.create('div', `maplibregl-ctrl maplibregl-ctrl-group`);
+        this._container = DOM.create('div', `maplibregl-ctrl maplibregl-ctrl-group mapboxgl-ctrl mapboxgl-ctrl-group`);
         checkGeolocationSupport(this._setupUI);
         return this._container;
     }
@@ -177,21 +177,21 @@ class GeolocateControl extends Evented {
         switch (this._watchState) {
         case 'WAITING_ACTIVE':
             this._watchState = 'ACTIVE_ERROR';
-            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active');
-            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error');
+            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
+            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
             break;
         case 'ACTIVE_LOCK':
             this._watchState = 'ACTIVE_ERROR';
-            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active');
-            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error');
-            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
+            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
+            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
+            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
             // turn marker grey
             break;
         case 'BACKGROUND':
             this._watchState = 'BACKGROUND_ERROR';
-            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background');
-            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error');
-            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
+            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
+            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error');
+            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
             // turn marker grey
             break;
         case 'ACTIVE_ERROR':
@@ -234,16 +234,16 @@ class GeolocateControl extends Evented {
             case 'ACTIVE_LOCK':
             case 'ACTIVE_ERROR':
                 this._watchState = 'ACTIVE_LOCK';
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error');
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
                 break;
             case 'BACKGROUND':
             case 'BACKGROUND_ERROR':
                 this._watchState = 'BACKGROUND';
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error');
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
                 break;
             default:
                 assert(false, `Unexpected watchState ${this._watchState}`);
@@ -262,7 +262,7 @@ class GeolocateControl extends Evented {
         }
 
         if (this.options.showUserLocation) {
-            this._dotElement.classList.remove('maplibregl-user-location-dot-stale');
+            this._dotElement.classList.remove('maplibregl-user-location-dot-stale', 'mapboxgl-user-location-dot-stale');
         }
 
         this.fire(new Event('geolocate', position));
@@ -334,11 +334,11 @@ class GeolocateControl extends Evented {
             if (error.code === 1) {
                 // PERMISSION_DENIED
                 this._watchState = 'OFF';
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error');
                 this._geolocateButton.disabled = true;
                 const title = this._map._getUIString('GeolocateControl.LocationNotAvailable');
                 this._geolocateButton.title = title;
@@ -359,7 +359,7 @@ class GeolocateControl extends Evented {
         }
 
         if (this._watchState !== 'OFF' && this.options.showUserLocation) {
-            this._dotElement.classList.add('maplibregl-user-location-dot-stale');
+            this._dotElement.classList.add('maplibregl-user-location-dot-stale', 'mapboxgl-user-location-dot-stale');
         }
 
         this.fire(new Event('error', error));
@@ -374,8 +374,8 @@ class GeolocateControl extends Evented {
 
     _setupUI(supported: boolean) {
         this._container.addEventListener('contextmenu', (e: MouseEvent) => e.preventDefault());
-        this._geolocateButton = DOM.create('button', `maplibregl-ctrl-geolocate`, this._container);
-        DOM.create('span', `maplibregl-ctrl-icon`, this._geolocateButton).setAttribute('aria-hidden', true);
+        this._geolocateButton = DOM.create('button', `maplibregl-ctrl-geolocate mapboxgl-ctrl-geolocate`, this._container);
+        DOM.create('span', `maplibregl-ctrl-icon mapboxgl-ctrl-icon`, this._geolocateButton).setAttribute('aria-hidden', true);
         this._geolocateButton.type = 'button';
 
         if (supported === false) {
@@ -397,11 +397,11 @@ class GeolocateControl extends Evented {
 
         // when showUserLocation is enabled, keep the Geolocate button disabled until the device location marker is setup on the map
         if (this.options.showUserLocation) {
-            this._dotElement = DOM.create('div', 'maplibregl-user-location-dot');
+            this._dotElement = DOM.create('div', 'maplibregl-user-location-dot mapboxgl-user-location-dot');
 
             this._userLocationDotMarker = new Marker(this._dotElement);
 
-            this._circleElement = DOM.create('div', 'maplibregl-user-location-accuracy-circle');
+            this._circleElement = DOM.create('div', 'maplibregl-user-location-accuracy-circle mapboxgl-user-location-accuracy-circle');
             this._accuracyCircleMarker = new Marker({element: this._circleElement, pitchAlignment: 'map'});
 
             if (this.options.trackUserLocation) this._watchState = 'OFF';
@@ -421,8 +421,8 @@ class GeolocateControl extends Evented {
                 const fromResize = event.originalEvent && event.originalEvent.type === 'resize';
                 if (!event.geolocateSource && this._watchState === 'ACTIVE_LOCK' && !fromResize) {
                     this._watchState = 'BACKGROUND';
-                    this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background');
-                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active');
+                    this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
 
                     this.fire(new Event('trackuserlocationend'));
                 }
@@ -470,17 +470,17 @@ class GeolocateControl extends Evented {
                 numberOfWatches--;
                 noTimeout = false;
                 this._watchState = 'OFF';
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error');
 
                 this.fire(new Event('trackuserlocationend'));
                 break;
             case 'BACKGROUND':
                 this._watchState = 'ACTIVE_LOCK';
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
                 // set camera to last known location
                 if (this._lastKnownPosition) this._updateCamera(this._lastKnownPosition);
 
@@ -493,22 +493,22 @@ class GeolocateControl extends Evented {
             // incoming state setup
             switch (this._watchState) {
             case 'WAITING_ACTIVE':
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
                 break;
             case 'ACTIVE_LOCK':
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
                 break;
             case 'ACTIVE_ERROR':
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
                 break;
             case 'BACKGROUND':
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
                 break;
             case 'BACKGROUND_ERROR':
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error');
                 break;
             case 'OFF':
                 break;
@@ -523,7 +523,7 @@ class GeolocateControl extends Evented {
             } else if (this._geolocationWatchID === undefined) {
                 // enable watchPosition since watchState is not OFF and there is no watchPosition already running
 
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
                 this._geolocateButton.setAttribute('aria-pressed', 'true');
 
                 numberOfWatches++;
@@ -555,7 +555,7 @@ class GeolocateControl extends Evented {
         window.navigator.geolocation.clearWatch(this._geolocationWatchID);
 
         this._geolocationWatchID = (undefined: any);
-        this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting');
+        this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
         this._geolocateButton.setAttribute('aria-pressed', 'false');
 
         if (this.options.showUserLocation) {
diff --git a/src/ui/control/logo_control.js b/src/ui/control/logo_control.js
index d2a2e25461..709ae48aa2 100644
--- a/src/ui/control/logo_control.js
+++ b/src/ui/control/logo_control.js
@@ -24,8 +24,8 @@ class LogoControl {
 
     onAdd(map: Map) {
         this._map = map;
-        this._container = DOM.create('div', 'maplibregl-ctrl');
-        const anchor = DOM.create('a', 'maplibregl-ctrl-logo');
+        this._container = DOM.create('div', 'maplibregl-ctrl mapboxgl-ctrl');
+        const anchor = DOM.create('a', 'maplibregl-ctrl-logo mapboxgl-ctrl-logo');
         anchor.target = "_blank";
         anchor.rel = "noopener nofollow";
         anchor.href = "https://maplibre.org/";
@@ -78,9 +78,9 @@ class LogoControl {
         if (containerChildren.length) {
             const anchor = containerChildren[0];
             if (this._map.getCanvasContainer().offsetWidth < 250) {
-                anchor.classList.add('maplibregl-compact');
+                anchor.classList.add('maplibregl-compact', 'mapboxgl-compact');
             } else {
-                anchor.classList.remove('maplibregl-compact');
+                anchor.classList.remove('maplibregl-compact', 'mapboxgl-compact');
             }
         }
     }
diff --git a/src/ui/control/navigation_control.js b/src/ui/control/navigation_control.js
index 2d4cff670f..3f762ae926 100644
--- a/src/ui/control/navigation_control.js
+++ b/src/ui/control/navigation_control.js
@@ -46,7 +46,7 @@ class NavigationControl {
     constructor(options: Options) {
         this.options = extend({}, defaultOptions, options);
 
-        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group');
+        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group mapboxgl-ctrl mapboxgl-ctrl-group');
         this._container.addEventListener('contextmenu', (e) => e.preventDefault());
 
         if (this.options.showZoom) {
@@ -54,23 +54,23 @@ class NavigationControl {
                 '_setButtonTitle',
                 '_updateZoomButtons'
             ], this);
-            this._zoomInButton = this._createButton('maplibregl-ctrl-zoom-in', (e) => this._map.zoomIn({}, {originalEvent: e}));
-            DOM.create('span', `maplibregl-ctrl-icon`, this._zoomInButton).setAttribute('aria-hidden', true);
-            this._zoomOutButton = this._createButton('maplibregl-ctrl-zoom-out', (e) => this._map.zoomOut({}, {originalEvent: e}));
-            DOM.create('span', `maplibregl-ctrl-icon`, this._zoomOutButton).setAttribute('aria-hidden', true);
+            this._zoomInButton = this._createButton('maplibregl-ctrl-zoom-in mapboxgl-ctrl-zoom-in', (e) => this._map.zoomIn({}, {originalEvent: e}));
+            DOM.create('span', `maplibregl-ctrl-icon mapboxgl-ctrl-icon`, this._zoomInButton).setAttribute('aria-hidden', true);
+            this._zoomOutButton = this._createButton('maplibregl-ctrl-zoom-out mapboxgl-ctrl-zoom-out', (e) => this._map.zoomOut({}, {originalEvent: e}));
+            DOM.create('span', `maplibregl-ctrl-icon mapboxgl-ctrl-icon`, this._zoomOutButton).setAttribute('aria-hidden', true);
         }
         if (this.options.showCompass) {
             bindAll([
                 '_rotateCompassArrow'
             ], this);
-            this._compass = this._createButton('maplibregl-ctrl-compass', (e) => {
+            this._compass = this._createButton('maplibregl-ctrl-compass mapboxgl-ctrl-compass', (e) => {
                 if (this.options.visualizePitch) {
                     this._map.resetNorthPitch({}, {originalEvent: e});
                 } else {
                     this._map.resetNorth({}, {originalEvent: e});
                 }
             });
-            this._compassIcon = DOM.create('span', 'maplibregl-ctrl-icon', this._compass);
+            this._compassIcon = DOM.create('span', 'maplibregl-ctrl-icon mapboxgl-ctrl-icon', this._compass);
             this._compassIcon.setAttribute('aria-hidden', true);
         }
     }
diff --git a/src/ui/control/scale_control.js b/src/ui/control/scale_control.js
index 5823023050..9bfef57cd1 100644
--- a/src/ui/control/scale_control.js
+++ b/src/ui/control/scale_control.js
@@ -57,7 +57,7 @@ class ScaleControl {
 
     onAdd(map: Map) {
         this._map = map;
-        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-scale', map.getContainer());
+        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-scale mapboxgl-ctrl mapboxgl-ctrl-scale', map.getContainer());
 
         this._map.on('move', this._onMove);
         this._onMove();
diff --git a/src/ui/handler/box_zoom.js b/src/ui/handler/box_zoom.js
index b331c8e255..a7f1357c01 100644
--- a/src/ui/handler/box_zoom.js
+++ b/src/ui/handler/box_zoom.js
@@ -95,8 +95,8 @@ class BoxZoomHandler {
         this._lastPos = pos;
 
         if (!this._box) {
-            this._box = DOM.create('div', 'maplibregl-boxzoom', this._container);
-            this._container.classList.add('maplibregl-crosshair');
+            this._box = DOM.create('div', 'maplibregl-boxzoom mapboxgl-boxzoom', this._container);
+            this._container.classList.add('maplibregl-crosshair', 'mapboxgl-crosshair');
             this._fireEvent('boxzoomstart', e);
         }
 
@@ -145,7 +145,7 @@ class BoxZoomHandler {
     reset() {
         this._active = false;
 
-        this._container.classList.remove('maplibregl-crosshair');
+        this._container.classList.remove('maplibregl-crosshair', 'mapboxgl-crosshair');
 
         if (this._box) {
             DOM.remove(this._box);
diff --git a/src/ui/handler/shim/drag_pan.js b/src/ui/handler/shim/drag_pan.js
index fbc4c63027..4cfbf85f03 100644
--- a/src/ui/handler/shim/drag_pan.js
+++ b/src/ui/handler/shim/drag_pan.js
@@ -53,7 +53,7 @@ export default class DragPanHandler {
         this._inertiaOptions = options || {};
         this._mousePan.enable();
         this._touchPan.enable();
-        this._el.classList.add('maplibregl-touch-drag-pan');
+        this._el.classList.add('maplibregl-touch-drag-pan', 'mapboxgl-touch-drag-pan');
     }
 
     /**
@@ -65,7 +65,7 @@ export default class DragPanHandler {
     disable() {
         this._mousePan.disable();
         this._touchPan.disable();
-        this._el.classList.remove('maplibregl-touch-drag-pan');
+        this._el.classList.remove('maplibregl-touch-drag-pan', 'mapboxgl-touch-drag-pan');
     }
 
     /**
diff --git a/src/ui/handler/shim/touch_zoom_rotate.js b/src/ui/handler/shim/touch_zoom_rotate.js
index 5162c77969..61b6e47f79 100644
--- a/src/ui/handler/shim/touch_zoom_rotate.js
+++ b/src/ui/handler/shim/touch_zoom_rotate.js
@@ -46,7 +46,7 @@ export default class TouchZoomRotateHandler {
         this._touchZoom.enable(options);
         if (!this._rotationDisabled) this._touchRotate.enable(options);
         this._tapDragZoom.enable();
-        this._el.classList.add('maplibregl-touch-zoom-rotate');
+        this._el.classList.add('maplibregl-touch-zoom-rotate', 'mapboxgl-touch-zoom-rotate');
     }
 
     /**
@@ -59,7 +59,7 @@ export default class TouchZoomRotateHandler {
         this._touchZoom.disable();
         this._touchRotate.disable();
         this._tapDragZoom.disable();
-        this._el.classList.remove('maplibregl-touch-zoom-rotate');
+        this._el.classList.remove('maplibregl-touch-zoom-rotate', 'mapboxgl-touch-zoom-rotate');
     }
 
     /**
diff --git a/src/ui/map.js b/src/ui/map.js
index cd4ec09f03..70a056176e 100755
--- a/src/ui/map.js
+++ b/src/ui/map.js
@@ -2284,14 +2284,14 @@ class Map extends Camera {
 
     _setupContainer() {
         const container = this._container;
-        container.classList.add('maplibregl-map');
+        container.classList.add('maplibregl-map', 'mapboxgl-map');
 
-        const canvasContainer = this._canvasContainer = DOM.create('div', 'maplibregl-canvas-container', container);
+        const canvasContainer = this._canvasContainer = DOM.create('div', 'maplibregl-canvas-container mapboxgl-canvas-container', container);
         if (this._interactive) {
-            canvasContainer.classList.add('maplibregl-interactive');
+            canvasContainer.classList.add('maplibregl-interactive', 'mapboxgl-interactive');
         }
 
-        this._canvas = DOM.create('canvas', 'maplibregl-canvas', canvasContainer);
+        this._canvas = DOM.create('canvas', 'maplibregl-canvas mapboxgl-canvas', canvasContainer);
         this._canvas.addEventListener('webglcontextlost', this._contextLost, false);
         this._canvas.addEventListener('webglcontextrestored', this._contextRestored, false);
         this._canvas.setAttribute('tabindex', '0');
@@ -2301,10 +2301,10 @@ class Map extends Camera {
         const dimensions = this._containerDimensions();
         this._resizeCanvas(dimensions[0], dimensions[1]);
 
-        const controlContainer = this._controlContainer = DOM.create('div', 'maplibregl-control-container', container);
+        const controlContainer = this._controlContainer = DOM.create('div', 'maplibregl-control-container mapboxgl-control-container', container);
         const positions = this._controlPositions = {};
         ['top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach((positionName) => {
-            positions[positionName] = DOM.create('div', `maplibregl-ctrl-${positionName}`, controlContainer);
+            positions[positionName] = DOM.create('div', `maplibregl-ctrl-${positionName} mapboxgl-ctrl-${positionName}`, controlContainer);
         });
 
         this._container.addEventListener('scroll', this._onMapScroll, false);
@@ -2592,7 +2592,7 @@ class Map extends Camera {
         if (extension) extension.loseContext();
         removeNode(this._canvasContainer);
         removeNode(this._controlContainer);
-        this._container.classList.remove('maplibregl-map');
+        this._container.classList.remove('maplibregl-map', 'mapboxgl-map');
 
         PerformanceUtils.clearMetrics();
 
diff --git a/src/ui/marker.js b/src/ui/marker.js
index 7fe8adaf8f..85e2fbe6be 100644
--- a/src/ui/marker.js
+++ b/src/ui/marker.js
@@ -219,7 +219,7 @@ export default class Marker extends Evented {
             this._offset = Point.convert(options && options.offset || [0, 0]);
         }
 
-        this._element.classList.add('maplibregl-marker');
+        this._element.classList.add('maplibregl-marker', 'mapboxgl-marker');
         this._element.addEventListener('dragstart', (e: DragEvent) => {
             e.preventDefault();
         });
diff --git a/src/ui/popup.js b/src/ui/popup.js
index 435c826535..0dffa2dfba 100644
--- a/src/ui/popup.js
+++ b/src/ui/popup.js
@@ -148,9 +148,9 @@ export default class Popup extends Evented {
             this._map.on('mousemove', this._onMouseMove);
             this._map.on('mouseup', this._onMouseUp);
             if (this._container) {
-                this._container.classList.add('maplibregl-popup-track-pointer');
+                this._container.classList.add('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer');
             }
-            this._map._canvasContainer.classList.add('maplibregl-track-pointer');
+            this._map._canvasContainer.classList.add('maplibregl-track-pointer', 'mapboxgl-track-pointer');
         } else {
             this._map.on('move', this._update);
         }
@@ -270,9 +270,9 @@ export default class Popup extends Evented {
             this._map.on('move', this._update);
             this._map.off('mousemove', this._onMouseMove);
             if (this._container) {
-                this._container.classList.remove('maplibregl-popup-track-pointer');
+                this._container.classList.remove('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer');
             }
-            this._map._canvasContainer.classList.remove('maplibregl-track-pointer');
+            this._map._canvasContainer.classList.remove('maplibregl-track-pointer', 'mapboxgl-track-pointer');
         }
 
         return this;
@@ -297,9 +297,9 @@ export default class Popup extends Evented {
             this._map.on('mousemove', this._onMouseMove);
             this._map.on('drag', this._onDrag);
             if (this._container) {
-                this._container.classList.add('maplibregl-popup-track-pointer');
+                this._container.classList.add('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer');
             }
-            this._map._canvasContainer.classList.add('maplibregl-track-pointer');
+            this._map._canvasContainer.classList.add('maplibregl-track-pointer', 'mapboxgl-track-pointer');
         }
 
         return this;
@@ -419,7 +419,7 @@ export default class Popup extends Evented {
                 }
             }
         } else {
-            this._content = DOM.create('div', 'maplibregl-popup-content', this._container);
+            this._content = DOM.create('div', 'maplibregl-popup-content mapboxgl-popup-content', this._container);
         }
 
         // The close button should be the last tabbable element inside the popup for a good keyboard UX.
@@ -491,7 +491,7 @@ export default class Popup extends Evented {
 
     _createCloseButton() {
         if (this.options.closeButton) {
-            this._closeButton = DOM.create('button', 'maplibregl-popup-close-button', this._content);
+            this._closeButton = DOM.create('button', 'maplibregl-popup-close-button mapboxgl-popup-close-button', this._content);
             this._closeButton.type = 'button';
             this._closeButton.setAttribute('aria-label', 'Close popup');
             this._closeButton.innerHTML = '&#215;';
@@ -517,8 +517,8 @@ export default class Popup extends Evented {
         if (!this._map || !hasPosition || !this._content) { return; }
 
         if (!this._container) {
-            this._container = DOM.create('div', 'maplibregl-popup', this._map.getContainer());
-            this._tip       = DOM.create('div', 'maplibregl-popup-tip', this._container);
+            this._container = DOM.create('div', 'maplibregl-popup mapboxgl-popup', this._map.getContainer());
+            this._tip       = DOM.create('div', 'maplibregl-popup-tip mapboxgl-popup-tip', this._container);
             this._container.appendChild(this._content);
             if (this.options.className) {
                 this.options.className.split(' ').forEach(name =>
@@ -526,7 +526,7 @@ export default class Popup extends Evented {
             }
 
             if (this._trackPointer) {
-                this._container.classList.add('maplibregl-popup-track-pointer');
+                this._container.classList.add('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer');
             }
         }
 
diff --git a/test/browser/util/browser.js b/test/browser/util/browser.js
index 997e0f1b10..01b8cd376d 100644
--- a/test/browser/util/browser.js
+++ b/test/browser/util/browser.js
@@ -50,7 +50,7 @@ async function getMapCanvas(url) {
         }
     });
 
-    return browser.driver.findElement(By.className('maplibregl-canvas'));
+    return browser.driver.findElement(By.className('maplibregl-canvas mapboxgl-canvas'));
 }
 
 let server = null;
diff --git a/yarn.lock b/yarn.lock
index 79c8677d16..4128c627ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2365,9 +2365,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001036:
-  version "1.0.30001037"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001037.tgz#cf666560b14f8dfa18abc235db1ef2699273af6e"
-  integrity sha512-qQP40FzWQ1i9RTjxppOUnpM8OwTBFL5DQbjoR9Az32EtM7YUZOw9orFO6rj1C+xWAGzz+X3bUe09Jf5Ep+zpuA==
+  version "1.0.30001243"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001243.tgz"
+  integrity sha512-vNxw9mkTBtkmLFnJRv/2rhs1yufpDfCkBZexG3Y0xdOH2Z/eE/85E4Dl5j1YUN34nZVsSp6vVRFQRrez9wJMRA==
 
 canvas@^2.6.1:
   version "2.6.1"