theming/browser-compatibility

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Browser support and modern CSS features

Ant Design supports the latest 2 versions of modern browsers by default. It uses modern CSS features to improve style maintainability and scalability, but these features may not be supported in older browsers. Fallback compatibility solutions are available through StyleProvider.

:where selector support and fallback

Ant Design CSS-in-JS uses the :where selector by default to reduce CSS selector specificity, starting from version 5.0.0. Minimum Chrome support is version 88. To support older browsers, use <StyleProvider hashPriority="high"> from @ant-design/cssinjs to disable :where wrapping and switch to class selectors instead.

CSS logical properties support and fallback

Ant Design uses CSS logical properties starting from version 5.0.0 to unify LTR and RTL styles. For example, margin-left is replaced with margin-inline-start. Minimum Chrome support is version 89. For older browser compatibility, use <StyleProvider transformers={[legacyLogicalPropertiesTransformer]}> from @ant-design/cssinjs to convert logical properties to physical properties like top, right, bottom, left.

:where selector style transformation

When hashPriority is set to "high" in StyleProvider, CSS styles are transformed from :where(.css-class).ant-component to .css-class.ant-component format. This removes the :where selector wrapping but may require manual style priority adjustments.

PostCSS plugins for style specificity

When disabling :where selector lowering, PostCSS plugins can help adjust style priority. Common options include postcss-scopify, postcss-increase-specificity, and postcss-add-root-selector to wrap selectors with additional scope for priority elevation.

autoPrefixer transformer

The autoPrefixTransformer from @ant-design/cssinjs (available from version 6.0.0) automatically adds browser prefixes to styles for cross-browser compatibility. It is disabled by default. Use <StyleProvider transformers={[autoPrefixTransformer]}> to enable it. Example: user-select becomes -webkit-user-select, -moz-user-select, -ms-user-select, and user-select.

@layer style priority lowering

Ant Design from version 5.17.0 supports @layer for unified style priority lowering. Minimum Chrome support is version 99. When StyleProvider layer is enabled, child elements must be wrapped with ConfigProvider to update icon-related styles. Styles are wrapped in @layer antd {} to always remain lower than default CSS selector priority.

zeroRuntime with @layer configuration

In zeroRuntime scenarios (version 6.0.0+), when antd styles are pre-built into antd.css and @layer lowering is enabled, antd.css must be placed in the same layer using @import url(antd.css) layer(antd) syntax. Alternatively, wrap the antd.css content in @layer antd {} during build. This ensures pre-built styles remain at the same priority as StyleProvider-injected styles.

px2rem style transformation example

When px2remTransformer is applied with rootValue: 32, styles are transformed: 400px becomes 12.5rem, 32px becomes 1rem, 10PX becomes 0.3125rem. Media query pixel values are also converted if mediaQuery option is true.

Shadow DOM style injection

In Shadow DOM scenarios, use StyleProvider with the container property to specify where to inject style tags. Create the container using document.createElement and pass the shadowRoot as the container: <StyleProvider container={shadowRoot}>.

Ant Design with Tailwind CSS and @layer

To use antd with Tailwind CSS, configure @layer to control style override order. For Tailwind v3, use @layer tailwind-base, antd and place @tailwind base inside tailwind-base layer. For Tailwind v4, use @layer theme, base, antd, components, utilities with @import 'tailwindcss'. Enable @layer in antd using StyleProvider layer prop wrapped with ConfigProvider.

SSR with @layer priority ordering

In SSR scenarios, the @layer priority order declaration must be loaded before @layer is actually used. The css file or style tag containing @layer xxx, antd declarations must appear in the head before SSR-injected styles that contain @layer antd { } rules.

StyleProvider hashPriority default value

The hashPriority property of StyleProvider defaults to 'low', which keeps :where selector wrapping. Set hashPriority to 'high' to remove :where wrapping for older browser compatibility.

Browser compatibility for Ant Design

Ant Design supports the last 2 versions of modern browsers. For legacy browser support, downgrade processing must be performed according to actual needs.

Dynamic style using :where selector not supported in old browsers

Dynamic style using :where CSS selector is not supported in old browsers. Refer to the dynamic theme documentation Legacy Browser Compatible section for solutions.

Dynamic styles with :where selector for old browser support

If dynamic styles using :where cause issues in older browsers, refer to the dynamic theme documentation section on compatible styles for old browsers.

Browser zoom precision problems not handled by antd

Ant Design does not address browser zoom precision issues because different browsers render zoom differently. Fixing one browser often breaks others. Browser-specific zoom rendering issues (subpixel rendering, rounding differences, layout recalculation) require extensive browser-specific code that impacts performance and maintainability, and may break with browser updates.

v6 no longer supports Internet Explorer

Ant Design v6 only supports modern browsers and uses CSS variables by default. Internet Explorer is no longer supported. Some older domestic browsers may have compatibility issues.

Ant Design no longer supports IE

Ant Design raised build target and will not support Internet Explorer anymore.

Ant Design browser compatibility

Ant Design supports modern browsers following the defaults list at https://browsersl.ist/#q=defaults. Specifically, it supports: Edge last 2 versions, Firefox last 2 versions, Chrome last 2 versions, Safari last 2 versions, and Electron last 2 versions. Server-side rendering is supported, and Electron is supported.

Give your agent this brain