Представьте, что вы испекли идеальный пирог. Красивый, румяный, с начинкой. Но подали его на разных тарелках — в одной он выглядит шикарно, а в другой разваливается. Примерно так же бывает с сайтами: в Chrome всё супер, а в Firefox — съехало. Кроссбраузерная верстка — это про то, чтобы ваш "пирог" был вкусным на любой "тарелке". В этой статье я расскажу, как этого добиться, и поделюсь секретами, которые накопил за 10 лет работы.

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

Каждый браузер — это как отдельный переводчик. Chrome, Firefox, Safari, Edge — у каждого свой движок. Они по-разному читают CSS и HTML. Например, старые версии Internet Explorer могли игнорировать современные свойства. Даже сейчас есть нюансы: Safari не любит некоторые flex-свойства, а Firefox иначе считает отступы. Поэтому задача разработчика — написать код так, чтобы он работал везде.

Главный секрет — не полагаться на "магию". Тестируйте на реальных браузерах. Используйте инструменты вроде BrowserStack или просто откройте сайт на разных устройствах.

Лайфхак: Всегда проверяйте верстку на трёх основных браузерах: Chrome, Firefox, Safari. Если работает в них — скорее всего, будет работать и в остальных.

Базовые правила кроссбраузерности

Чтобы не было сюрпризов, соблюдайте несколько простых правил. Они как фундамент дома — без них всё рухнет.

  • Валидный код. Проверяйте HTML и CSS через W3C Validator. Ошибки в разметке — главная причина проблем.
  • DOCTYPE. Всегда указывайте <!DOCTYPE html> в начале. Это заставляет браузеры работать в стандартном режиме.
  • Сброс стилей. Используйте normalize.css или простой сброс: * { margin: 0; padding: 0; box-sizing: border-box; }.
  • Префиксы CSS. Для новых свойств (вроде flex, grid) добавляйте вендорные префиксы: -webkit-, -moz-, -ms-.

Пример кода с префиксами:

.container {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
СвойствоПрефиксыБраузеры
flex-webkit-, -moz-, -ms-Chrome, Firefox, IE
transform-webkit-, -moz-, -o-Safari, Firefox, Opera
animation-webkit-, -moz-Chrome, Safari

Адаптивность и медиазапросы

Кроссбраузерность тесно связана с адаптивностью. Сайт должен работать на телефонах, планшетах и десктопах. Медиазапросы — ваш главный инструмент. Но помните: старые браузеры (IE8) их не понимают. Для них используйте полифиллы или упрощённую версию.

Пример медиазапроса:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Совет: используйте mobile-first подход. Сначала пишите стили для маленьких экранов, потом добавляете медиазапросы для больших. Это проще и меньше ошибок.

Правило: Никогда не используйте position: fixed без проверки на мобильных. В Safari на iOS с этим могут быть проблемы с клавиатурой.

JavaScript и кроссбраузерность

Скрипты тоже могут вести себя по-разному. Особенно если вы используете старые методы. Например, addEventListener в IE8 не работал — приходилось писать attachEvent. Сейчас это редкость, но лучше перестраховаться.

Пример универсального кода:

function addEvent(element, event, handler) {
  if (element.addEventListener) {
    element.addEventListener(event, handler);
  } else if (element.attachEvent) {
    element.attachEvent('on' + event, handler);
  } else {
    element['on' + event] = handler;
  }
}

Современные фреймворки (React, Vue) решают эту проблему за вас. Но если пишете на чистом JS — проверяйте поддержку методов на caniuse.com.

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

Тестировать вручную — долго. Используйте автоматизированные инструменты:

  • BrowserStack — облачный сервис для тестов на реальных устройствах.
  • LambdaTest — аналог с бесплатным тарифом.
  • Can I Use — сайт для проверки поддержки свойств.
  • Autoprefixer — плагин для автоматической расстановки префиксов.

Пример использования Autoprefixer в сборке Gulp:

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function() {
  return gulp.src('src/css/*.css')
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest('dist/css'));
});

Этот код автоматически добавит префиксы для последних двух версий браузеров.

Что в итоге

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

Студия WNDER