elastic · tkajtoch · Aug 4, 2025 · Aug 1, 2025 · Aug 1, 2025 · Aug 1, 2025
@@ -36,7 +36,6 @@ const DOCS_PATH = '/docs';
 const placeHolderStyles = (content: string) => `
   &::-webkit-input-placeholder { ${content} }
   &::-moz-placeholder { ${content} }
-  &:-ms-input-placeholder { ${content} }
   &:-moz-placeholder { ${content} }
   &::placeholder { ${content} }
 `;
@@ -209,8 +208,8 @@ export default function NavbarContent(): JSX.Element {
 
   return (
     <>
-      {/* adding search styles globally to ensure they are available for usage on 
-      homepage as well without duplication. NOTE: swizzle/wrap does not work for 
+      {/* adding search styles globally to ensure they are available for usage on
+      homepage as well without duplication. NOTE: swizzle/wrap does not work for
       the plugin SearchBar component */}
       <Global styles={styles.search} />
       <NavbarContentLayout

@@ -23,7 +23,6 @@
   // Each prefix must be its own content block
   &::-webkit-input-placeholder { @content; opacity: 1; }
   &::-moz-placeholder { @content; opacity: 1; }
-  &:-ms-input-placeholder { @content; opacity: 1; }
   &:-moz-placeholder { @content; opacity: 1; }
   &::placeholder { @content; opacity: 1; }
 }

@@ -19,8 +19,6 @@ The following files still use the Sass version:
 @mixin euiRangeTrackPerBrowser {
   &::-webkit-slider-runnable-track { @content; }
   &::-moz-range-track { @content; }
-  &::-ms-fill-lower { @content; }
-  &::-ms-fill-upper { @content; }
 }
 
 @mixin euiRangeThumbBorder {
@@ -52,7 +50,6 @@ The following files still use the Sass version:
 @mixin euiRangeThumbPerBrowser {
   &::-webkit-slider-thumb { @content; }
   &::-moz-range-thumb { @content; }
-  &::-ms-thumb { @content; }
 }
 
 @mixin euiRangeThumbFocus {

@@ -43,7 +43,6 @@
   font-weight: $euiFontWeightRegular;
   letter-spacing: -.005em;
   -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
   font-kerning: normal;
 }
 

@@ -0,0 +1 @@
+- Removed obsolete IE-specific CSS properties
@@ -1,26 +1,26 @@
 /*
  * The MIT License (MIT)
- * 
+ *
  * Copyright (c) 2018 HackerOne Inc and individual contributors
- * 
+ *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
  * in the Software without restriction, including without limitation the rights
  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  * copies of the Software, and to permit persons to whom the Software is
  * furnished to do so, subject to the following conditions:
- * 
+ *
  * The above copyright notice and this permission notice shall be included in all
  * copies or substantial portions of the Software.
- * 
+ *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
- * 
+ *
  */
 
 @import "variables.scss";
@@ -468,7 +468,6 @@
   &:last-of-type {
     -webkit-user-select: none;
     -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     border-bottom-left-radius: $datepicker__border-radius;
     border-bottom-right-radius: $datepicker__border-radius;
@@ -626,4 +625,4 @@
 
 .react-datepicker__focusTrap {
   display: flex;
-}
+}
@@ -39,6 +39,7 @@ export const euiFieldPasswordStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     // Only remove Edge's internal reveal button if we're providing a custom one
+    // This pseudo-element is still supported in Chromium-based Edge.
     withToggle: css`
       &::-ms-reveal {
         display: none;

@@ -130,10 +130,6 @@ describe('euiFormControlStyles', () => {
             color: #798EAF;
             opacity: 1;
            }
-        &:-ms-input-placeholder { 
-            color: #798EAF;
-            opacity: 1;
-           }
         &:-moz-placeholder { 
             color: #798EAF;
             opacity: 1;
@@ -174,7 +170,7 @@ describe('euiFormControlStyles', () => {
             --euiFormControlStateColor: #C61E25;
             --euiFormControlStateHoverColor: #DA3737;
             --euiFormControlStateWidth: 1px;
-            
+
 
         position: relative;
         z-index: 1;
@@ -221,10 +217,6 @@ describe('euiFormControlStyles', () => {
             color: #798EAF;
             opacity: 1;
            }
-        &:-ms-input-placeholder { 
-            color: #798EAF;
-            opacity: 1;
-           }
         &:-moz-placeholder { 
             color: #798EAF;
             opacity: 1;

@@ -390,7 +390,7 @@ export const euiFormControlInvalidStyles = (euiThemeContext: UseEuiTheme) => {
           ? euiTheme.border.width.thick
           : euiTheme.border.width.thin
       };
-      
+
       ${euiFormControlHighlightBorderStyles}
       ${euiFormControlShowBackgroundLine(euiThemeContext, invalidColor)}
     `
@@ -578,7 +578,6 @@ export const euiFormControlShowBackgroundLine = (
 const euiPlaceholderPerBrowser = (content: string) => `
   &::-webkit-input-placeholder { ${content} }
   &::-moz-placeholder { ${content} }
-  &:-ms-input-placeholder { ${content} }
   &:-moz-placeholder { ${content} }
   &::placeholder { ${content} }
 `;

@@ -80,8 +80,6 @@ export const euiRangeTrackPerBrowser = (content: string) => {
   return `
     &::-webkit-slider-runnable-track { ${content}; }
     &::-moz-range-track { ${content}; }
-    &::-ms-fill-lower {${content}; }
-    &::-ms-fill-upper { ${content}; }
   `;
 };
 
@@ -156,7 +154,6 @@ export const euiRangeThumbPerBrowser = (content: string) => {
   return `
     &::-webkit-slider-thumb { ${content}; }
     &::-moz-range-thumb { ${content}; }
-    &::-ms-thumb {${content}; }
   `;
 };
 

@@ -43,7 +43,6 @@
   font-weight: $euiFontWeightRegular;
   letter-spacing: -.005em;
   -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
   font-kerning: normal;
 }
 

@@ -42,53 +42,145 @@ export const euiStylisPrefixer = (element: Element) => {
 
 const prefix = (value: Element['value'], length: Element['length']): string => {
   switch (hash(value, length)) {
-    /**
+    /************************************************************
      * `-webkit` prefixes
+     ************************************************************/
+
+    /**
+     * user-select
+     * Safari needs the -webkit prefix as of August 2025
+     * @see https://caniuse.com/mdn-css_properties_user-select
      */
-    // user-select - https://caniuse.com/mdn-css_properties_user-select - needed by Safari
     case 4246:
-    // text-decoration - https://caniuse.com/text-decoration - iOS Safari is the main one that needs this
+
+    /**
+     * text-decoration
+     * iOS Safari needs the -webkit prefix as of August 2025
+     * @see https://caniuse.com/text-decoration
+     */
     case 5572:
-    // text-size-adjust - https://caniuse.com/text-size-adjust - iOS Safari
+
+    /**
+     * text-size-adjust
+     * iOS Safari needs the -webkit prefix as of August 2025
+     * @see https://caniuse.com/text-size-adjust
+     */
     case 2756:
-    // box-decoration-break - https://caniuse.com/css-boxdecorationbreak - Chrome & Safari
+
+    /**
+     * box-decoration-break
+     * Safari needs the -webkit prefix as of August 2025
+     * @see https://caniuse.com/css-boxdecorationbreak
+     */
     case 3005:
-    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite - Chrome
+
+    /**
+     * mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite
+     * @see https://caniuse.com/css-masks
+     * TODO: Remove as this is natively supported since November 2023
+     */
     case 6391:
     case 5879:
     case 5623:
     case 6135:
     case 4599:
     case 4855:
-    // print-color-adjust - https://caniuse.com/css-color-adjust - Chrome
+
+    /**
+     * print-color-adjust
+     * Chromium-based browsers need the -webkit prefix as of August 2025
+     * @see https://caniuse.com/css-color-adjust
+     */
     case 2282:
       return WEBKIT + value + value;
 
-    // background-clip - https://caniuse.com/background-clip-text - Chrome, only for `text` value
+    /**
+     * background-clip
+     * @see https://caniuse.com/background-clip-text
+     * TODO: Remove as this is natively supported since November 2023
+     */
     case 4215:
       if (~indexof(value, 'text')) {
         return WEBKIT + value + value;
       }
 
-    /**
+    /************************************************************
      * Intrinsic/extrinsic sizing value prefixes
-     * `stretch` alternatives needed by Chrome & Firefox - https://caniuse.com/intrinsic-width
+     ************************************************************/
+
+    /**
+     * width
+     * @see https://caniuse.com/intrinsic-width
      */
-    // (min|max)?(width|height|inline-size|block-size)
     case 8116:
+
+    /**
+     * height
+     * @see https://caniuse.com/intrinsic-width
+     */
     case 7059:
+
+    /**
+     * inline-size
+     * @see https://caniuse.com/intrinsic-width
+     */
     case 5753:
+
+    /**
+     * block-size
+     * @see https://caniuse.com/intrinsic-width
+     */
     case 5535:
+
+    /**
+     * min-width
+     * @see https://caniuse.com/intrinsic-width
+     */
     case 5445:
+
+    /**
+     * min-height
+     * @see https://caniuse.com/intrinsic-width
+     */
     case 5701:
+
+    /**
+     * min-inline-size
+     * @see https://caniuse.com/intrinsic-width
+     */
     case 4933:
+
+    /**
+     * min-block-size
+     * @see https://caniuse.com/intrinsic-width
+     */
     case 4677:
+
+    /**
+     * max-width
+     * @see https://caniuse.com/intrinsic-width
+     */
     case 5533:
+
+    /**
+     * max-height
+     * @see https://caniuse.com/intrinsic-width
+     */
     case 5789:
+
+    /**
+     * max-inline-size
+     * @see https://caniuse.com/intrinsic-width
+     */
     case 5021:
+
+    /**
+     * max-block-size
+     * @see https://caniuse.com/intrinsic-width
+     */
     case 4765:
       // stretch, max-content, min-content, fill-available
-      if (strlen(value) - 1 - length > 6)
+      if (strlen(value) - 1 - length > 6) {
         switch (charat(value, length + 1)) {
           // (f)ill-available
           case 102:
@@ -113,6 +205,7 @@ const prefix = (value: Element['value'], length: Element['length']): string => {
               );
             }
         }
+      }
       break;
   }
 

@@ -42,7 +42,6 @@
   font-weight: $euiFontWeightRegular;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
   font-kerning: normal;
 }