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 ), }, ], }; } } );
- 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.'; } }