safari-devtools-mcp 1.8.0 → 1.8.1

package/README.md

@@ -293,12 +293,7 @@ The server exposes guided debugging workflows as MCP prompts. Clients that suppo
 | `inspect_viewport_meta`       | Parse the viewport meta tag and validate against iOS best practices (width, zoom, viewport-fit)                |
 | `get_safe_area_insets`        | Read CSS safe-area-inset values and check whether the page handles notched devices correctly                   |
 | `check_ios_web_app_readiness` | Audit the page for Add to Home Screen / PWA readiness (apple-touch-icon, manifest, splash screens, status bar) |
-
-### WebKit CSS compatibility
-
-| Tool                         | Description                                                                                                    |
-| ---------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `check_webkit_compatibility` | Scan stylesheets for Safari CSS issues — missing -webkit- prefixes, known WebKit quirks, and deprecated syntax |
+| `check_webkit_compatibility`  | Check page CSS against the live Safari session via CSS.supports()                                              |
 
 ## Architecture
 

package/build/src/tools/webkit-compat.d.ts

@@ -1,11 +1,10 @@
 /**
  * WebKit CSS compatibility checker.
  *
- * Scans stylesheets for known WebKit/Safari CSS issues:
- *  - Properties that need -webkit- prefix in Safari
- *  - Known WebKit rendering bugs with workarounds
- *  - Deprecated -webkit- properties that should be removed
- *  - Properties with different behavior in WebKit vs other engines
+ * Runs inside a live Safari WebDriver session. Extracts CSS from the page
+ * using structured DOM APIs (rule.style iteration — no regex, no false
+ * positives on custom properties), then runs CSS.supports() in the actual
+ * browser to report what is genuinely broken right now.
  */
 export declare const tools: import("./types.js").ToolDef<import("zod").ZodRawShape>[];
 //# sourceMappingURL=webkit-compat.d.ts.map

