📗Кроссбраузерность

Что такое кроссбраузерность?

Кроссбраузерность - это термин, означающий способность сайта одинаково отображаться во всех нужных пользователям браузерах.

Почему эта проблема вообще возникла?

Как писалось ранее в статье о сбросе стилей, на рынке браузеров существует несколько крупных игроков, которые часто по-разному отображают те или иные HTML элементы и по-разному имплементируют те или иные свойства CSS.

Появляется все большее количество новых мобильных устройств со своими браузерами. Internet Explorer продолжает медленно, но уверенно терять своих пользователей, которые переходят в более современные браузеры. Chrome продолжает насиловать оперативную память компьютеров. Microsoft не устает пытаться реабилиторовать Edge. Все это и многое другое происходит на рынке браузеров, и веб-разработчикам приходится с этим жить, и все это учитывать.

Вне сомнения, корректное отображение во всех нужных браузерах - must have для любого сайта. Любой маркетолог будет долго рассказывать, как это важно для лояльности пользователей и конверсии, поэтому верстать кроссбраузерно - обязательный навык любого современного фронт-энд разработчика.

Какие браузеры нужно поддерживать?

Хорошей практикой в любом проекте, будь то продуктовая компания с большим опытом на рынке или только появившийся старт-ап - изучение целевой аудитории и составление списка поддерживаемых браузеров на основе аналитических данных (чаще всего с помощью инструментов Google Analytics и Yandex Metrica).

В Google Analytics собираются примерно такие данные:

crossbrowser

Тут можно увидеть количество пользователей, использующих тот или иной браузер, их абсолютное количество, а также процентное соотношение. В соответствии с этими данными принимается решение о браузерах, которые веб-разработчики должны поддерживать. Обычно нужно поддерживать все браузеры, у которых процентное количество пользователей превышает 2%. Но в некоторых случаях, если даже 1 или 2 процента в абсолютных числах является большис количеством пользователей, этот браузер тоже добавляется в список поддерживаемых.

Что делать, если таких данных нет? Например, вы только-только начали разрабатывать сайт?

Если у вас нет четких требований от маркетологов о списке поддерживаемых браузеров, обычно за основу берутся самые доминирующие игроки рынка - Internet Explorer (обычно только 11 версии), Google Chrome, Opera, Мozilla FireFox, Safari, Microsoft Edge, Netscape - и ориентируются на последние 2-3 их версии.

Как верстать кроссбраузерно?

1. Используйте сброс и/или нормализацию стандартных стилей браузера. Подробнее об этом методе можно почитать здесь.

2. Используйте вендорные префиксы, где это необходимо. Вендорные префиксы - это приставки, добавляемые в свойства CSS, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт CSS свойств. То есть, например, если какой-нибудь из браузеров решил добавить что-нибудь крутое, но этот функционал и правила его поведения еще до конца не оговорены и не утверждены с составителями стандартов, то браузер может имплементировать его с соответствующей приставкой. Свойство с такой приставкой будет работать только в браузере, для которого эта приставка актуальна. Существуют следующие вендорные префиксы:

   • -o- — префикс для браузера Опера

   • -moz- — префикс для браузеров из семейства Mozilla

   • -ms — префикс для Internet Explorer 8

   • -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome

   • -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)

   • -khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем.

   Например, мы уже давно можем стилизировать placeholder для input-ов, но какие-то браузеры имплементировали это как псевдоэлемент, а какие-то - как псевдокласс. Поэтому, чтобы стилизовать placeholder одинаково для всех браузеров, нужно писать примерно так:

   ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: pink;
    }
   ::-moz-placeholder { /* Firefox 19+ */
    color: pink;
    }
   :-ms-input-placeholder { /* IE 10+ */
    color: pink;
   }
   :-moz-placeholder { /* Firefox 18- */
     color: pink;
   }

   Каждый раз, когда изучаете новое свойство CSS, не поленитесь долистать до конца документации и проверить, необходимо ли дописывать для этого свойства различные вендорные префиксы. Если пишете в чистом HTML и CSS, то это придется делать руками и самостоятельно прописывать вендорные префиксы в CSS. Если в проекте используются различные сборщики, такие как Gulp или Webpack, есть множество плагинов, в частности autoprefixer, которые сами добавят нужные вендорные префиксы в ваш CSS код.

