Вёрстка кроссбраузерная (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% бюджета поддержки.

Как мы добиваемся единого отображения

Используем трёхэтапный подход:

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. Автоматизация сокращает время тестирования в 5 раз по сравнению с ручным перебором.

// 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 рабочих дней. Для сложных SPA с анимациями — до 5 дней. Стоимость рассчитывается индивидуально, зависит от объёма и сложности. Закажите оценку вашего проекта — мы подготовим план работ.

Как избежать проблем на старте

Используйте CSS-методологии (например, BEM) и избегайте вендоро-зависимых свойств без fallback. Заранее настройте Browserslist:

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

Это автоматически добавит префиксы через Autoprefixer и транспиляцию через Babel.

Таблица распространённых расхождений

Сравнение подходов к тестированию

Наши компетенции

У нас за плечами более 100 коммерческих проектов с обязательной кроссбраузерной вёрсткой. Мы постоянно мониторим обновления браузеров и спецификаций, чтобы ваша вёрстка работала стабильно. Получите консультацию — поможем с любыми браузерными проблемами.