Media features

CSS media features enable developers to create responsive designs and adapt layouts based on device characteristics, enhancing user experiences. With Chromatic, developers can test and refine CSS media features to ensure consistent and visually appealing designs across different devices and screen sizes.

Test high-contrast color schemes

The forced-colors CSS media feature enables developers to create accessible websites for visually impaired users. It detects high-contrast mode and color preferences, ensuring that websites and applications are legible and accessible. To test it in Chromatic, add the forcedColors configuration option to your tests:

src/components/Auth.stories.ts|tsx

// Adjust this import to match your framework (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from "@storybook/your-framework";

/*
 * Replace the @storybook/test package with the following if you are using a version of Storybook earlier than 8.0:
 * import { userEvent, within } from "@storybook/testing-library";
*/
import { userEvent, within } from "@storybook/test";

import { LoginForm } from "./LoginForm";

const meta: Meta<typeof LoginForm> = {
  component: LoginForm,
  title: "LoginForm",
  parameters: {
    // Enables the forcedColors option at the component level for all stories.
    chromatic: { forcedColors: "active" },
  },
};

export default meta;
type Story = StoryObj<typeof LoginForm>;

export const WithForcedColors: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    await userEvent.type(canvas.getByLabelText("email"), "test@email.com");
    await userEvent.type(canvas.getByLabelText("password"), "KC@2N6^?vsV+)w1t");
    await canvas.getByRole("button", { name: "Login" }).click();
  },
};

ℹ️ The chromatic.forcedColors parameter can be set at story, component, and project levels. This enables you to set project wide defaults and override them for specific components and/or stories. Learn more »

tests/Auth.spec.js|ts

import { test } from "@chromatic-com/playwright";

test.describe("Authentication", () => {
  // Enables the forcedColors option for this test.
  test.use({ forcedColors: "active" });

  test("Authenticates a user with high contrast mode enabled", async ({ page }) => {
    await page.goto("/auth");

    await page.locator('input[name="email"]').fill("test@email.com");
    await page.locator('input[name="password"]').fill("KC@2N6^?vsV+)w1t");
    await page.getByRole("button", { name: "Login" }).click();
  });
});

ℹ️ The forcedColors configuration option can be set at the project level or the test level. This enables you to set project wide defaults and override them for specific tests. Learn more »

cypress/e2e/Auth.cy.js|ts

describe("Authentication", () => {
  // Enables the forcedColors option for this test.
  it("Authenticates a user with high contrast mode enabled", { env: { forcedColors: "active" } }, () => {
    cy.visit("/auth");

    cy.get('input[name="email"]').type("test@email.com");
    cy.get('input[name="password"]').type("KC@2N6^?vsV+)w1t");
    cy.get("button[type=submit]").click();
  });
});

ℹ️ The forcedColors configuration option can be set at the project level or the test level. This enables you to set project wide defaults and override them for specific tests. Learn more »

The forcedColors configuration option supports the following values:

none - Indicating that the user has not enabled a forced color mode or does not have a preference for high-contrast colors.
active - Indicating that the user has enabled a forced color mode or prefers high-contrast colors.

Verify reduced motion animations

The prefers-reduced-motion CSS media feature enables developers to check whether the user enabled a preference for reduced motion animations. Primarily used to create a more inclusive user experience for people who may experience discomfort or nausea when viewing animations that involve rapid movement. To test it in Chromatic, add the prefersReducedMotion configuration option to your tests:

src/components/Auth.stories.ts|tsx

// Adjust this import to match your framework (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from "@storybook/your-framework";

/*
 * Replace the @storybook/test package with the following if you are using a version of Storybook earlier than 8.0:
 * import { userEvent, within } from "@storybook/testing-library";
*/
import { userEvent, within } from "@storybook/test";

import { LoginForm } from "./LoginForm";

const meta: Meta<typeof LoginForm> = {
  component: LoginForm,
  title: "LoginForm",
  parameters: {
    // Enables the prefersReducedMotion option at the component level for all stories.
    chromatic: { prefersReducedMotion: "reduce" },
  },
};

export default meta;
type Story = StoryObj<typeof LoginForm>;

export const WithReducedMotion: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    await userEvent.type(canvas.getByLabelText("email"), "test@email.com");
    await userEvent.type(canvas.getByLabelText("password"), "KC@2N6^?vsV+)w1t");
    await canvas.getByRole('button', { name: "Login" }).click();
  },
};

