check_css_browser_support
Verify browser compatibility for specific CSS properties using MDN data. Include experimental features for comprehensive support insights during web development.
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)The primary handler function for the 'check_css_browser_support' tool. It destructures input args, calls fetchBrowserSupportFromMDN to get support data, generates a recommendation, constructs the result object, and returns it as JSON text content. Includes error handling.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 the parameters for the tool: required 'css_property' string and optional 'include_experimental' boolean.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)The MCP tool registration call using server.tool(), specifying the tool name 'check_css_browser_support', description, input 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 MDN browser support data for a CSS property, including overall support percentage, browser-specific info, and experimental features. Used by the tool handler.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 a textual recommendation based on the overall browser support percentage. Called by the tool handler to provide usage guidance.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.'; } }