< H / $ > Хак/Собесов

Перейти на PRO

Почему верстка может по-разному отображаться в разных браузерах (кроссбраузерность)

«Почему верстка может по-разному отображаться в разных браузерах (кроссбраузерность)» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Разработчик

Ответ

Разные браузеры используют разные движки рендеринга (Blink в Chrome, Gecko в Firefox, WebKit в Safari), которые могут интерпретировать CSS и JS по-своему. Также влияют:

Префиксы CSS
Некоторые свойства требуют вендорных префиксов (-webkit-, -moz-):

    .box {
      -webkit-border-radius: 5px; /* Старые Safari */
      -moz-border-radius: 5px;    /* Firefox */
      border-radius: 5px;         /* Современные браузеры */
    }

Поддержка фич
Например, gap в Flexbox раньше работал только в Firefox.
Разные версии стандартов
Браузеры могут реализовывать новые API с задержкой (например, WebGPU).

Как избежать:

Используйте Autoprefixer для CSS
Проверяйте поддержку на caniuse.com
Тестируйте в кросс-браузерных инструментах (BrowserStack)
Применяйте полифиллы для JS (например, core-js)