Skip to main contentSkip to site searchSkip to component search
Honeycomb

use-css-supports

Since: ver.17.5.0

useCSSSupports tells you if the current browser supports a CSS feature or condition.

Use it when you need to choose between a browser feature and a fallback. The feature string is passed directly to CSS.supports, so you can use a property/value pair or a complete @supports condition.

The hook returns false during server-side rendering and on the first render. It checks the feature after the component mounts and when the feature changes. If CSS.supports is not available, it returns false.

import React from 'react';
import { useCSSSupports } from '@flixbus/honeycomb-react';

const carouselFeature = 'selector(::scroll-button(inline-start))';

function CSSSupportStatus({ feature }) {
  const supported = useCSSSupports(feature);

  return (
    <output aria-live="polite">
      {supported ? 'Supported' : 'Not supported'}
    </output>
  );
}

<CSSSupportStatus feature={carouselFeature} />;

You can pass a CSS property/value pair:

import React from 'react';
import { useCSSSupports } from '@flixbus/honeycomb-react';

function GridSupportStatus() {
  const supportsGrid = useCSSSupports('display: grid');

  return <output aria-live="polite">CSS Grid: {supportsGrid ? 'Supported' : 'Not supported'}</output>;
}

<GridSupportStatus />;

You can also pass a complete condition, such as a selector feature:

import React from 'react';
import { useCSSSupports } from '@flixbus/honeycomb-react';

function ScrollButtonSupportStatus() {
  const supportsScrollButtons = useCSSSupports('selector(::scroll-button(inline-start))');

  return <output aria-live="polite">Carousel controls: {supportsScrollButtons ? 'Supported' : 'Not supported'}</output>;
}

<ScrollButtonSupportStatus />;

The hook only checks browser support. It does not add a polyfill or change how the CSS feature works. Use the result to render a fallback or choose which interaction layer to use.

See CSS.supports for more details about the condition syntax.