Эта статья предназначена для разработчиков, которые не очень хорошо владеют JavaScript, но умеют использовать HTML и CSS для веб-разработки. Существует невероятная библиотека JavaScript с открытым исходным кодом под названием Modernizr, которая может эффективно решать проблемы, возникающие при кросс-браузерной веб-разработке, и на основе сценариев тестовых примеров условно загружать JS или CSS файлы. Modernizr определяет возможности CSS3 и HTML5, поддерживаемые браузером конечного пользователя. Если вы умны и у вас есть время, чтобы использовать эти данные, то вы можете разрабатывать веб-страницы, которые ведут себя по-разному на основе этого обнаружения. Например, вы можете определить, что браузер Edge версии 15 не поддерживает определенную функцию вашего главного CSS, и на основе этого предоставить запасной CSS для не поддерживаемых браузеров.
Это позволяет разработчикам тестировать новые функции, а также предоставлять запасные варианты для браузеров, в которых эти функции не поддерживаются. Этот процесс немного более эффективен и оперативен, чем традиционный поиск браузеров, и называется Feature detection.
Также проверьте псевдокласс CSS — псевдокласс dir() в CSS применяет стилизацию к элементам, которые соответствуют заданной направленности.
Что такое обнаружение особенностей?
Когда разработка пользовательского интерфейса была в темные века, разработчикам приходилось писать условные сценарии, чтобы убедиться, что новая функция HTML или CSS, которую они собираются использовать, поддерживается браузером. Но что если выйдет обновленная версия браузера, которая будет поддерживать эту функцию. Код останется прежним, а скрипт будет выполняться без необходимости, увеличивая сложность кода. В худшем случае вы останетесь в неведении, что код работает в обновленном браузере, и продолжите писать условные скрипты для будущих кодов.
Modernizr вводит функцию Feature Detection. Он проверит, поддерживает ли браузер данный код, и выдаст вам результат «false» или «true». Исходя из этого результата, вам нужно обновить код. Давайте рассмотрим, как установить и использовать Modernizr и некоторые из его возможностей, которые значительно упрощают разработку кроссбраузерных совместимых приложений.
Проверьте CSS Exclusions — Exclusions — это расширение возможностей плавания, которые существуют в CSS. В попытке позволить блокам контента «плавать» вокруг других элементов, Exclusions определяют, как инлайн-контент обтекает элементы.
Давайте начнем
В предыдущих версиях разработчикам нужно было загрузить и добавить в код файл modernizr.js. Но многое изменилось. Теперь вы можете выбрать необходимые функции в своем коде и вызвать Modenizer из облачного url.
-
Прежде всего, вам нужно добавить следующую строку в ваш HTML-документ
script src=»modernizr.js»>/script -
Вы также можете использовать npm для загрузки и установки modernizr, введя следующую строку в командной строке.
npm install -g modernizr -
На основе функций, которые вы хотите обнаружить, вам нужно собрать и загрузить файл modernizr.js.
Modernizr выполняет свою работу, добавляя классы в тег HTML и выясняя, какие классы поддерживаются браузером, а какие нет.
- Функции, которые не поддерживаются браузером, имеют префикс «no-«, как показано на рисунке выше. Класс «csscoloumns» не поддерживается IE9. Поэтому он обозначен как no-csscolumns.
Знаете ли вы, что такое функция CSS element()? Эта функция возвращает живое изображение, сгенерированное из произвольного элемента HTML, с учетом всех правил CSS, которые могут быть установлены для этого элемента.
Процедуры возврата в CSS
Благодаря дополнительным классам, которые были добавлены, у нас появилась возможность добавлять альтернативные стили через CSS. Например, предположим, что мы используем font-face в CSS, чтобы добавить пользовательский шрифт и установить его размер на 2em. Однако, когда font-face не поддерживается браузером, пользовательский шрифт заменяется стандартным веб-безопасным шрифтом размером 2em. В этом случае шрифт по умолчанию может выглядеть странно, если его размер равен 2em. В этом случае можно установить запасной вариант с помощью следующего кода
.no-fontface h1 {
font-size: 1.2em;
}
-
Предположим, вы используете canvas в своем коде, и поскольку он не поддерживается IE8, необходим fallback.
-
Традиционно это можно сделать, загрузив и импортировав в код файл flashcanvas.js.
-
Проблема в том, что его загрузят все браузеры, даже те, которые поддерживают canvas.
-
Вместо того чтобы обертывать скрипт условными элементами, можно использовать YepNope. Он может проверить, поддерживает ли браузер canvas, и если нет, то позволит браузеру загрузить flashcanvas.
К этому моменту вы должны иметь четкое представление о некоторых интересных функциях, с помощью которых Modernizr значительно упрощает тестирование совместимости браузеров. Однако перед установкой следует помнить, что, как и все другие скрипты, Modernizr может быть загружен в нижней части страницы для экономии времени загрузки. Однако, некоторые из его тестов вызывают возвраты, и браузеру приходится выполнять некоторые перерасчеты, чтобы проверить, поддерживаются ли определенные стили. Более эффективным подходом является проверка сложности страницы. В случае нескольких внутренних CSS, вычисления сложнее, и лучше загружать modernizr в «голове» html. Однако, если тело пустое, как и все другие внешние JS скрипты, имеет смысл загрузить modernizr в нижней части страницы.