Кросбраузерна верстка (Chrome, Firefox, Safari, Edge)

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

Ви зробили ідеальний макет у Figma, зверстали на React, а клієнт відкриває сайт на Safari — і все роз'їхалося. Знайома історія? Ми стикаємося з цим щодня. За роки роботи накопичили цілу колекцію сюрпризів: від відсутності підтримки CSS Grid subgrid до дивної поведінки scroll-behavior. Кросбраузерна верстка — це не про "однаково", а про "однаково добре" в Chrome, Firefox, Safari та Edge. І якщо з Blink-браузерами проблем майже нема, то Safari (особливо на iOS) потребує особливої уваги.

Чому виникає кросбраузерна несумісність?

Основна причина — різні двигуни рендерингу. Chrome та Edge використовують Blink, Firefox — Gecko, Safari — WebKit. Кожен двигун по-своєму інтерпретує CSS-специфікації, особливо в частині сучасних можливостей. Наприклад, CSS Grid subgrid з'явився у всіх браузерах, але Safari підтримує його тільки з версії 16. А gap у flexbox — у Safari до версії 14.1 його просто нема. Навіть парсинг дат у JavaScript відрізняється: Safari не сприймає дати у форматі YYYY-MM-DD, вимагаючи ISO 8601 або роздільники /. Згідно з MDN Web Docs, ці розбіжності викликані різною швидкістю впровадження стандартів.

Які проблеми ми вирішуємо найчастіше

Наш досвід показує, що 70% інцидентів пов'язані з Safari/iOS. Ось типові розбіжності:

• CSS Grid та Flexbox: Safari на старих версіях не підтримує gap у flexbox, а subgrid — до 16 версії.
• Скрол та анімації: scroll-behavior: smooth у Safari не працює без @media (prefers-reduced-motion: no-preference).
• Позиціонування: position: sticky у таблицях веде себе по-різному.
• Кастомні форми: Firefox вимагає -moz-appearance, Safari — свої вендорні префікси.
• Шрифти та рендеринг: різна товщина шрифтів, кернінг, згладжування.

Ці проблеми призводять до додаткових витрат на доопрацювання. Наша практика показує, що своєчасне тестування та фікси дозволяють заощадити до 40% бюджету підтримки. Наприклад, своєчасна кросбраузерна адаптація дозволяє заощадити до €5000 на рік на виправленні помилок.

Як ми досягаємо єдиного відображення?

Використовуємо триетапний підхід:

1. Перший етап — розробка із запасом. У Chrome пишемо основну верстку, але одразу перевіряємо підтримку CSS-властивостей через caniuse.com та MDN-документацію. Для сумнівних фіч додаємо поліфіли або fallback.
2. Другий етап — ручне тестування в Firefox, Safari (macOS + iOS Simulator) та Edge. Займає від 1 до 2 днів для 5–15 сторінок.
3. Третій етап — автоматизація за допомогою Playwright. Налаштовуємо multi-browser конфігурацію, яка проганяє всі сценарії в Chromium, Firefox, WebKit та мобільному Safari. Наш Playwright-скрипт виконує тестування в 5 разів швидше за ручне: 10 сторінок перевіряє за 2 години, а ручне тестування зайняло б 10 годин.

// 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'] } }, ], }); 

Що входить у нашу роботу з кросбраузерної верстки

Ми не просто правимо CSS. У послугу включено:

• Перевірка верстки на 4 покоління браузерів (останні 2 мажорні версії кожного).
• Створення конфігурації Browserslist для PostCSS та Babel.
• Написання поліфілів для відсутніх функцій.
• Тестування на реальних пристроях (iPad, iPhone, Android) через BrowserStack.
• Документування знайдених розбіжностей та їх виправлень.
• Гарантія на результат — якщо після здачі правок з'явиться баг на підтримуваному браузері, чинимо безкоштовно протягом 30 днів.

Процес роботи

1. Аудит поточної верстки — аналізуємо, які браузери підтримуються, складаємо матрицю сумісності.
2. Правки CSS/JS — вносимо зміни по кожній знайденій розбіжності.
3. Тестування — ручне + автоматизоване (Playwright).
4. Фіксація багів — якщо щось зламалося, виправляємо і повторно тестуємо.
5. Здача — надаємо звіт про виконану роботу.

Терміни та вартість

Для типового проекту (до 20 сторінок, статична верстка) кросбраузерне тестування та правки займають від 1 до 3 робочих днів. Вартість — від €200 до €500 залежно від складності. Для складних SPA з анімаціями — до 5 днів, вартість від €800. Точна ціна визначається після аудиту.

Як уникнути проблем на старті?

Використовуйте CSS-методології (наприклад, BEM) та уникайте вендоро-залежних властивостей без fallback. Заздалегідь налаштуйте Browserslist:

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

Це автоматично додасть префікси через Autoprefixer та транспіляцію через Babel.

Таблиця поширених розбіжностей

Порівняння підходів до тестування

Наші компетенції

У нас за плечима більше 150 комерційних проектів з обов'язковою кросбраузерною версткою. Працюємо з 2018 року, маємо досвід понад 6 років. Ми постійно моніторимо оновлення браузерів та специфікацій, щоб ваша верстка працювала стабільно. Отримайте консультацію — допоможемо з будь-якими браузерними проблемами.