Кроссбраузерность — корректная работа сайта в разных браузерах

Браузеров много и они несколько по-разному отображают страницы. Способность сайта корректно отображаться в разных браузерах называется кроссбраузерность.

Наиболее рациональным требованием к верстке является сохранение эстетичности отображения сайта в различных браузеров с допущением, что некоторые элементы могут отображаться немного по разному. Этим путём идут все крупные проекты, что легко проверить, если наложить друг на друга снимки экрана из различных браузеров.

Однако, у заказчиков часто бывает требование добиться абсолютно идентичного отображения сайта во всех браузерах (с точностью до пиксела). Это достижимо, но не очень рационально, так как увеличивает стоимость разработки, а ощутимых преимуществ не даёт. Реальная конверсия большинства сайтов на самом деле слабо зависит от эстетической составляющей — гораздо большее значение имеет удобство интерфейса и качество представленной информации.

Современные сайты обычно адаптируют под Internet Explorer начиная с версии 8 и под другие браузеры (Google Chrome, Mozilla Firefox и Opera) актуальных на момент разработки версий. Разработка под устаревшие версии браузеров, как правило, не особо рациональна: это приводит к снижению сопровождаемости проекта и иногда заставляет отказываться от современных технологий в разработке.

Корректное отображение в разных браузерах — важное требование в ТЗ, но тут важно перечислить только те браузеры, поддержка которых действительно нужна для эффективности проекта. Всё просто: на «затачивание» вёрстки под большое количество версий браузеров требуются ресурсы, которые оплачиваются из кармана Заказчика, а эти затраты должны окупиться — если доля пользователей какой-либо версии браузера в абсолютном выражении будет составлять, например, 20 человек в год, то обычно нет смысла тратить время на оптимизацию под этот браузер.

Cтатьи по теме:

Все технологии фронтенд-разработки: язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript
Содержание и внешний вид каждой страницы сайта определяется HTML-кодом и содержанием таблицы стилей CSS, а поведение интерфейса — скриптами JavaScript.
Валидность и семантичность HTML
Валидность и семантичность HTML кода определяет качество сайта с точки зрения поисковых систем.
Адаптивный и отзывчивый дизайн
​Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн. Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.
Поддержка устаревших браузеров
Поддержка устаревших браузеров, как правило, накладывает ограничения на функционал и гарантированно увеличивает стоимость разработки и сопровождения.
HTML5 — новая версия стандарта
HTML — это язык для структурирования и представления содержимого, HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, которая ещё находится в разработке, но уже является вполне рабочей. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).
Twitter Bootstrap — фронтенд-фреймворк
Клиентский html-, css- и js-фреймворк, использование которого позволяет существенно ускорить разработку клиентской части сайта или веб-приложения. Из основных возможностей — динамический дизайн по сетке, типографика, множество компонентов (веб-формы, таблицы, навигационные элементы, кнопки и прочие контролы), javascript-плагины (выпадающие меню, слайдеры, оповещения и прочее)...
Увеличиваем скорость работы сайта при помощи оптимизации JavaScript
Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS-кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.

Тематические технологии:

Язык разметки HTML
CSS — каскадные таблицы стилей
Язык программирования JavaScript
Библиотека React
Библиотека MobX
Библиотека MobX State Tree
Система сборки WebPack
Платформа NodeJS