Каждый, кто хоть раз верстал сайт, сталкивался с ситуацией: в Chrome всё идеально, а в старом Firefox — всё поехало. Или наоборот. Это как готовить борщ: вроде все ингредиенты те же, а вкус у каждой хозяйки свой. Браузеры тоже по-своему "готовят" ваш HTML. В этой статье я расскажу, как сделать так, чтобы ваш "борщ" понравился всем без исключения.

Digital-студия WNDER

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

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

Представьте, что браузер — это переводчик. Один переводит английскую фразу дословно, другой — по смыслу, третий — с ошибками. Так и с HTML: у каждого браузера свой движок, который интерпретирует код. Chrome, Firefox, Safari, Opera — у каждого свои особенности.

Основная причина проблем — неполное соблюдение стандартов W3C. Некоторые браузеры (особенно старые версии) поддерживают свойства CSS лишь частично. Например, flexbox в старом IE — это боль. Но современный веб требует, чтобы сайт работал везде, от Chrome на новом Mac до Safari на старом iPhone.

Хорошая новость: есть проверенные методы, которые помогают избежать 90% проблем. Давайте разберем их.

Правило №1: Начните с reset или normalize

Каждый браузер имеет свои стили по умолчанию. Где-то отступы у списков больше, где-то меньше. Где-то заголовки жирнее. Чтобы выровнять всё с нуля, используют CSS-файлы вроде reset.css или normalize.css.

Reset просто обнуляет все стили. Normalize — приводит их к единому виду, сохраняя полезные элементы. Я рекомендую normalize, потому что он менее агрессивен.

Пример подключения normalize:

<head>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
</head>

Без этого вы будете постоянно ловить баги с отступами и размерами. Это как строить дом на песке — быстро развалится.

Лайфхак: Используйте normalize.css, а не reset. Он сохраняет семантические стили, но выравнивает различия. Скачать можно с официального сайта или через CDN.

Правило №2: Префиксы для CSS-свойств

Некоторые свойства CSS еще не стандартизированы, и браузеры добавляют их с префиксами. Например, transform в старых версиях требует -webkit-transform для Chrome и Safari, -moz-transform для Firefox, -ms-transform для IE.

Сейчас это реже нужно, но для старых браузеров всё еще актуально. Пример:

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

Но не пишите префиксы вручную! Используйте инструменты автопрефиксации, например, PostCSS или Autoprefixer. Они сами добавят нужные префиксы на основе вашей конфигурации.

Правило №3: Используйте семантическую разметку

Семантическая верстка — это когда вы используете теги по их назначению: <header>, <nav>, <main>, <footer> и так далее. Это не только для SEO, но и для кроссбраузерности. Современные браузеры лучше понимают такой код.

Но есть нюанс: старые браузеры (IE 8 и ниже) не поддерживают эти теги. Для них нужен полифилл — скрипт, который создает эти элементы. Например, html5shiv.

<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->

Этот код подключает полифилл только для IE ниже 9-й версии. Остальные браузеры его просто игнорируют.

Правило №4: Пишите код без ошибок

Ошибки в HTML могут привести к непредсказуемому поведению. Незакрытый тег, неправильная вложенность — и браузер начинает "фантазировать". Особенно это касается IE.

Проверяйте код валидатором W3C. Это как проверка орфографии перед отправкой письма. Кажется мелочь, а помогает.

Пример типичной ошибки:

<p>Текст без закрывающего тега
<p>Новый абзац

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

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

Никакие теории не заменят практики. Используйте сервисы вроде BrowserStack или Sauce Labs, чтобы проверить, как выглядит сайт в разных браузерах и на разных ОС.

Но если бюджет ограничен, можно использовать бесплатные инструменты:

  • Плагин для Chrome — Responsive Viewer
  • Виртуальные машины для IE
  • Эмуляторы iOS для Safari

Также не забывайте про мобильные браузеры. Они часто имеют свои особенности.

Правило №6: Используйте CSS-сброс для таблиц и форм

Таблицы и формы — это отдельная боль. Браузеры по-разному стилизуют их по умолчанию. Например, в Safari и Chrome поля ввода выглядят по-разному.

Чтобы унифицировать, добавьте в свой CSS такие правила:

input, textarea, select, button {
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: 100%;
}

Это базовое выравнивание. Дальше уже стилизуете под свой дизайн.

Правило №7: Не забывайте про DOCTYPE

DOCTYPE — это первая строка HTML-документа. Она сообщает браузеру, как интерпретировать код. Если её нет или она неправильная, браузер переходит в "режим совместимости" и может вести себя непредсказуемо.

Правильный DOCTYPE для HTML5:

<!DOCTYPE html>

Это просто и работает везде. Старые версии HTML требовали длинных строк, но сейчас всё проще.

Правило №8: Используйте CSS-фолбэки

Если вы используете новое CSS-свойство, которое не поддерживается в старых браузерах, предусмотрите запасной вариант. Например, для flexbox можно использовать float или inline-block.

Пример:

.container {
    display: block; /* фолбэк */
    display: flex; /* основное */
}

Старые браузеры проигнорируют вторую строку и используют первую. Новые применят flexbox.

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

Используйте сайт caniuse.com. Там можно проверить, поддерживает ли конкретный браузер нужное свойство. Это как словарь для верстальщика.

Например, вы хотите использовать CSS Grid. Открываете caniuse, видите, что IE 11 поддерживает только старую версию. Решаете, нужен ли фолбэк или можно обойтись.

Правило №10: Пишите код по стандартам

Стандарты W3C — это не скучные документы, а ваш друг. Следуйте им, и проблем будет меньше. Например, используйте правильные типы для input, корректные атрибуты для ссылок.

Это банально, но многие игнорируют. Потом удивляются, почему в Safari форма не отправляется.

Что в итоге

Кроссбраузерная верстка — это не магия, а набор правил и практик. Главное — не игнорировать различия браузеров и заранее предусматривать их. Используйте normalize, проверяйте код, тестируйте на реальных устройствах. И тогда ваш сайт будет выглядеть хорошо везде.

Помните: невозможно учесть всё, но можно минимизировать риски. Начните с этих советов — и вы заметите, как меньше времени уходит на исправление багов.

Совет: Если сайт делается на заказ, всегда согласуйте список поддерживаемых браузеров с заказчиком. Это сэкономит нервы и время.

Удачной верстки!

Студия WNDER