diff --git a/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx index 413b012adaa..f67fa10c3f8 100644 --- a/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx +++ b/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx @@ -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 */} { } `, // 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; diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx index cf9cbe2ef67..491f1e49e39 100644 --- a/packages/eui/src/components/form/form.styles.test.tsx +++ b/packages/eui/src/components/form/form.styles.test.tsx @@ -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; diff --git a/packages/eui/src/components/form/form.styles.ts b/packages/eui/src/components/form/form.styles.ts index 09595f23c44..aaaa13f71ff 100644 --- a/packages/eui/src/components/form/form.styles.ts +++ b/packages/eui/src/components/form/form.styles.ts @@ -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} } `; diff --git a/packages/eui/src/components/form/range/range.styles.ts b/packages/eui/src/components/form/range/range.styles.ts index 5fa02cde28e..0c05256cf9e 100644 --- a/packages/eui/src/components/form/range/range.styles.ts +++ b/packages/eui/src/components/form/range/range.styles.ts @@ -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}; } `; }; diff --git a/packages/eui/src/global_styling/mixins/_typography.scss b/packages/eui/src/global_styling/mixins/_typography.scss index 65bea676952..61ffafe872a 100644 --- a/packages/eui/src/global_styling/mixins/_typography.scss +++ b/packages/eui/src/global_styling/mixins/_typography.scss @@ -43,7 +43,6 @@ font-weight: $euiFontWeightRegular; letter-spacing: -.005em; -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; font-kerning: normal; } diff --git a/packages/eui/src/services/emotion/prefixer.ts b/packages/eui/src/services/emotion/prefixer.ts index c1c6259c5a4..c5520205b1a 100644 --- a/packages/eui/src/services/emotion/prefixer.ts +++ b/packages/eui/src/services/emotion/prefixer.ts @@ -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; } diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/_typography.scss b/packages/eui/src/themes/amsterdam/global_styling/mixins/_typography.scss index e275d87bc6f..247a59fb9a5 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/mixins/_typography.scss +++ b/packages/eui/src/themes/amsterdam/global_styling/mixins/_typography.scss @@ -42,7 +42,6 @@ font-weight: $euiFontWeightRegular; letter-spacing: normal; -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; font-kerning: normal; }