Вёрстка кроссбраузерная (Chrome, Firefox, Safari, Edge)

Вёрстка кроссбраузерная (Chrome, Firefox, Safari, Edge)

Кроссбраузерная вёрстка обеспечивает корректное отображение сайта в Chrome, Firefox, Safari и Edge. Несмотря на сближение движков (Blink в Chrome/Edge, Gecko в Firefox, WebKit в Safari), различия остаются — особенно в Safari/iOS.

Основные источники кроссбраузерных проблем

Safari/WebKit — наиболее частый источник проблем:

• CSS Grid subgrid — поддержка появилась только в Safari 16+
• gap в flexbox — старые Safari < 14.1 не поддерживают
• scroll-behavior: smooth — Safari требует @media (prefers-reduced-motion: no-preference)
• position: sticky в таблицах — поведение отличается
• Дата в new Date('2024-01-15') — в Safari строка должна быть '2024/01/15' или ISO 8601

Firefox:

• Scrollbar styling — scrollbar-width: thin вместо webkit-scrollbar псевдоэлементов
• -moz-appearance для кастомных форм

Edge (Chromium-based): практически совпадает с Chrome. Проблемы — в legacy Edge (EdgeHTML, уже не актуален).

Процесс тестирования

1. Разработка — Chrome DevTools
2. Тестирование — ручное открытие в Firefox, Safari (macOS + iOS Simulator), Edge
3. Автоматизация — Playwright multi-browser

// playwright.config.ts
export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'Mobile Safari', use: { ...devices['iPhone 14'] } },
  ],
});

Инструменты проверки поддержки

• Can I Use (caniuse.com) — проверка поддержки CSS/JS фич по браузерам
• MDN Browser Compatibility — подробные таблицы совместимости
• Browserslist — конфигурация целевых браузеров для PostCSS Autoprefixer и Babel

// .browserslistrc
> 0.5%
last 2 versions
not dead
not IE 11

Сроки

Кроссбраузерное тестирование и правки для готовой вёрстки (5–15 страниц): 1–2 рабочих дня. Включая iOS Safari и Android Chrome.