HTML5, CSS3 и связанные с ним технологии, такие как Canvas и Web Sockets, принесли очень полезные функции, которые могут помочь нашим веб -программам улучшить новый уровень. Эти новые технологии позволяют нам создавать различные страницы форм, которые могут работать на планшетах и мобильных устройствах, используя только HTML, CSS и JavaScript. Хотя HTML5 предоставляет много новых функций, нереально использовать эти новые технологии, если мы не рассмотрим старую версию браузера. Старая версия браузера использовалась в течение многих лет, и нам все еще нужно рассмотреть проблемы совместимости этих версий. Проблема, которая должна быть решена в этой статье: когда мы используем технологию HTML5/CSS3, как лучше справиться с проблемой старых браузеров, которые не поддерживают функции HTML5/CSS3.
Хотя мы можем написать код сами, чтобы определить, поддерживает ли браузер определенные функции HTML5/CSS3, код не очень прост. Например: написание кода для определения того, что платежного браузера поддерживает Canvans, наш код может быть похож на следующее:
<script> window.onload = function () {if (canvassupported ()) {alert ('canvas поддерживает'); }}; function canvassupported () {var canvas = document.createElement ('canvas'); return (canvas.getContext && canvas.getContext ('2d')); } </script>Если вы хотите определить, поддерживается ли локальное хранилище, код может быть похож на указанный ниже, но легко вызвать ошибки в Firefox.
<script> window.onload = function () {if (localstoragesupported ()) {alert ('local horage поддерживает'); }}; function localstoragesupported () {try {return ('LocalStorage' в Window && Window ['LocalStorage']! = NULL); } catch (e) {} вернуть false; } </script>Первые два примера - все это проверяют функцию. Если есть много функций HTML5/CSS3, мы должны написать несколько копий кода, но, к счастью, эти коды не зависят от порядка. Modernizr позволяет реализовать приведенные выше сложные функции с очень небольшим количеством кода. Давайте посмотрим на некоторые важные особенности Modernizr:
Начните с ModernizrВ первый раз, когда я услышал Modernizr, я подумал, что это означало модернизированное и мог добавить некоторые новые функции HTML5/CSS3 в более старые браузеры. На самом деле, Modernizr не делает этого, это помогает нам улучшить наши методы развития, используя очень причудливый метод, чтобы помочь определить, поддерживает ли браузер некоторую новую функцию, и может даже загрузить дополнительные сценарии. Если вы веб -разработчик, это очень потрясающее оружие для вас.
Официальный сайт Modernizr: http://modernizr.com, вы можете использовать оба 2 типа сценариев (версия разработки и индивидуальная производственная версия). Веб-сайт предоставляет инструмент пользовательского спроса для создания только необходимых вам функций обнаружения, а не большую и полную версию, которая может обнаружить все, что означает, что вы можете минимизировать свои сценарии. Следующий рисунок является интерфейсом официального инструмента генерации веб -сайтов. Вы можете видеть, что многие технологии HTML5/CSS3 и связанных с ним связанных технологий.
После загрузки пользовательского сценария вы можете ссылаться на его как обычный файл JS, а затем вы можете использовать его.
<script src = scripts/modernizr.js type = text/javascript> </script>Элементы Modernizr и HTML
После добавления ссылки Modernizr она вступит в силу немедленно. При запуске он добавит партию имен классов CSS в элемент HTML. Эти имена классов отмечают, какие из них поддерживают поддержку, а какие функции не поддерживают в текущем браузере. Поддерживаемые функции будут непосредственно отображать название функции дня в качестве класса (например: Canvas, WebSockets). Класс, отображаемый неподдерживаемыми функциями, не является именем Property (например: No-Flexbox). Следующий код является эффектом работы в Chrome:
<html class = js flexbox canvas canvastext webgl no-touch Geolocation Geolocation Postmessage WebSQLDatabase IndexedDB Haschgange Hostrop Websockets rgba hsla foundbgs фоновая пограничная граница погранично-карт CSStransForms3d CSStransitions Fontface GeneratedContent Video Audio LocalStorage SessionStorage WebWorkers ApplicationCache SVG Inlinesvg Smil Svgclippaths>
Следующий код является эффектом работы в соответствии с IE9:
<html class= js no-flexbox canvas canvas canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity NO-CSSSanimations NO-CSSCOLUMNS NO-CSSGRADIents NO-CSSREFLECES CSStransforms NO-CSStransforms3d NO-CSStransitions Fontface GenedContent Video Audio LocalStorage SessionStorage No-WebWorkers No-applicationCache SVG InlinesVG CLIPPATHS> CLIPPATHS> no-applicationCache SVG CLIPPATHS>
Используя Modernizr, может произойти следующий код (добавьте имя no-js в класс):
<html class = no-js>
Вы можете посетить сайт (http://html5boilerplate.com) для просмотра контента, связанного с HTML5, или (http://initializr.com), чтобы просмотреть контент, связанный с инициализом, добавить класс No-JS в элемент HTML, который сообщает The Browser, поддерживается ли Javascript. Если это не поддерживается, не будет отображаться. Если это поддерживается, NO-JS будет удален. Очень круто, верно?
Использовать с функциями HTML5/CSS3Вы можете напрямую использовать имя класса, сгенерированное Modernizr в элементе <html> для определения соответствующих атрибутов в вашем файле CSS для поддержки текущего браузера. Например, следующий код может отображать тень в браузере, который поддерживает Shadow Shadow, и отображать стандартные границы в браузерах, которые не поддерживают:
.boxshadow #mycontainer {border: none; -Webkit-box-shadow: #666 1px 1px 1px; -Моз-бокса-жопа: #666 1px 1px 1px;} .no-boxshadow #mycontainer {Border: 2px Solid Black;}Потому что, если браузер поддерживает бокс-тени, Modernizr добавит класс Boxshadow в элемент <html>, и вы можете управлять им соответствующим идентификатором Div. Если не поддерживаться, Modernizr добавит класс без ящиков в элемент <html>, который показывает стандартную границу. Таким образом, мы можем легко использовать новые функции CSS3 в браузерах, которые поддерживают функции CSS3, и продолжать использовать предыдущий метод в браузерах, которые не поддерживают их.
В дополнение к добавлению соответствующего класса к элементу <html>, Modernizr также предоставляет глобальный объект JavaScript Modernizr, который обеспечивает различные свойства, чтобы указать, поддерживается ли новая функция в текущем браузере. Например, следующий код может быть использован для определения того, поддерживает ли браузер холст и локальное хранилище. Для нескольких разработчиков очень полезно разрабатывать и тестировать в браузерах с несколькими версиями, и каждый может объединить код.
$ (document) .ready (function () {if (modernizr.canvas) {// Добавить код Canvas} if (modernizr.localstorage) {// Добавить код локального хранилища}});Глобальный объект Modernizr также может быть использован для определения того, поддерживается ли функция CSS3. Следующий код используется для проверки того, поддерживаются ли Border-Radius и CSS-преобразования:
$ (document) .ready (function () {if (modernizr.borderradius) {$ ('#mydiv'). addclass ('borderradiusstyle');} if (modernizr.csstransforms) {$ ('#mydiv'). addClass ('transformStyle');}});Некоторые другие функции CSS3 могут обнаружить результаты, такие как непрозрачность, RGBA, текстовые тени, анимации CSS, переходы CSS, множественные фоны и т. Д. Полный обнаруживаемый список HTML5/CSS3, поддерживаемый ModernizR, можно найти следующие.
Загрузка сценариев с помощью ModernizrВ некоторых браузерах, которые не поддерживают новые функции, Modernizr не только предоставляет приведенный выше метод, который вам сообщает, но также предоставляет функцию нагрузки, позволяющую загружать некоторые сценарии Shim/Polyfill для достижения поддержки (для получения информации о Shim/Polyfill, пожалуйста, посетите: https://github.com/modernizr/modernizr/wiki/html5-crossrohsrops-polyfills-polyfills). Modernizr предоставляет загрузчик скрипта для определения функции, и если она не поддерживается, соответствующий скрипт будет загружен. Отдельный сценарий также можно найти по адресу http://yepnopejs.com.
Вы можете использовать функцию Modernizr's Load () для динамической загрузки сценария. Тестовый атрибут функции указывает, поддерживается ли она. Если тест успешно поддерживается, сценарий, установленный атрибутом YEP, загружается. Если он не поддерживается, будет загружен сценарий, установленный атрибутом Nope. Независимо от того, поддерживается ли он или нет, сценарий, установленный оба атрибута, будет загружен. Пример кода заключается в следующем:
Modernizr.load ({test: modernizr.canvas, yep: 'html5canvasavailable.js', nope: 'excanvas.js', оба: 'mycustomscript.js'});В этом примере Modernizr определит, поддерживает ли текущий браузер функцию Canvas. Если он поддерживается, он загрузит два сценария html5canvasavailable.js и mycustomscript.js. Если он не поддерживается, он загрузит сценарий Excanvas.js (используется для версий до IE9) файл сценария, чтобы сделать браузер поддержать функцию Canvas, а затем загрузить скрипт mycustomscript.js.
Поскольку Modernizr может загружать сценарии, вы также можете использовать другие виды использования, например, если сторонний сценарий, который вы ссылаетесь (например, Google и Microsoft, которые предоставляют сервисы CDN, предоставляя хостинг jQuery), вы можете загрузить альтернативные файлы. Следующий код является примером загрузки jQuery, предоставленной Modernizr:
Modernizr.load ([{woad: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js', complete: function () {if (! Window.jquery) {modernizr.load ('js/libs/jquery-1.4.min.js'); загружать и // выполнить, если это нужно.Этот код сначала загрузит файл jQuery из Google CDN. Если загрузка или загрузка не выполняется, будет выполнена полная функция. Во -первых, определите, существует ли объект JQEURY. Если его не существует, Modernizr загрузит определенный собственный файл JS. Если даже полные файлы не будут успешно загружены, файл upt-jquery.js будет загружен.
Суммировать:Modernizr, безусловно, является необходимым инструментом, если вы используете новейшие HTML5/CSS3 для создания вашей программы. Используя его, вы можете сохранить много кода и тестовых работ, и вы даже можете реализовать соответствующие новые функции в виде дополнительных сценариев загрузки для некоторых браузеров, которые не поддерживают новые функции.
Оригинальный адрес: http://weblogs.asp.net/dwahlin/archive/2011/11/16/deting-html5-css3-features-using-modernizr.aspx