Кроссбраузерностью называется одинаковое изображение и работа веб-ресурса в разных браузерах. Если не учесть это на стадии верстки, то после создания портала можно увидеть, что в различных браузерах он изображается по-разному и не всегда как нужно.
Основные движки для браузеров
Почему появляется эта проблема? Просто в браузерах находятся различные движки. Именно они отвечают за обработку, загрузку, расчет и изображение информации. И хотя сейчас есть множество разных браузеров, все они делятся по установленным движкам, которых не так уж и много:
1. WebKit — разработка компании Эйпл, здесь находится открытый изначальный код, который применяется для браузере Сафари. Этот движок в 2008-2013 гг. использовался Гугл для браузера Хром.
2. Blink — разработка Гугл, здесь также находится открытый изначальный код, используется для проекта Chromium. Установлен в Хром, Опера, Яндекс, Вивальди. Усовершенствованием движка занимаются множество компаний: Опера, Интел, IBM, Яндекс.
3. EdgeHTML — разработка Майкрософт, здесь находится закрытый изначальный код, применяется для браузера Edge. Со стартом Виндовс 10 он заменил движок Trident, находится лишь на этой ОС.
4. Gecko — разработка Мозила, находится открытый изначальный код, применяется в браузерах Файрфокс и Тор.
Проблема разного изображения верстки состоит в том, что различные движки по-разному принимают и показывают определенные css-стили и непосредственно информацию в html-тегах. К примеру, браузер Edge делает подсветку всех телефонных номеров, добавляя собственные стили.
На оригинале веб-ресурса эти телефонные номера написаны как простой текст, который ни куда не ссылается, но Edge показывает как ссылку.
Что делать?
Поняв что такое кроссбраузерная верстка, появляется вопрос, что можно сделать, чтобы сайт корректного отображался в описанных браузерах.
Применение префиксов
Это различные приставки к наименованиям CSS-свойств, которые использует определенный браузер.
Разработчики браузеров назвали ряд причин применения префиксов:
• частично могут реализовать функционал;
• экспериментальное свойство, на стадии разработки;
• свойство прописано для определенного браузера, и его нет в обычном перечне свойств.
Деление стилей
Способ состоит в том, чтобы выделить конкретный браузер и установить соответствующий стиль. В Интернет Эксплорер применяются комментарии, понимающиеся лишь им, другие же видят этот код просто как текст.
Сегодня браузеры показывают сайты с учетом установленных стандартов, и часто проблемы появляются со старыми вариантами веб-ресурсов. Чтобы сайт был одинаковым на всех браузерах, нужно устанавливать префиксы, грамотно сделать верстку и постараться избегать применения CSS-хаков. Для крупных сайтов нужно продумать открытие в Интернет Эксплорер.