Кроссбраузерность
Last updated
Last updated
Кроссбраузерность - это термин, означающий способность сайта одинаково отображаться во всех нужных пользователям браузерах.
Почему эта проблема вообще возникла?
Как писалось ранее в статье о , на рынке браузеров существует несколько крупных игроков, которые часто по-разному отображают те или иные HTML элементы и по-разному имплементируют те или иные свойства CSS.
Появляется все большее количество новых мобильных устройств со своими браузерами. Internet Explorer продолжает медленно, но уверенно терять своих пользователей, которые переходят в более современные браузеры. Chrome продолжает насиловать оперативную память компьютеров. Microsoft не устает пытаться реабилиторовать Edge. Все это и многое другое происходит на рынке браузеров, и веб-разработчикам приходится с этим жить, и все это учитывать.
Вне сомнения, корректное отображение во всех нужных браузерах - must have для любого сайта. Любой маркетолог будет долго рассказывать, как это важно для лояльности пользователей и конверсии, поэтому верстать кроссбраузерно - обязательный навык любого современного фронт-энд разработчика.
Какие браузеры нужно поддерживать?
Хорошей практикой в любом проекте, будь то продуктовая компания с большим опытом на рынке или только появившийся старт-ап - изучение целевой аудитории и составление списка поддерживаемых браузеров на основе аналитических данных (чаще всего с помощью инструментов Google Analytics и Yandex Metrica).
В Google Analytics собираются примерно такие данные:
Тут можно увидеть количество пользователей, использующих тот или иной браузер, их абсолютное количество, а также процентное соотношение. В соответствии с этими данными принимается решение о браузерах, которые веб-разработчики должны поддерживать. Обычно нужно поддерживать все браузеры, у которых процентное количество пользователей превышает 2%. Но в некоторых случаях, если даже 1 или 2 процента в абсолютных числах является большис количеством пользователей, этот браузер тоже добавляется в список поддерживаемых.
Что делать, если таких данных нет? Например, вы только-только начали разрабатывать сайт?
Если у вас нет четких требований от маркетологов о списке поддерживаемых браузеров, обычно за основу берутся самые доминирующие игроки рынка - Internet Explorer (обычно только 11 версии), Google Chrome, Opera, Мozilla FireFox, Safari, Microsoft Edge, Netscape - и ориентируются на последние 2-3 их версии.
Как верстать кроссбраузерно?
Используйте вендорные префиксы, где это необходимо. Вендорные префиксы - это приставки, добавляемые в свойства CSS, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт CSS свойств. То есть, например, если какой-нибудь из браузеров решил добавить что-нибудь крутое, но этот функционал и правила его поведения еще до конца не оговорены и не утверждены с составителями стандартов, то браузер может имплементировать его с соответствующей приставкой. Свойство с такой приставкой будет работать только в браузере, для которого эта приставка актуальна. Существуют следующие вендорные префиксы:
-o- — префикс для браузера Опера
-moz- — префикс для браузеров из семейства Mozilla
-ms — префикс для Internet Explorer 8
-webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
-icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
-khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем.
Например, мы уже давно можем стилизировать placeholder для input-ов, но какие-то браузеры имплементировали это как псевдоэлемент, а какие-то - как псевдокласс. Поэтому, чтобы стилизовать placeholder одинаково для всех браузеров, нужно писать примерно так:
Каждый раз, когда изучаете новое свойство CSS, не поленитесь долистать до конца документации и проверить, необходимо ли дописывать для этого свойства различные вендорные префиксы. Если пишете в чистом HTML и CSS, то это придется делать руками и самостоятельно прописывать вендорные префиксы в CSS. Если в проекте используются различные сборщики, такие как Gulp или Webpack, есть множество плагинов, в частности autoprefixer, которые сами добавят нужные вендорные префиксы в ваш CSS код.
В поисковую строку вводим position:sticky.
И видим таблицу. В данной таблице показано - браузеры, их версии и эти вещи окрашены в разные цвета.
Ярко зеленый цвет, означает, что свойство полностью поддерживается, вендорный префикс не требуется. По наведению на соответствующий квадрат, можно получить дополнительную информацию
Светло-зеленый(болотный) цвет, означает, что данное свойство поддерживается частично. Частично - значит либо с вендорным префиксом, либо что-то может некорректно отрабатывать. По наведению на соответствующий квадрат, можно получить дополнительную информацию и увидеть, что именно работает может работать некорректно.
Красный цвет означает, что свойство не поддерживается в данной версии браузера вообще.
Внизу под таблицей есть разные вкладки, которые тоже стоят внимания. Known issues, Notes - это пометки по свойству, о багах или особенностях его поведения в разных браузерах, о которых широко известно. С этой информацией тоже стоит ознакомиться. И тут можно ее искать, если вы столкнулись с багом, связанным с кроссбраузерностью (например, у вас что-то некорректно работает только в одном браузере).
Тестируйте свою работу в разных браузерах. Установите себе самые популярные браузеры последней версии. Некоторые браузеры вы, конечно, не сможете себе установить (например Safari для Windows не выпускают с 2012 года), но все самые популярные, типа Chrome, Mozilla Firefox, Opera, Internet Explorer 11 и так далее у вас должны стоять.
Перед тем, как отдавать готовую работу (заказчику, ментору при обучении, при мердже куда-то в проект), проверьте отображение и работу функционала, который вы написали, в этих браузерах. Если вы видите, что что-то отрабатывает не так, как нужно, ищите причину и исправляйте. Возможна ситуация, когда вы не учли рекомендацию из пункта 3 и свойство, которое вы применили, не работает в нужном вам браузере. Проще всего при этом будет поискать другие варианты решения.
Если вам ставит кто-либо (чаще всего отдел тестирования) баг по кроссбраузерности, попытайтесь выяснить как можно больше деталей. Например, вам ставят баг - в Mozilla Firefox кнопка не кликабельна, необходимо исправить. Такой информации обычно недостаточно. Выясните, повторяется ли этот баг только в Mozilla Firefox, или в остальных браузерах тоже. В каких версиях браузера этот баг повторяется, или, возможно, во всех. В какой операцинной системе (Ubuntu, Windows, MacOS). Эти вопросы помогут вам локализировать проблему и знать, где ее воспроизвести, подробно ее изучить и правильно решить.
Не стесняйтесь гуглить конкретные ошибки. Например, вы понимаете, что у вас что-то некорректно отрабатывает. Пример из реальной практики: в один прекрасный момент тестировщики заметили, что в браузерах Safari на iOS определенной версии текст в кнопках не выровнен по центру. Это было характерно только для браузеров Safari на iOS 9 версии и ниже, что было выяснено как путем самостоятельной проверки, так и общения с тестировщиками. Разработчик зашел на browserstack.com, в эмулятор нужного окружения, и увидел, что текст в кнопках выравнивается с помощью flex. Но на данном окружении почему-то этот эффект не сработал. Путем долгого поиска в интернете по разнообразнейшним запросам, был найден комментарий на stackoverflow, в котором было написано, что в Safari до определенной версии тег button не может быть flex-контейнером. Flex-элементом он может быть, но контейнером - нет. Почему? Ну, так решили. Все, избавились от display: flex, выровняли по-другому, баг исправлен.
Кроссбраузерность сайта - это не та тема, которую можно сесть, выучить - и все, вы ее знаете. Это такая вещь, которая постоянно меняется, исправляется, дополняется. Нужно всегда держать руку на пульсе развития технологий и эволюции браузеров. Не обязательно и, в целом, не нужно запоминать наизусть, где какие свойства отрабатывают некорректно. Потому что сегодня они работают некорректно, а завтра разработчики браузеров уже это исправили. Проверяйте работу в разных браузерах, знайте где искать информацию про особенности поведения технологий и держите руку на пульсе последних обновлений.
Используйте сброс и/или нормализацию стандартных стилей браузера. Подробнее об этом методе можно почитать .
Новые свойства CSS и JS перед использованием проверяйте на сайте . Это ресурс, который отслеживает поддержку самыми популярными браузерами различных свойств CSS и JS. Если вы хотите использовать какую-то технологию, но точно не уверены, кроссбраузерная ли она, заходите на caniuse и проверяйте, можете ли вы ее использовать в соответствии со списком браузеров, которые вам нужно поддерживать. Например, вы думаете, использовать ли в проекте position: sticky для своего хэдера. Вы в процессе изучения данного свойства должны были заметить, что иногда авторы статей прямым текстом предупреждают, что технология еще не до конца имплементирована во все браузеры. Идем на caniuse.
Есть также масса сервисов для проверки вашего сайта на кроссбраузерность. Чаще всего их основная функция - создание скриншотов вашего сайта. Потом вы их смотрите и анализируете. Есть также сервисы, где можно смотреть ваш сайт в лайв-режиме, т.н. эмуляторы. То есть, вы зашли на сайт в эмуляторе и он вам показывает, как он отображается в той версии браузера, который вы выбрали. Поинтересуйтесь такими сервисами как , , .
Интересуйтесь последними обновлениями в браузерах и во фронт-энде в целом. Масса сайтов, типа , , публикуют подборки с самыми интересными и свежими материалами по фронт-энду. В них часто мелькают различные обновления браузеров, и новинки в веб-разработке. Читайте эти подборки, интересуйтесь обновлениями, держите руку на пульсе.
