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

Question

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

Тип вопроса: 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)

Ответ 18+ 🔞

Вот ты сидишь, такой весь в себе, пишешь код, всё красиво, а потом — бац! — открываешь в другом браузере, а там пиздец, ёпта! Картинка плывёт, кнопки разъехались, как пьяные матросы в увольнении. А знаешь, почему так? Да потому что эти браузерные движки — они как разные начальники в одном цеху. Один (Blink в Хроме) говорит: «Делай так!», второй (Gecko в Фаерфоксе) орёт: «Нет, блядь, по моему уставу!», а третий (WebKit в Сафари) вообще молчит, но делает по-своему, хитрая жопа.

И вот из-за этой разноголосицы случаются три главные беды:

Эти ёбаные префиксы CSS. Ну реально, как в средние века, ей-богу. Хочешь закруглить уголок — пиши три раза одно и то же, а то не поймут.

.box {
  -webkit-border-radius: 5px; /* Для старых яблочных девайсов, которые ещё помнят Джобса */
  -moz-border-radius: 5px;    /* Для лисёнка, который тоже любит покрутить */
  border-radius: 5px;         /* Ну а это для всех, кто уже в нашем веке */
}

Поддержка фич — просто волнение ебать. Один браузер уже десять лет как умеет в gap для Flexbox, а другой только недавно соизволил. И сидишь ты такой: «Ну как так-то, нахуй? Всё же по спецификации!»
Версии стандартов — это отдельный цирк. Какой-нибудь новый API, типа WebGPU, один браузер внедряет, а остальные два года смотрят на него, как на хуй с горы, и думают: «А надо ли?»

Ну и что делать, спросишь ты? Не париться же!

Autoprefixer — вот твой лучший друг. Он за тебя эти префиксы натыкает, голова не болит.
caniuse.com — священная книга. Прежде чем использовать какую-нибудь крутую фичу, загляни туда. Подозрение ебать чувствую, если поддержка меньше 98%.
BrowserStack и ему подобные — твой полигон. Гоняй там свою верстку по всем браузерам, особенно по старым IE, если нужно, чтобы и там не разъезжалось.
Полифиллы (типа core-js) — это как костыли для браузера. Не понимает он новую JS-фишку — подсунул ему полифилл, и он сразу поумнел.

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