От автора: спасибо, Господи, за то, что веб-браузеры постоянно обновляются. В течение стольких лет нам приходилось полагаться на пользователей, чтобы приложить усилия для загрузки новых версий по мере их выпуска. Но теперь даже Microsoft’s Edge присоединились к постоянному обновлению.
Это было не только гениально в плане безопасности, но и спасением для дизайнеров, которые хотят использовать новейшие функции CSS3. Несомненно, это привело к тому, что многие из нас чувствовали себя комфортнее при использовании таких функций, как Flexbox , зная, что у большинства пользователей поддержка браузеров обеспечена благодаря своевременному обновлению, что уже помогает продвигать сетку CSS в производственных средах.
Но мы также знаем, что до сих пор есть пользователи, которые работают с более старым программным обеспечением. Удивительно, но по данным NetMarketShare , Internet Explorer 11 по-прежнему занимает третье место в списке наиболее часто используемых браузеров за 2017 год. IE 8 занял шестое место, в то время как IE 9 занял десятое место. На IE по-прежнему приходится около 13% использования десктопных устройств.
Несомненно, цифры не самые высокие, когда дело касается IE. Но они все же достаточно высоки, что нужно учитывать при создании нового веб-сайта. Вопрос в том, как мы продолжаем поддерживать старые браузеры при использовании новых функций? И, как далеко мы должны зайти в этом?
Застрял в прошлом
В идеальном мире дизайнеры хотели бы видеть, как Internet Explorer просто останется в истории. Похоже, что его кончина еще не скоро. Хотя более дешевые ПК и простое использование мобильного Интернета, указывают на то, что IE в конечном счёте уйдёт с доски. По крайней мере, это касается потребителя.
Корпорации по-прежнему используют более старые версии Windows, а это значит, что используется и IE. Edge доступен только для Windows 10. Поэтому, если крупные компании будут пользоваться Windows 7 или 8, IE останется выбором по умолчанию. Конечно, могут использоваться Chrome и Firefox, но это не обязательно означает, что пользователям в этих корпорациях разрешено устанавливать их.
Кое-кто опережает IE. Последняя версия Safari от Apple не будет работать на некоторых старых компьютерах Mac или iOS. Казалось бы, эффект здесь будет действовать на мобильный дизайн, так как есть еще несколько старых моделей iPhone. Safari является вторым наиболее широко используемым мобильным браузером.
Принимая это во внимание, нам нужно начать серьезно относиться к старым браузерам. Однако это не означает, что мы должны смущаться и избегать использования последних обновлённых функций.
Использование новейшего и крутейшего — с фолбэк поддержкой
Итак, как мы можем внедрять новые функции, сохраняя при этом проекты в старых браузерах? Когда дело доходит до CSS, использование вспомогательных методов может быть огромной помощью. В общем случае резерв — это код, который позволит устаревшему браузеру использовать приемлемую альтернативу тому, чего мы пытаемся достичь.
Например, если вы используете Flexbox, есть некоторые доступные префиксы браузера , которые позволят ограничить поддержку в более старых версиях Chrome, Safari, Firefox и IE. Не каждая функция CSS будет иметь этот тип резервного копирования, но обычно всегда есть способ обойти проблемы, с которыми вы сталкиваетесь.
Чем дальше вы идете в плане предоставления альтернативы, тем сложнее её получить. Но по мере тестирования различных версий браузера и устройства, вы можете проворачивать хитрости.
Ваша работа также может быть упрощена с помощью инструментов, типа Modernizr . Это скрипт, который обнаружит поддержку браузера для определенных функций и соответственно добавит класс CSS в body страницы. Затем вы можете использовать этот класс для предоставления альтернативных стилей, если функция не поддерживается в браузере пользователя.
Самое замечательное в том, что перед загрузкой скрипта можно выбрать, какие функции вы хотите найти. Например, вы можете выбрать такие функции, как canvas, HTML5 Audio / Video или даже emoji. Это позволяет сделать вещи максимально возможными, обеспечивая большую помощь в обеспечении обратной совместимости.
Насколько сильно может быть устаревшим браузер?
Мы знаем, что мы можем поддерживать устаревшие браузеры. Но как далеко мы можем зайти? Если вы спросите 100 разных дизайнеров, то получите 100 разных ответов. Это потому, что на самом деле не существует конкретного правила об обратной совместимости.
Лично я считаю, что часть уравнения должна быть о функциях, которые вы используете. Такие функции, как Flexbox или CSS Grid, которые влияют на макет, имеют жизненно важное значение для удобства использования веб-сайта. Поэтому важно предоставить какой-то резерв для старых систем. Такие вещи, как макет и навигация, следует рассматривать как «слишком крутые, чтобы потерпеть неудачу».
Когда дело доходит до предметов, которые больше подходят для эстетики, чем для функциональности, их часто можно оставить как есть. Если вы используете свойства CSS3, такие как тени и закругленные углы, вероятно, не стоит тратить время на предоставление альтернатив. Сайт должен быть таким же удобным для использования с ними или без них.
Если вы надеетесь выяснить, какая версия браузера должна служить точкой отсчёта, имеет смысл ссылаться на упомянутые выше номера использования. И если у вас есть данные этого типа для сайта, над которым вы работаете, еще лучше. Итак, если вы знаете, что на вашем сайте все еще есть посетители, которые используют IE8, то стоит убедиться, что они могут получить доступ к контенту.
Что касается моей собственной подпрограммы, то для IE8 она такая же, как я тестирую десктопные браузеры. Также я проверяю Safari 6 вместе со случайной версией Chrome и Firefox. На мобильном телефоне я обычно обращаюсь к устройствам Android 4.x и iOS 7. Конечно, ваши потребности и предпочтения могут отличаться.
Эволюция продолжается …
Вероятно, не удивительно, что старые браузеры все еще используются. Веб-дизайнеры уже много лет пробивают себе путь через эту проблему. Но ситуация намного лучше, чем в прошлом. Любой, кто имел дело с IE6, может это подтвердить.
Со временем мы увидим, как старые настольные и переносные компьютеры отправляются в корзину. И даже корпоративным пользователям придется в конечном итоге всё обновить. Поскольку современные браузеры постоянно обновляются, новые системы должны идти в ногу с развитием веб-дизайна.
Похоже, что более интересной задачей будет поддержка старых мобильных устройств. Хотя мы видим пользователей в непрерывном цикле обновления во многих областях мира, некоторые из них по-прежнему будут использовать устаревшее оборудование и программное обеспечение. Поэтому, возможно, наш резервный фокус будет больше двигаться к маленькому экрану.
Независимо от всего этого, основное внимание должно быть сосредоточено на том, чтобы контент был доступен как можно большему числу людей.
Автор: Eric Karkovack
Источник: https://speckyboy.com/
Редакция: Команда webformyself.