3. Новые свойства CSS и JS перед использованием проверяйте на сайте caniuse.com. Это ресурс, который отслеживает поддержку самыми популярными браузерами различных свойств CSS и JS. Если вы хотите использовать какую-то технологию, но точно не уверены, кроссбраузерная ли она, заходите на caniuse и проверяйте, можете ли вы ее использовать в соответствии со списком браузеров, которые вам нужно поддерживать. Например, вы думаете, использовать ли в проекте position: sticky для своего хэдера. Вы в процессе изучения данного свойства должны были заметить, что иногда авторы статей прямым текстом предупреждают, что технология еще не до конца имплементирована во все браузеры. Идем на caniuse.

   В поисковую строку вводим position:sticky.

   

   crossbrowser

   И видим таблицу. В данной таблице показано - браузеры, их версии и эти вещи окрашены в разные цвета.

   • Ярко зеленый цвет, означает, что свойство полностью поддерживается, вендорный префикс не требуется. По наведению на соответствующий квадрат, можно получить дополнительную информацию

   • Светло-зеленый(болотный) цвет, означает, что данное свойство поддерживается частично. Частично - значит либо с вендорным префиксом, либо что-то может некорректно отрабатывать. По наведению на соответствующий квадрат, можно получить дополнительную информацию и увидеть, что именно работает может работать некорректно.

   • Красный цвет означает, что свойство не поддерживается в данной версии браузера вообще.

   Внизу под таблицей есть разные вкладки, которые тоже стоят внимания. Known issues, Notes - это пометки по свойству, о багах или особенностях его поведения в разных браузерах, о которых широко известно. С этой информацией тоже стоит ознакомиться. И тут можно ее искать, если вы столкнулись с багом, связанным с кроссбраузерностью (например, у вас что-то некорректно работает только в одном браузере).

4. Тестируйте свою работу в разных браузерах. Установите себе самые популярные браузеры последней версии. Некоторые браузеры вы, конечно, не сможете себе установить (например Safari для Windows не выпускают с 2012 года), но все самые популярные, типа Chrome, Mozilla Firefox, Opera, Internet Explorer 11 и так далее у вас должны стоять.

   Перед тем, как отдавать готовую работу (заказчику, ментору при обучении, при мердже куда-то в проект), проверьте отображение и работу функционала, который вы написали, в этих браузерах. Если вы видите, что что-то отрабатывает не так, как нужно, ищите причину и исправляйте. Возможна ситуация, когда вы не учли рекомендацию из пункта 3 и свойство, которое вы применили, не работает в нужном вам браузере. Проще всего при этом будет поискать другие варианты решения.

   Есть также масса сервисов для проверки вашего сайта на кроссбраузерность. Чаще всего их основная функция - создание скриншотов вашего сайта. Потом вы их смотрите и анализируете. Есть также сервисы, где можно смотреть ваш сайт в лайв-режиме, т.н. эмуляторы. То есть, вы зашли на сайт в эмуляторе и он вам показывает, как он отображается в той версии браузера, который вы выбрали. Поинтересуйтесь такими сервисами как crossbrowsertesting.com, browsershots.org, browserstack.com.

5. Интересуйтесь последними обновлениями в браузерах и во фронт-энде в целом. Масса сайтов, типа habr.ru, dou.ua, codeguida.com публикуют подборки с самыми интересными и свежими материалами по фронт-энду. В них часто мелькают различные обновления браузеров, и новинки в веб-разработке. Читайте эти подборки, интересуйтесь обновлениями, держите руку на пульсе.

6. Если вам ставит кто-либо (чаще всего отдел тестирования) баг по кроссбраузерности, попытайтесь выяснить как можно больше деталей. Например, вам ставят баг - в Mozilla Firefox кнопка не кликабельна, необходимо исправить. Такой информации обычно недостаточно. Выясните, повторяется ли этот баг только в Mozilla Firefox, или в остальных браузерах тоже. В каких версиях браузера этот баг повторяется, или, возможно, во всех. В какой операцинной системе (Ubuntu, Windows, MacOS). Эти вопросы помогут вам локализировать проблему и знать, где ее воспроизвести, подробно ее изучить и правильно решить.

7. Не стесняйтесь гуглить конкретные ошибки. Например, вы понимаете, что у вас что-то некорректно отрабатывает. Пример из реальной практики: в один прекрасный момент тестировщики заметили, что в браузерах Safari на iOS определенной версии текст в кнопках не выровнен по центру. Это было характерно только для браузеров Safari на iOS 9 версии и ниже, что было выяснено как путем самостоятельной проверки, так и общения с тестировщиками. Разработчик зашел на browserstack.com, в эмулятор нужного окружения, и увидел, что текст в кнопках выравнивается с помощью flex. Но на данном окружении почему-то этот эффект не сработал. Путем долгого поиска в интернете по разнообразнейшним запросам, был найден комментарий на stackoverflow, в котором было написано, что в Safari до определенной версии тег button не может быть flex-контейнером. Flex-элементом он может быть, но контейнером - нет. Почему? Ну, так решили. Все, избавились от display: flex, выровняли по-другому, баг исправлен.

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