Верстка кросбраузерна (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.