Когда я только начинал верстать, у меня была любимая шутка: "Сайт работает в Chrome? Значит, он готов". Но потом приходил заказчик и говорил: "А в Firefox у меня всё съехало". Или: "В Safari кнопка не нажимается". Знакомо? Если да, то эта статья для вас. Мы разберем, как сделать так, чтобы ваш сайт выглядел достойно в любом браузере — от древнего Internet Explorer до современного Edge. Без магии, только практика.

Почему браузеры ведут себя по-разному

Представьте, что браузеры — это переводчики. Один знает английский, другой — французский, третий — японский. А HTML и CSS — это универсальный язык, который они переводят на свой лад. Проблема в том, что у каждого переводчика свой словарь и свои правила. Например, старые версии Internet Explorer не понимают Flexbox, а Safari может по-своему обрабатывать тени. Поэтому наша задача — написать код так, чтобы его понял любой "переводчик".

Правило первое: используйте нормализацию стилей

Каждый браузер имеет свои встроенные стили по умолчанию. У Chrome отступы одни, у Firefox — другие. Чтобы это исправить, используйте normalize.css или reset.css. Это файлы, которые сбрасывают все дефолтные настройки и приводят их к единому знаменателю. Вот как это выглядит:

После этого все отступы, размеры шрифтов и другие базовые вещи станут одинаковыми. Это как перед готовкой почистить овощи — скучно, но без этого никак.

Лайфхак: Если используете reset.css, не забудьте потом явно задать стили для всех элементов. Иначе текст может стать слишком мелким или слипнуться.

Правило второе: проверяйте поддержку свойств

Не все CSS-свойства работают везде. Например, свойство gap для Flexbox появилось недавно, и в старых браузерах его нет. Чтобы не попасть впросак, используйте сервис Can I Use (caniuse.com). Просто вбиваете свойство и смотрите, где оно работает. А если нужно поддержать старые браузеры, используйте альтернативы. Пример:

/* Современный способ */
.container {
    display: flex;
    gap: 20px;
}

/* Запасной вариант для старых браузеров */
.container {
    display: flex;
}
.container > * {
    margin-right: 20px;
}
.container > *:last-child {
    margin-right: 0;
}

Видите? Мы добавили отступы через margin, если gap не поддерживается. Браузер проигнорирует то, что не понимает, и возьмет запасной вариант.

СвойствоПоддержка в старых IEАльтернатива
FlexboxIE10+Inline-block + float
GridНетFlexbox или таблицы
CSS-переменныеНетПрепроцессоры (SASS)

Правило третье: используйте вендорные префиксы

Некоторые свойства браузеры понимают только со специальными приставками. Например, -webkit- для Chrome и Safari, -moz- для Firefox. Раньше их писали вручную, но сейчас есть инструменты вроде Autoprefixer. Он автоматически добавляет нужные префиксы при сборке. Если вы пишете CSS вручную, то вот пример:

.box {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

Это гарантирует, что поворот сработает во всех браузерах. Но не переусердствуйте — современные браузеры уже понимают свойства без префиксов.

Правило четвертое: тестируйте на реальных устройствах

Эмуляторы в браузере — это хорошо, но они не показывают всех нюансов. Например, на реальном iPhone Safari может вести себя иначе, чем в эмуляторе Chrome. Поэтому обязательно проверяйте сайт на разных устройствах: Windows, macOS, Android, iOS. Если нет физических девайсов, используйте сервисы вроде BrowserStack или LambdaTest. Они дают доступ к реальным браузерам и устройствам удаленно.

Правило: Всегда начинайте с мобильной версии. Сделайте сначала для маленьких экранов, потом добавляйте стили для больших. Это называется Mobile First. Так проще избежать проблем с адаптивностью.

Правило пятое: обрабатывайте ошибки с помощью JavaScript

Иногда CSS не хватает. Например, нужно проверить, поддерживает ли браузер какое-то свойство, и если нет — подгрузить другой стиль. Для этого используйте JavaScript. Вот простой пример:

// Проверяем поддержку Flexbox
if (!CSS.supports('display', 'flex')) {
    // Если нет, подгружаем запасной CSS
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'fallback.css';
    document.head.appendChild(link);
}

Этот код подключает дополнительный CSS-файл, если браузер не понимает Flexbox. Так вы гарантируете, что сайт не развалится.

Заключение: что в итоге

Кроссбраузерная верстка — это не магия, а системный подход. Используйте нормализацию, проверяйте поддержку свойств, добавляйте префиксы, тестируйте на реальных устройствах и подстраховывайтесь JavaScript. Тогда ваш сайт будет работать везде: от старого IE до новейшего Edge. И помните: идеальной кроссбраузерности не существует, но к ней можно стремиться. Главное — чтобы пользователь не заметил разницы.

Студия WNDER