package/build/src/tools/webkit-compat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webkit-compat.d.ts","sourceRoot":"","sources":["../../../src/tools/webkit-compat.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAiIH,eAAO,MAAM,KAAK,2DAyHjB,CAAC"}
+{"version":3,"file":"webkit-compat.d.ts","sourceRoot":"","sources":["../../../src/tools/webkit-compat.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAuBH,eAAO,MAAM,KAAK,2DAkKjB,CAAC"}

package/build/src/tools/webkit-compat.js

@@ -1,217 +1,164 @@
 /**
  * WebKit CSS compatibility checker.
  *
- * Scans stylesheets for known WebKit/Safari CSS issues:
- *  - Properties that need -webkit- prefix in Safari
- *  - Known WebKit rendering bugs with workarounds
- *  - Deprecated -webkit- properties that should be removed
- *  - Properties with different behavior in WebKit vs other engines
+ * Runs inside a live Safari WebDriver session. Extracts CSS from the page
+ * using structured DOM APIs (rule.style iteration — no regex, no false
+ * positives on custom properties), then runs CSS.supports() in the actual
+ * browser to report what is genuinely broken right now.
  */
 import { defineTool } from './types.js';
-// Properties that still need -webkit- prefix in current Safari
-const NEEDS_PREFIX = {
-    'backdrop-filter': 'Safari requires -webkit-backdrop-filter. Unprefixed is supported only in Safari 18+.',
-    'text-decoration-skip-ink': 'Safari <18 needs -webkit-text-decoration-skip-ink.',
-    'line-clamp': 'Use -webkit-line-clamp with display: -webkit-box and -webkit-box-orient: vertical.',
-    'initial-letter': 'Safari requires -webkit-initial-letter.',
-    'text-stroke': 'Non-standard. Use -webkit-text-stroke (Safari-only feature).',
-    'background-clip: text': 'Safari requires -webkit-background-clip: text for text clipping.',
-    'touch-callout': 'iOS-only. Use -webkit-touch-callout: none to disable long-press popups.',
-    'overflow-scrolling': 'Use -webkit-overflow-scrolling: touch for momentum scrolling on iOS <15.',
-};
-// Known WebKit CSS bugs and quirks
-const KNOWN_QUIRKS = [
-    {
-        pattern: 'gap',
-        message: 'Flexbox "gap" is unsupported in Safari <14.1. Use margin-based spacing as fallback.',
-    },
-    {
-        pattern: 'position:\\s*sticky',
-        message: 'position:sticky inside overflow:hidden parents is broken in Safari. The sticky element will not stick.',
-    },
-    {
-        pattern: 'aspect-ratio',
-        message: 'aspect-ratio is unsupported in Safari <15. Use the padding-bottom hack as fallback.',
-    },
-    {
-        pattern: ':has\\(',
-        message: ':has() is supported in Safari 15.4+ but has performance edge cases with large DOM trees.',
-    },
-    {
-        pattern: 'container-type|@container',
-        message: 'Container queries require Safari 16+. No support in older iOS versions still in use.',
-    },
-    {
-        pattern: 'color-mix\\(',
-        message: 'color-mix() requires Safari 16.2+.',
-    },
-    {
-        pattern: '@layer',
-        message: '@layer (cascade layers) requires Safari 15.4+.',
-    },
-    {
-        pattern: 'subgrid',
-        message: 'subgrid requires Safari 16+.',
-    },
-    {
-        pattern: ':focus-visible',
-        message: ':focus-visible requires Safari 15.4+. Older versions need :focus fallback.',
-    },
-    {
-        pattern: 'overscroll-behavior',
-        message: 'overscroll-behavior requires Safari 16+. No effect on older iOS.',
-    },
-    {
-        pattern: 'dvh|svh|lvh',
-        message: 'Dynamic viewport units (dvh/svh/lvh) require Safari 15.4+. Use vh with JS fallback for older iOS.',
-    },
-    {
-        pattern: 'content-visibility',
-        message: 'content-visibility requires Safari 18+. Not supported in most iOS versions in the wild.',
-    },
-];
-// Deprecated -webkit- prefixes that can be removed
-const DEPRECATED_PREFIXES = [
-    {
-        prefix: '-webkit-border-radius',
-        standard: 'border-radius',
-        message: 'Unprefixed since Safari 5. Remove -webkit- prefix.',
-    },
-    {
-        prefix: '-webkit-box-shadow',
-        standard: 'box-shadow',
-        message: 'Unprefixed since Safari 5.1. Remove -webkit- prefix.',
-    },
-    {
-        prefix: '-webkit-transform',
-        standard: 'transform',
-        message: 'Unprefixed since Safari 9. Remove -webkit- prefix.',
-    },
-    {
-        prefix: '-webkit-transition',
-        standard: 'transition',
-        message: 'Unprefixed since Safari 9. Remove -webkit- prefix.',
-    },
-    {
-        prefix: '-webkit-animation',
-        standard: 'animation',
-        message: 'Unprefixed since Safari 9. Remove -webkit- prefix.',
-    },
-    {
-        prefix: '-webkit-flex',
-        standard: 'flex',
-        message: 'Unprefixed since Safari 9. Remove -webkit-flex and -webkit-box-flex.',
-    },
-    {
-        prefix: '-webkit-appearance',
-        standard: 'appearance',
-        message: 'Unprefixed since Safari 15.4. Keep prefix only if supporting older iOS.',
-    },
+/**
+ * Behavioral quirks that CSS.supports() cannot detect — the property IS
+ * "supported", it just renders incorrectly. Keep this list small, precise,
+ * and each entry must be a confirmed Safari rendering bug.
+ */
+const BEHAVIORAL_QUIRKS = [
     {
-        prefix: '-webkit-user-select',
-        standard: 'user-select',
-        message: 'Unprefixed since Safari 16.4. Keep prefix only if supporting older iOS.',
+        property: 'position',
+        matchValue: 'sticky',
+        message: 'position:sticky silently fails inside an overflow:hidden or overflow:auto ' +
+            'ancestor in Safari. Use overflow:clip on the ancestor instead.',
     },
 ];
 export const tools = [
     defineTool({
         name: 'check_webkit_compatibility',
-        description: 'Scan all stylesheets on the current page for WebKit/Safari CSS ' +
-            'compatibility issues. Reports: properties that need -webkit- prefix, ' +
-            'known WebKit rendering bugs, deprecated prefixes to clean up, and ' +
-            'modern CSS features with limited Safari support.',
-        slimDescription: 'Scan CSS for Safari compatibility issues.',
+        description: 'Check CSS on the current page against the live Safari session. ' +
+            'Extracts every CSS property via structured DOM APIs, runs CSS.supports() ' +
+            'in the actual browser, and reports what is broken right now — unsupported ' +
+            'properties, missing -webkit- prefixes, and known Safari rendering quirks.',
+        slimDescription: 'Check CSS against live Safari via CSS.supports().',
         schema: {},
         handler: async (_params, driver) => {
-            // Collect all CSS text from stylesheets
-            const cssText = await driver.runScript(`(() => {
-        const texts = [];
-        for (const sheet of document.styleSheets) {
-          try {
-            for (const rule of sheet.cssRules) {
-              texts.push(rule.cssText);
+            // -----------------------------------------------------------------
+            // Step 1: Extract structured CSS from the page + run CSS.supports()
+            // in one round-trip. Uses rule.style iteration for canonical property
+            // names — custom properties (--*) are excluded automatically.
+            // -----------------------------------------------------------------
+            const results = await driver.runScript(`(() => {
+        // Collect unique property:value pairs from all accessible stylesheets
+        const seen = new Map();
+
+        function collectFromStyle(style) {
+          for (const prop of style) {
+            if (prop.startsWith('--')) continue;
+            if (seen.has(prop)) continue;
+            seen.set(prop, style.getPropertyValue(prop).trim());
+          }
+        }
+
+        function processRules(rules) {
+          for (const rule of rules) {
+            // Skip @font-face — its descriptors (src, font-display, unicode-range)
+            // are not CSS properties and CSS.supports() always returns false for them
+            if (rule.constructor?.name === 'CSSFontFaceRule') continue;
+            if (rule.style) collectFromStyle(rule.style);
+            if (rule.cssRules) {
+              try { processRules(rule.cssRules); } catch {}
             }
-          } catch {}
+          }
         }
-        // Also check inline styles in style attributes
+
+        for (const sheet of document.styleSheets) {
+          try { processRules(sheet.cssRules); } catch {}
+        }
+
+        // Inline styles
         for (const el of document.querySelectorAll('[style]')) {
-          texts.push(el.getAttribute('style') || '');
+          collectFromStyle(el.style);
         }
-        return texts.join('\\n');
-      })()`);
-            if (!cssText || cssText.length === 0) {
-                return {
-                    content: [
-                        {
-                            type: 'text',
-                            text: 'No accessible stylesheets found. Cross-origin stylesheets cannot be inspected.',
-                        },
-                    ],
-                };
-            }
-            const findings = [];
-            // Check for properties needing -webkit- prefix
-            for (const [prop, message] of Object.entries(NEEDS_PREFIX)) {
-                const propPattern = prop.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-                // Match as a CSS declaration (word boundary before, colon or space after)
-                // to avoid false positives on custom properties like --backdrop-filter
-                const declPattern = `(?<![\\w-])${propPattern}`;
-                if (new RegExp(`(?<!-webkit-)${declPattern}`, 'i').test(cssText) &&
-                    !new RegExp(`-webkit-${propPattern}`, 'i').test(cssText)) {
-                    findings.push({
-                        category: 'Missing prefix',
-                        severity: 'warning',
-                        message: `${prop}: ${message}`,
-                    });
-                }
-            }
-            // Check for known WebKit quirks
-            for (const quirk of KNOWN_QUIRKS) {
-                if (new RegExp(quirk.pattern, 'i').test(cssText)) {
-                    findings.push({
-                        category: 'Compatibility',
-                        severity: 'info',
-                        message: quirk.message,
-                    });
-                }
+
+        const totalProperties = seen.size;
+        const unsupported = [];
+        const needsPrefix = [];
+
+        for (const [prop, value] of seen) {
+          let supported = false;
+          try { supported = CSS.supports(prop, value); } catch {}
+
+          if (!supported) {
+            // Try again with a generic value — the extracted value might be
+            // a computed/resolved form CSS.supports doesn't accept
+            try { supported = CSS.supports(prop, 'initial'); } catch {}
+          }
+
+          if (supported) continue;
+
+          // Not supported unprefixed — check if -webkit- variant works
+          const webkitProp = '-webkit-' + prop;
+          let webkitSupported = false;
+          try { webkitSupported = CSS.supports(webkitProp, value); } catch {}
+          if (!webkitSupported) {
+            try { webkitSupported = CSS.supports(webkitProp, 'initial'); } catch {}
+          }
+
+          if (webkitSupported) {
+            needsPrefix.push({ property: prop, value });
+          } else {
+            unsupported.push({ property: prop, value });
+          }
+        }
+
+        // Collect a subset of computed properties for behavioral quirk checks
+        const body = document.body;
+        const computedProperties = {};
+        if (body) {
+          const quirkProps = ${JSON.stringify(BEHAVIORAL_QUIRKS.map(q => q.property))};
+          for (const prop of quirkProps) {
+            if (seen.has(prop)) {
+              computedProperties[prop] = seen.get(prop);
             }
-            // Check for deprecated -webkit- prefixes
-            for (const dep of DEPRECATED_PREFIXES) {
-                if (cssText.includes(dep.prefix)) {
-                    findings.push({
-                        category: 'Deprecated prefix',
-                        severity: 'info',
-                        message: `${dep.prefix} → ${dep.standard}: ${dep.message}`,
-                    });
-                }
+          }
+        }
+
+        return { totalProperties, unsupported, needsPrefix, computedProperties };
+      })()`);
+            // -----------------------------------------------------------------
+            // Step 2: Check behavioral quirks
+            // -----------------------------------------------------------------
+            const quirks = [];
+            for (const quirk of BEHAVIORAL_QUIRKS) {
+                const value = results.computedProperties[quirk.property];
+                if (value === undefined)
+                    continue;
+                if (quirk.matchValue && !value.includes(quirk.matchValue))
+                    continue;
+                quirks.push(quirk.message);
             }
-            // Build output
+            // -----------------------------------------------------------------
+            // Step 3: Format output
+            // -----------------------------------------------------------------
+            const total = results.unsupported.length + results.needsPrefix.length + quirks.length;
             const lines = [];
-            if (findings.length === 0) {
-                lines.push('✅ No WebKit CSS compatibility issues found in accessible stylesheets.');
+            if (total === 0) {
+                lines.push(`✅ No issues found. ${results.totalProperties} CSS properties checked via CSS.supports() in this Safari session.`);
             }
             else {
-                const warnings = findings.filter(f => f.severity === 'warning');
-                const infos = findings.filter(f => f.severity === 'info');
-                lines.push(`Found ${findings.length} issue(s) across accessible stylesheets:`);
+                lines.push(`Found ${total} issue(s) — ${results.totalProperties} properties checked via CSS.supports() in this Safari session.`);
                 lines.push('');
-                if (warnings.length > 0) {
-                    lines.push(`⚠ Action needed (${warnings.length}):`);
-                    for (const f of warnings) {
-                        lines.push(`  [${f.category}] ${f.message}`);
+                if (results.unsupported.length > 0) {
+                    lines.push(`❌ Unsupported in this Safari (${results.unsupported.length}):`);
+                    for (const { property, value } of results.unsupported) {
+                        const preview = value.length > 60 ? value.slice(0, 57) + '...' : value;
+                        lines.push(`  ${property}: ${preview}`);
+                    }
+                    lines.push('');
+                }
+                if (results.needsPrefix.length > 0) {
+                    lines.push(`⚠ Needs -webkit- prefix (${results.needsPrefix.length}):`);
+                    for (const { property } of results.needsPrefix) {
+                        lines.push(`  ${property} → use -webkit-${property} alongside it`);
                     }
                     lines.push('');
                 }
-                if (infos.length > 0) {
-                    lines.push(`ℹ Informational (${infos.length}):`);
-                    for (const f of infos) {
-                        lines.push(`  [${f.category}] ${f.message}`);
+                if (quirks.length > 0) {
+                    lines.push(`ℹ Known Safari rendering quirks (${quirks.length}):`);
+                    for (const msg of quirks) {
+                        lines.push(`  ${msg}`);
                     }
                 }
             }
-            return {
-                content: [{ type: 'text', text: lines.join('\n') }],
-            };
+            return { content: [{ type: 'text', text: lines.join('\n') }] };
         },
     }),
 ];

package/build/src/tools/webkit-compat.js.map

@@ -1 +1 @@
-{"version":3,"file":"webkit-compat.js","sourceRoot":"","sources":["../../../src/tools/webkit-compat.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"webkit-compat.js","sourceRoot":"","sources":["../../../src/tools/webkit-compat.ts"],"names":[],"mappings":"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"}

package/build/src/version.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "1.8.0";
+export declare const VERSION = "1.8.1";
 //# sourceMappingURL=version.d.ts.map

package/build/src/version.js

@@ -1,4 +1,4 @@
 // x-release-please-start-version
-export const VERSION = '1.8.0';
+export const VERSION = '1.8.1';
 // x-release-please-end
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "safari-devtools-mcp",
   "mcpName": "io.github.HayoDev/safari-devtools-mcp",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Safari DevTools MCP — real browser debugging with network interception, DOM inspection, cookie/storage management, and CSS analysis for AI agents on macOS",
   "type": "module",
   "main": "build/src/index.js",

package/skills/safari-specific-debugging/SKILL.md

@@ -7,18 +7,23 @@ or when debugging WebKit-specific behavior.
 
 ### CSS issues
 
-Safari lags behind on some CSS features and requires `-webkit-` prefixes
-for others. Debug with:
+Start by running `check_webkit_compatibility` — it checks every CSS property
+on the page against the live Safari session via `CSS.supports()` and reports
+what is actually broken (unsupported properties, missing `-webkit-` prefixes):
+
+```
+check_webkit_compatibility
+```
+
+For specific elements, inspect computed styles directly:
 
 ```
 get_computed_style uid="<element-uid>" properties=["display", "gap", "aspect-ratio", "container-type", "backdrop-filter"]
 ```
 
-**Known Safari CSS quirks:**
+**Common Safari CSS gotchas:**
 
-- `gap` in flexbox: Supported since Safari 14.1, but older versions fail silently.
-- `aspect-ratio`: Works, but may not apply in some flex/grid contexts.
-- `-webkit-backdrop-filter`: Still requires prefix in some versions.
+- `-webkit-backdrop-filter`: Still requires prefix in Safari <18.
 - `100vh` on iOS Safari includes the address bar — use `100dvh` instead.
 - `position: sticky` inside `overflow: auto` containers often breaks.
 - `:has()` selector: Safari was first to ship it, but edge cases may differ.
@@ -115,7 +120,13 @@ see what the a11y tree reports, then `take_screenshot` for visual comparison.
    evaluate_script function="() => { /* feature detection code */ }"
    ```
 
-6. Check CSS rendering:
+6. Check CSS compatibility across the page:
+
+   ```
+   check_webkit_compatibility
+   ```
+
+7. Inspect a specific element's styles:
    ```
    get_computed_style uid="<element-uid>"
    ```