Раньше обнаружение функций было намного проще.
Обнаружение браузера было разумным решением в первые дни Интернета. Разработчики будут проверять пользовательский агент и запускать код JavaScript, предназначенный для приложения. Это было больно, но часто необходимо, потому что технологии браузера значительно различались.
Рост веб-стандартов снизил потребность в разветвлении кода. Модель событий Internet Explorer и реализация XMLHttpRequest не соответствовали стандартам W3C, но небольшое обнаружение объектов преодолело эти препятствия. Большая часть нашего кода будет работать везде.
Теперь у нас есть HTML5 и CSS3. Ни один браузер не поддерживает все функции, поэтому для обеспечения кросс-браузерной совместимости часто необходимо включать прокладки или использовать методы обнаружения. Рассмотрим пример с тиснением:
body { font-family: sans-serif; background-color: #fff; } .emboss { font-size: 2.5em; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); } Большинство современных браузеров показывают приятный эффект:
Чтобы добиться этого, мы установили шрифт того же цвета, что и фон. К сожалению, это делает текст невидимым в браузерах, которые не поддерживают текстовую тень. Это включает в себя Internet Explorer 9.0 и более ранние версии всех браузеров.
Модернизр на помощь!
Modernizr — это удивительная библиотека, которая обнаруживает свойства CSS, преобразования, элементы HTML5, холст, SVG, геолокацию, локальное хранилище, сенсорные события и многое другое. Развернутая версия в сжатом виде составляет всего 3,7 КБ, и вы можете уменьшить ее, загрузив настроенную сборку .
Modernizr предоставляет API-интерфейс JavaScript и добавляет имена классов, такие как texthadow, opacity, cssgradients, svg и т. Д., В элемент html . Поэтому мы можем переписать наш тисненый текст CSS соответствующим образом:
.emboss { font-size: 2.5em; font-weight: bold; color: #333; } .textshadow .emboss { color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); }
Если вам необходимо обнаружить широкий спектр функций, Modernizr — одно из лучших доступных решений.
Прокручивая свой собственный код обнаружения
Сторонняя библиотека может быть излишней, если вы хотите обнаружить только несколько функций CSS. Modernizr и подобные решения работают, создавая элемент (не добавленный в DOM) и проверяя значение свойства CSS. Неподдерживаемое свойство обычно возвращает undefined.
text-shadow — одно из самых простых свойств для обнаружения — следующий код добавляет класс «texthadow» к элементу html если он поддерживается:
// detect CSS text-shadow support in JavaScript if (document.createElement("detect").style.textShadow === "") { document.getElementsByTagName("html")[0].className += " textshadow"; }
Свойства с префиксами вендора немного сложнее. Например, boxShadow может не поддерживаться напрямую, но одно из следующих свойств: WebkitBoxShadow, MozBoxShadow, OBoxShadow, msBoxShadow, KhtmlBoxShadow. Поэтому необходимо перебирать опции, например
// detect CSS box-shadow support in JavaScript var d = document.createElement("detect"), CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","), All = ("boxShadow " + CSSprefix.join("BoxShadow,") + "BoxShadow").split(","); for (var n = 0, np = All.length; n < np; n++) { if (d.style[All[n]] === "") { document.getElementsByTagName("html")[0].className += " boxshadow"; break; } }
Это немного скучно, и вы не захотите писать подобный код для каждого свойства. Поэтому мы обернем функциональность в модуле, который обнаруживает поддержку CSS text-shadow, text-stroke, box-shadow, border-radius, border-image и opacity:
// CSS support detection var Detect = (function() { var props = "textShadow,textStroke,boxShadow,borderRadius,borderImage,opacity".split(","), CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","), d = document.createElement("detect"), test = [], p, pty; // test prefixed code function TestPrefixes(prop) { var Uprop = prop.charAt(0).toUpperCase() + prop.substr(1), All = (prop + ' ' + CSSprefix.join(Uprop + ' ') + Uprop).split(' '); for (var n = 0, np = All.length; n < np; n++) { if (d.style[All[n]] === "") return true; } return false; } for (p in props) { pty = props[p]; test[pty] = TestPrefixes(pty); } return test; }());
Значения Detect.textShadow, Detect.textStroke, Detect.boxShadow, Detect.borderRadius, Detect.borderImage и Detect.opacity возвращают true, если они поддерживаются. При необходимости мы можем добавить имена связанных классов к элементу html :
// append to HTML node var html = document.getElementsByTagName("html")[0]; for (t in Detect) { if (Detect[t]) html.className += " " + t.toLowerCase(); }
Или отобразите список поддерживаемых свойств:
for (t in Detect) { document.write( "CSS " + t + " support? " + (Detect[t] ? "YES" : "NO") + "<br>" ); }
Демонстрационная страница показывает этот код в действии. Вы можете использовать его как основу своей собственной библиотеки обнаружения — или, возможно, проще включить Modernizr и покончить с этим!