Какие инструменты и методы используются для кроссбраузерной верстки

Что проверяют

Умеете ли вы заранее зафиксировать, какие браузеры поддерживаете, и обеспечить совместимость автоматически, а не чинить её после жалоб. Следом обычно спрашивают, какой браузер доставлял больше всего проблем и как вы это тестировали.

Как отвечать

Основа: список целевых браузеров задаётся в Browserslist (.browserslistrc или поле в package.json), и от него работают остальные инструменты:

• Autoprefixer или Lightning CSS: добавляют вендорные префиксы, руками их не пишут;
• Babel с @babel/preset-env или SWC: транспилируют синтаксис, а core-js с useBuiltIns: "usage" подключает только нужные полифиллы;
• Can I Use, таблицы MDN и Baseline: отвечают, можно ли уже брать возможность. Метка Baseline «Widely available» значит, что она давно и стабильно работает во всех основных браузерах;
• @supports и прогрессивное улучшение: базовый вариант работает везде, улучшенный включается там, где есть поддержка;
• сброс стилей: modern-normalize или свой минимальный reset выравнивают стартовые стили форм и заголовков;
• линтеры: Stylelint с плагином на неподдерживаемые свойства и eslint-plugin-compat сверяют код с тем же Browserslist;
• тестирование: Playwright гоняет тесты в Chromium, Firefox и WebKit, облачные фермы вроде BrowserStack дают реальные устройства.

Полезно сказать, что главный источник проблем сейчас Safari, особенно на iOS, где сторонние браузеры в большинстве случаев тоже работают на WebKit. Internet Explorer давно снят с поддержки и в требованиях почти не встречается.

Где спотыкаются

Советуют polyfill.io. В 2024 году домен сменил владельца и начал раздавать вредоносный код, подключать скрипт оттуда нельзя. Полифиллы собирают сами через core-js.

Проверяют только в режиме эмуляции устройств Chrome DevTools. Это тот же движок Blink, и баги WebKit так не видны, например 100vh на мобильном Safari, который не учитывает панели браузера. Для высоты экрана берут dvh или svh.

Называют jQuery способом решения кроссбраузерности. Это было актуально во времена IE, сейчас различия DOM API минимальны, а проблемы живут в CSS и новых API.