ℹ️ The chromatic.prefersReducedMotion parameter can be set at story, component, and project levels. This enables you to set project wide defaults and override them for specific components and/or stories. Learn more »

tests/Auth.spec.js|ts

import { test } from "@chromatic-com/playwright";

test.describe("Authentication", () => {
  // Enables the prefersReducedMotion option for this test.
  test.use({ prefersReducedMotion: "reduce" });

  test("Authenticates a user with reduced motion mode enabled", async ({ page }) => {
    await page.goto("/auth");

    await page.locator('input[name="email"]').fill("test@email.com");
    await page.locator('input[name="password"]').fill("KC@2N6^?vsV+)w1t");
    await page.getByRole('button', { name: 'Login' }).click();
  });
});

ℹ️ The prefersReducedMotion configuration option can be set at the project level or the test level. This enables you to set project wide defaults and override them for specific tests. Learn more »

cypress/e2e/Auth.cy.js|ts

describe("Authentication", () => {
  // Enables the prefersReducedMotion option for this test.
  it("Authenticates a user with reduced motion mode enabled", { env: { prefersReducedMotion: "reduce" } }, () => {
    cy.visit("/auth");

    cy.get('input[name="email"]').type("test@email.com");
    cy.get('input[name="password"]').type("KC@2N6^?vsV+)w1t");
    cy.get("button[type=submit]").click();
  });
});

The prefersReducedMotion configuration option supports the following values:

reduce - Indicating that the user has defined a preference for reduced motion,
no-preference - This indicates that the user does not prefer reduced motion, and animations display normally.

Test print styles

The print CSS media feature enables developers to create print styles for web pages. If you’re running tests with Storybook, you can set the media configuration option to print, allowing Chromatic to test print styles defined in your UI components.

src/components/UserAccount.stories.ts|tsx

// Adjust this import to match your framework (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from "@storybook/your-framework";

import { UserAccount } from "./UserAccount";

const meta: Meta<typeof UserAccount> = {
  component: UserAccount,
  title: "UserAccount",
  parameters: {
    chromatic: {
      // Sets the print media feature at the component level for all stories.
      media: "print",
    },
  },
};

export default meta;
type Story = StoryObj<typeof UserAccount>;

export const Default: Story = {};

ℹ️ The chromatic.media parameter can be set at story, component, and project levels. This enables you to set project wide defaults and override them for specific components and/or stories. Learn more »

Combine media features with Modes

You can add media features to existing Modes but can’t define media features in the Mode itself.

For example, if you have existing Modes for German and American English locales, you can write a test combining those modes with the media configuration option like so:

.storybook/modes.js|ts

// Define modes
export const allModes = {
  german: {
    locale: "de",
  },
  american: {
    locale: "en-us",
  },
  // {...  Other modes}
};

Then, apply the Modes and the media feature to your tests.

src/components/UserAccount.stories.ts|tsx

// Adjust this import to match your framework (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from "@storybook/your-framework";

import { allModes } from "../../.storybook/modes";

import { UserAccount } from "./UserAccount";

const meta: Meta<typeof UserAccount> = {
  component: UserAccount,
  title: "UserAccount",
};

export default meta;
type Story = StoryObj<typeof UserAccount>;

/*
 * Combines modes with print media styles
 * 1️⃣ Set the `media` option to `print`
 * 2️⃣ Set the `modes` to use the desired locales
 * 👀 Note: These modes keys (e.g., "german print") will be used in the Chromatic UI
 */
export const WithPrintStyles: Story = {
  parameters: {
    chromatic: {
      // 1️⃣
      media: "print",
      // 2️⃣
      modes: {
        "german print": allModes["de"],
        "en-us print": allModes["en-us"],
      },
    },
  },
};

This would create two Chromatic snapshots, one with German locale mode and print styles and another with American English locale mode and print styles.

Troubleshooting

Can I define a media feature in Modes?

No, setting media features in Modes is not supported.

.storybook/modes.js|ts

export const allModes = {
  // 🚨 THESE WILL NOT WORK 🚨
  mode: {
    media: "print",
    forcedColors: "active",
    prefersReducedMotion: "reduce",
  },
  // {...  Other modes}
};

Edit page Submit feedback