Когда я начинал верстать сайты лет десять назад, у меня была одна заветная мечта — чтобы все браузеры понимали мой код одинаково. Но реальность оказалась суровой: Internet Explorer 6 мог превратить идеальный макет в кашу, а Firefox 3.6 добавлял свои «сюрпризы». С тех пор многое изменилось, но проблема осталась. В этой статье я расскажу, как сделать так, чтобы ваш сайт выглядел достойно в любом браузере — от древнего Chrome 50 до свежего Safari на iPhone. Вы узнаете, какие ошибки чаще всего ломают вёрстку, как их находить и исправлять, и получите готовые рецепты для типичных ситуаций.

Digital-студия WNDER

Ссылка на оригинальную статью

Почему сайты разъезжаются в разных браузерах?

Представьте, что вы готовите блюдо по рецепту, но у каждого повара своя плита и свои продукты. Так и браузеры: они используют разные движки для отрисовки страниц. Chrome и Opera — Blink, Firefox — Quantum, Safari — WebKit, а старый IE — Trident. Каждый движок по-своему интерпретирует CSS-свойства, особенно если они новые или нестандартные.

Основные причины проблем:

  • Разная поддержка CSS-свойств (например, flex или grid).
  • Разные значения по умолчанию для отступов, шрифтов и размеров.
  • Ошибки в старых версиях браузеров, которые никто не исправлял.
  • Разная работа с float, position и другими механизмами раскладки.

Поэтому кроссбраузерная вёрстка — это не просто модный термин, а необходимость. Если ваш сайт открывается в Chrome, но разваливается в Safari, вы теряете посетителей. А это прямые убытки для бизнеса.

С чего начать? Базовые принципы

Чтобы не изобретать велосипед, начните с простых правил, которые спасают от 80% проблем.

Правило 1: Используйте reset или normalize. Браузеры по-разному задают отступы и размеры по умолчанию. Сбросьте их, чтобы стартовать с чистого листа. Я предпочитаю normalize.css — он сохраняет полезные стили, но выравнивает базовые.

/* normalize.css — упрощённая версия */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

Правило 2: Пишите валидный код. Закрывайте теги, используйте правильные атрибуты. Невалидный HTML браузеры интерпретируют по-разному, что приводит к непредсказуемым результатам.

Правило 3: Не надейтесь на новые свойства без проверки. Прежде чем использовать gap во flexbox или aspect-ratio, проверьте поддержку на caniuse.com. Если поддержка частичная, добавьте fallback.

Лайфхак: всегда проверяйте сайт в нескольких браузерах до релиза. Лучше потратить час на тестирование, чем потом ловить баги от клиентов.

Самые частые проблемы и их решения

Рассмотрим типичные грабли, на которые наступает каждый верстальщик.

Проблема 1: Flexbox и его капризы

Flexbox — мощный инструмент, но в старых браузерах (например, Safari 8) он работал с префиксами. Сейчас большинство браузеров поддерживают стандартный синтаксис, но всё же есть нюансы. Например, свойство gap во flexbox не работает в Safari до версии 14.1. Решение — использовать margin или padding вместо gap.

/* Вместо gap: 20px; */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.flex-item {
  margin: 10px;
}

Проблема 2: Grid — новый, но уже проблемный

CSS Grid поддерживается всеми современными браузерами, но в старых (IE 11) используется устаревший синтаксис. Если ваша аудитория пользуется старыми браузерами, лучше использовать flexbox или float в качестве запасного варианта.

/* Fallback для Grid */
.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: 33.33%;
}

/* Современный Grid */
@supports (display: grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .grid-item {
    width: auto;
  }
}

Проблема 3: Отступы и размеры шрифтов

Браузеры по-разному рендерят шрифты, особенно на разных операционных системах. Чтобы сгладить различия, используйте относительные единицы (rem, em) и задавайте базовый размер шрифта в html.

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
  line-height: 1.5;
}

Проблема 4: Свойства, которые требуют префиксов

Некоторые CSS-свойства до сих пор требуют вендорных префиксов для старых браузеров. Например, transition, transform, animation.

.element {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

Но не переусердствуйте — современные браузеры не требуют префиксов, поэтому можно использовать автопрефиксер для генерации нужных вариантов.

Инструменты для проверки и автоматизации

Ручная проверка в каждом браузере — это долго и скучно. Используйте инструменты, которые ускоряют процесс.

Инструмент Что делает Когда использовать
Autoprefixer Добавляет префиксы автоматически При сборке проекта
BrowserStack Позволяет тестировать на реальных устройствах Перед релизом
Can I Use Показывает поддержку свойств При выборе CSS-фич
Stylelint Проверяет CSS на ошибки Во время разработки

Также полезно использовать DevTools в браузерах. В Chrome есть режим эмуляции устройств, а Firefox имеет инструмент адаптивного дизайна.

Практические советы для повседневной вёрстки

Вот несколько проверенных приёмов, которые помогут избежать большинства проблем.

  • Всегда задавайте явную ширину и высоту для изображений. Это предотвратит скачки макета при загрузке.
  • Используйте max-width: 100% для всех медиа-элементов. Это гарантирует, что они не вылезут за пределы контейнера.
  • Проверяйте сайт при отключённом JavaScript. Некоторые стили могут зависеть от скриптов, но если они не загрузятся, вёрстка должна оставаться корректной.
  • Не используйте position: absolute для основных элементов. Это делает вёрстку хрупкой.
  • Тестируйте на реальных устройствах. Эмуляция не всегда точно передаёт поведение браузера.
Правило: Если вы используете новое CSS-свойство, всегда проверяйте его поддержку на caniuse.com и добавляйте fallback для старых браузеров. Это убережёт вас от сюрпризов.

Как тестировать кроссбраузерность без боли

Самый простой способ — использовать сервисы облачного тестирования. Они позволяют запускать сайт на реальных браузерах и устройствах удалённо. Но если бюджет ограничен, можно обойтись бесплатными инструментами.

Например, в Chrome DevTools есть режим эмуляции, который имитирует устройства и браузеры. Однако помните, что эмуляция не заменяет реальное тестирование. Поэтому хотя бы раз в месяц запускайте сайт на реальном смартфоне или планшете.

Ещё один совет: настройте автоматическую проверку с помощью Playwright или Puppeteer. Эти инструменты позволяют писать тесты, которые открывают страницу в разных браузерах и проверяют вёрстку на соответствие макету.

// Пример теста с Playwright
const { test, expect } = require('@playwright/test');

test('Проверка главной страницы', async ({ page }) => {
  await page.goto('https://example.com');
  
  // Проверяем, что заголовок виден
  await expect(page.locator('h1')).toBeVisible();
  
  // Проверяем, что кнопка имеет правильный цвет
  const buttonColor = await page.locator('.button').evaluate(el => getComputedStyle(el).backgroundColor);
  expect(buttonColor).toBe('rgb(0, 123, 255)');
});

Такие тесты помогут быстро находить регрессии при обновлении стилей.

Что в итоге: резюме

Кроссбраузерная вёрстка — это не магия, а набор дисциплинированных действий. Начните с нормализации стилей, проверяйте поддержку свойств, используйте fallback, и тестируйте на реальных устройствах. Это займёт немного времени, но сэкономит вам нервы и уважение клиентов.

Помните: идеального браузера не существует, но хороший верстальщик умеет сделать так, чтобы сайт выглядел достойно везде. Практикуйтесь, и скоро вы будете находить проблемы на глаз.

Студия WNDER