Каждый, кто хоть раз открывал свой сайт в разных браузерах, замечал: в Chrome всё красиво, а в Firefox — съехало. Или в Safari шрифт другой, а в Edge кнопка не та. Это не баг, это фича браузеров. Они по-разному понимают CSS. И наша задача — сделать так, чтобы сайт был одинаково удобным везде. В этой статье разберём, как это сделать без боли и лишних нервов.

Digital-студия WNDER

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

Представь, что ты готовишь борщ. Рецепт один, но у каждого повара своя плита, свои кастрюли и своя соль. Так и браузеры: они читают один и тот же HTML и CSS, но применяют их по-своему. У каждого движка свои правила отображения. Например, Chrome использует Blink, Firefox — Gecko, Safari — WebKit. Из-за этого отступы, шрифты, цвета и даже размеры элементов могут отличаться.

Но не всё так страшно. Современные браузеры стараются придерживаться единых стандартов. Проблемы в основном возникают со старыми версиями, особенно с Internet Explorer (да, он ещё жив в некоторых компаниях). Или с браузерами на устаревших движках. Поэтому кроссбраузерность — это не роскошь, а необходимость, если ты хочешь, чтобы твоим сайтом пользовались все.

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

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

Второе правило — сбрось дефолтные стили. У каждого браузера есть свои стили по умолчанию: у одного отступы больше, у другого меньше. Чтобы выровнять всё, используй CSS Reset или Normalize.css. Это как убрать мусор с рабочего стола перед началом работы.

Третье правило — не полагайся на дефолтные значения. Задавай явно шрифты, размеры, отступы, цвета. Чем точнее ты укажешь, тем меньше сюрпризов будет.

Лайфхак: всегда начинай с box-sizing: border-box для всех элементов. Это спасёт от проблем с размерами при использовании паддингов и бордеров.

Инструменты и техники для кроссбраузерности

Есть несколько проверенных способов, которые облегчают жизнь. Вот основные из них.

Вендорные префиксы

Некоторые CSS-свойства ещё не стандартизированы, и браузеры поддерживают их только с префиксами. Например, -webkit- для Chrome и Safari, -moz- для Firefox, -ms- для Edge. Чтобы свойство работало везде, пиши его несколько раз. Но не переусердствуй: современные браузеры часто поддерживают свойства без префиксов. Используй Autoprefixer, чтобы автоматически добавлять нужные префиксы.

Флексбоксы и гриды

Flexbox и Grid — мощные инструменты для раскладки. Но старые браузеры их не понимают. Если тебе важна поддержка IE11, то придётся использовать фоллбэки (запасные варианты). Например, можно использовать float или inline-block, а затем, если браузер поддерживает flex, применять его через @supports.


<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
.container {
  display: block;
}
.item {
  float: left;
  width: 33.33%;
}
@supports (display: flex) {
  .container {
    display: flex;
  }
  .item {
    float: none;
    width: auto;
  }
}
</style>

Проверка в браузерах

Никакой код не заменит реальной проверки. Открой сайт в Chrome, Firefox, Safari, Edge. Если нет возможности установить все браузеры, используй онлайн-сервисы типа BrowserStack или Sauce Labs. Они позволяют увидеть сайт в разных браузерах и на разных устройствах.

Таблица: сравнение подходов

ПодходПлюсыМинусы
CSS ResetПолный контроль, убирает все отступыМожет сломать стили, если не аккуратно
Normalize.cssСохраняет полезные дефолты, выравниваетНе решает все проблемы
Вендорные префиксыПоддержка новых свойствМного кода, сложно поддерживать
@supportsГибкая настройкаНе работает в старых IE

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

Даже опытные верстальщики сталкиваются с типичными граблями. Вот несколько примеров и как их обойти.

Шрифты

Шрифты могут отображаться по-разному: в одном браузере текст жирнее, в другом — тоньше. Чтобы минимизировать разницу, подключай системные шрифты или веб-шрифты с явными настройками. Используй font-family с запасными вариантами.


body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

Отступы и размеры

Разные браузеры по-разному считают размеры. Используй box-sizing, как я уже говорил, и избегай магии в числах. Лучше использовать относительные единицы: проценты, em, rem, vw, vh.

Формы

Элементы форм (кнопки, инпуты) в разных браузерах выглядят по-разному. Чтобы унифицировать, сбрось стили и задай свои. Например:


input, button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #ccc;
  padding: 10px;
}

JavaScript и CSS

Иногда проблемы возникают из-за того, что браузер не поддерживает какое-то CSS-свойство, и JavaScript не может его прочитать. Проверяй поддержку через Modernizr или просто пиши код с проверками.


if (document.querySelector) {
  // код, который использует querySelector
} else {
  // запасной вариант
}

Практические советы и лайфхаки

Соберу в кучу всё, что поможет тебе в работе.

  • Используй инструменты разработчика. В каждом браузере есть режим эмуляции устройств. Проверяй в разных разрешениях.
  • Не забывай про печать. Некоторые сайты ломаются при печати. Подключи отдельный CSS для печати.
  • Тестируй на реальных устройствах. Эмуляция — это хорошо, но реальные девайсы лучше.
  • Следи за обновлениями браузеров. Что-то, что работало вчера, сегодня может сломаться.
Правило: всегда начинай с мобильной версии, а потом добавляй стили для десктопа через медиа-запросы. Это упрощает поддержку и уменьшает количество багов.

Что в итоге

Кроссбраузерная верстка — это не магия, а системный подход. Следуя простым правилам — валидный код, сброс стилей, префиксы и тестирование, — ты сделаешь сайт, который будет работать везде. Не пытайся объять необъятное: поддерживай актуальные версии браузеров, а для старых — только критичные функции. Главное — не паникуй, когда что-то съезжает, а методично исправляй.

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

Студия WNDER