241 Cross Browser Checklist 3e5ef057

Name: 241 Cross Browser Checklist 3e5ef057
Author: tools-only

ASecurity

| Browser | Priority | |---------|----------| | Chrome | Mandatory | | Safari | Mandatory (mobile) | | Edge | Mandatory | | Firefox | Recommended |

9 stars
0 votes
0 copies
0 views
Added October 11, 2026

testingtypescriptbashtesting

Security analysis

A100/100

Scanned October 11, 2026

npx -y skills add tools-only/X-Skills --skill 241-cross-browser-checklist_3e5ef057 --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of 241 Cross Browser Checklist 3e5ef057?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for 241 Cross Browser Checklist 3e5ef057

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/tools-only-241-cross-browser-checklist-3e5ef057/badge)](https://www.skillsdirectory.com/skills/tools-only-241-cross-browser-checklist-3e5ef057)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

SKILL.md

# Cross-Browser & Responsive Testing

## Browser Coverage

| Browser | Priority |
|---------|----------|
| Chrome | Mandatory |
| Safari | Mandatory (mobile) |
| Edge | Mandatory |
| Firefox | Recommended |

## Device Breakpoints

| Device | Viewport | Priority |
|--------|----------|----------|
| Mobile S | 320px | High |
| Mobile M | 375px | High |
| Tablet | 768px | High |
| Laptop | 1024px | High |
| Desktop | 1440px | High |

## Playwright Config

```typescript
import { devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
    { name: 'mobile-safari', use: { ...devices['iPhone 12'] } },
  ],
});
```

## Responsive Checklist

### Layout
- [ ] Content reflows at all breakpoints
- [ ] No horizontal scrolling on mobile
- [ ] Navigation transforms to mobile menu
- [ ] Touch targets 44px minimum

### Forms
- [ ] Input fields usable on mobile
- [ ] Touch keyboard doesn't obscure inputs
- [ ] Date pickers mobile-friendly

### Interactive
- [ ] Hover states have touch alternatives
- [ ] Modals size appropriate per device

## Browser-Specific Issues

- **Safari**: flexbox gap, date input, WebP
- **Firefox**: CSS grid subgrid, custom scrollbars
- **Edge**: Same as Chromium (verify anyway)

## Commands

```bash
npx playwright test --project=chromium
npx playwright test --project=mobile-chrome --project=mobile-safari
```

## Testing Services

- **BrowserStack**: Real device cloud
- **Sauce Labs**: Cross-browser cloud
- **Playwright**: Local emulation (free)