check_css_browser_support

Check browser compatibility for CSS properties using MDN data to ensure cross-browser functionality and avoid implementation issues.

Instructions

Checks browser support for specific CSS properties using MDN data and provides detailed compatibility information.

Input Schema

TableJSON Schema

Name	Required	Description	Default
`css_property`	Yes	CSS property name to check browser support for
`include_experimental`	No	Include experimental/draft features in results

Implementation Reference

src/index.ts:183-223 (handler)

Main execution handler for the check_css_browser_support tool. Fetches MDN browser support data, generates recommendation, and returns JSON-formatted response with safety assessment.

async (args: { css_property: string; include_experimental?: boolean }) => {
  try {
    const { css_property, include_experimental = false } = args;

    const supportInfo: BrowserSupportInfo = await fetchBrowserSupportFromMDN(
      css_property,
      include_experimental
    );

    const result = {
      property: css_property,
      browser_support: supportInfo,
      recommendation: generateBrowserSupportRecommendation(supportInfo),
      safe_to_use: supportInfo.overall_support >= 80,
    };

    return {
      content: [
        {
          type: "text" as const,
          text: JSON.stringify(result, null, 2),
        },
      ],
    };
  } catch (error) {
    return {
      content: [
        {
          type: "text" as const,
          text: JSON.stringify(
            {
              error: error instanceof Error ? error.message : "Unknown error",
            },
            null,
            2
          ),
        },
      ],
    };
  }
}

src/index.ts:175-182 (schema)

Zod input schema defining parameters: css_property (string, required) and include_experimental (boolean, optional).

  css_property: z
    .string()
    .describe("CSS property name to check browser support for"),
  include_experimental: z
    .boolean()
    .optional()
    .describe("Include experimental/draft features in results"),
},

src/index.ts:171-224 (registration)

MCP server.tool registration call for 'check_css_browser_support' tool, including name, description, schema, and handler function.

server.tool(
  "check_css_browser_support",
  "Checks browser support for specific CSS properties using MDN data and provides detailed compatibility information.",
  {
    css_property: z
      .string()
      .describe("CSS property name to check browser support for"),
    include_experimental: z
      .boolean()
      .optional()
      .describe("Include experimental/draft features in results"),
  },
  async (args: { css_property: string; include_experimental?: boolean }) => {
    try {
      const { css_property, include_experimental = false } = args;

      const supportInfo: BrowserSupportInfo = await fetchBrowserSupportFromMDN(
        css_property,
        include_experimental
      );

      const result = {
        property: css_property,
        browser_support: supportInfo,
        recommendation: generateBrowserSupportRecommendation(supportInfo),
        safe_to_use: supportInfo.overall_support >= 80,
      };

      return {
        content: [
          {
            type: "text" as const,
            text: JSON.stringify(result, null, 2),
          },
        ],
      };
    } catch (error) {
      return {
        content: [
          {
            type: "text" as const,
            text: JSON.stringify(
              {
                error: error instanceof Error ? error.message : "Unknown error",
              },
              null,
              2
            ),
          },
        ],
      };
    }
  }
);

src/services/css/mdnClient.ts:468-506 (helper)

Core helper function that fetches or simulates browser support data for a given CSS property from MDN sources, with caching and fallback logic.

export async function fetchBrowserSupportFromMDN(
  cssProperty: string,
  includeExperimental: boolean = false
): Promise<BrowserSupportInfo> {
  try {
    const mdnData = await fetchMDNData(cssProperty);

    const supportInfo: BrowserSupportInfo = {
      overall_support:
        mdnData.browserSupport?.overall_support ||
        getBrowserSupportPercentage(cssProperty),
      browsers: mdnData.browserSupport?.browsers || {
        chrome: { version: "90+", support: "full" },
        firefox: { version: "88+", support: "full" },
        safari: { version: "14+", support: "full" },
        edge: { version: "90+", support: "full" },
      },
      experimental_features: includeExperimental
        ? getExperimentalFeatures(cssProperty)
        : [],
    };

    return supportInfo;
  } catch {
    // Fallback to static data
    return {
      overall_support: getBrowserSupportPercentage(cssProperty),
      browsers: {
        chrome: { version: "90+", support: "full" },
        firefox: { version: "88+", support: "full" },
        safari: { version: "14+", support: "full" },
        edge: { version: "90+", support: "full" },
      },
      experimental_features: includeExperimental
        ? getExperimentalFeatures(cssProperty)
        : [],
    };
  }
}

src/services/css/guidance.ts:12-24 (helper)

Helper function that generates human-readable recommendation text based on browser support percentage.

export function generateBrowserSupportRecommendation(supportInfo: any): string {
  const { overall_support } = supportInfo;
  
  if (overall_support >= 95) {
    return 'Excellent browser support. Safe to use in production without fallbacks.';
  } else if (overall_support >= 85) {
    return 'Good browser support. Consider fallbacks for legacy browsers if needed.';
  } else if (overall_support >= 70) {
    return 'Moderate browser support. Provide fallbacks for older browsers.';
  } else {
    return 'Limited browser support. Consider alternative approaches or polyfills.';
  }
}

@depthark/css-first