Главная страница>Учебник по веб-дизайну>Учебник по HTML

Расскажите нам о том, как использовать Modernizr

Автор：Eve Cole Время обновления：2025-08-23 02:32:01

Уже есть много китайских представлений о Modernizr, вы можете искать через Baidu или Gu Ge. Вы также можете прочитать его на Blue Please, эта статья относительно всеобъемлющая: Modernizr для HTML5 и CSS3;

Каковы использование Modernizr в дополнение к предоставлению базового суждения окружающей среды и семантической поддержки HTML5 и CSS3? Давайте изучим это вместе сегодня.

1. Начните с применения Modernizr

Эта часть подробно объясняется в Modernizr для HTML5 и CSS3, включая изменения в элементах HTML после запуска Modernizr и т. Д. Рекомендуется, чтобы новые студенты могли тщательно прочитать его.

Вы также можете перейти непосредственно на официальный веб -сайт http://modernizr.com/docs/ для получения дополнительной информации.

2. Использование Modernizr.load

1. Загрузите jQuery

Давайте сначала посмотрим на методы и коды для загрузки jQuery на официальном веб -сайте:

  1. Modernizr.load ([{
  2. загрузка: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
  3. завершено: function () {
  4. if (! window.jquery) {
  5. Modernizr.Load ('JS/Libs/jQuery-1.7.1.min.js');
  6. }
  7. }
  8. }]);

Этот код был протестирован и обнаружил, что если вы не можете получить доступ к CDN, предоставляемому Google обычно, браузер сообщит об ошибке, а сообщение

  1. Gethttp: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404 (notfound)
  2. modernizr.custom.js: 4resourceinterpretedasimagebuttransferred с mimeTypeApplication/x-javascript: js/libs/jquery-1.7.1.min.js.

Из информации об обратной связи мы видим, что формат файла, проанализированный Modernizr при перезагрузке локального jQuery, является неверным. Я не знаю, произойдет ли это, но это влияет на использование. Среди всех результатов поиска в Китае не было обнаружено никаких объяснений или исследований этого явления, и личные способности были ограничены, поэтому было невозможно изучить глубину. Я только что получил временное решение от StackoverFlow, код выглядит следующим образом:

  1. <scriptType = text/javascript> // <! [Cdata [
  2. Modernizr.load ([{
  3. загрузка: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
  4. завершено: function () {
  5. if (! window.jquery) {
  6. Modernizr.load ([{
  7. нагрузка: 'js/jquery.min.js',
  8. обратный вызов: function (url, результат, ключ) {
  9. //console.log('jqueryonlocalwasloaded! ');
  10. init ();
  11. }
  12. }]);
  13. }еще{
  14. //console.log('jqueryongoglewasloaded! ');
  15. init ();
  16. }
  17. }
  18. }]);
  19. functionInit () {
  20. jquery (document) .ready (function () {
  21. $ ('body'). Prepend ('helloworld!');
  22. });
  23. }
  24. //]]> </script>

2. Поддержка для нижней версии, т.е.

В описании документации yepnopejs есть раздел об использовании плагинов для IE! Префикс.

Большую часть времени, когда мы делаем совместимость с интерфейсом интерфейса, мы должны рассмотреть детали различных версий IE. Хотя теперь мы подчеркиваем отказ от IE6, большинство клиентов все еще используют эту версию. Чтобы обеспечить согласованность интерфейса, мы обычно можем увидеть следующий код формата:

  1. <!-[ifltie7]> <htmlclass = ie6> <! [endif]->
  2. <!-[ifie7]> <htmlclass = ie7> <! [endif]->
  3. <!-[ifie8]> <htmlclass = ie8> <! [endif]->
  4. <!-[ifie9]> <htmlclass = ie9> <! [endif]->
  5. <!-[if (gtie9) |! (т.е.)] <!-> <!-<! [endif]->

Это условное оператор формата для фильтрации фильтрации, разрешенной в HTML. Благодаря фильтрации мы можем достичь некоторых взломов CSS для разных версий IE. Эта часть контента может быть прочитана и изучена на Paulirish.com.

Есть много решений для прозрачных диаграмм PNG. Вот некоторые попытки ввести сегмент кода JS для решения прозрачного PNG через Modernizr. Конкретный код заключается в следующем:

  1. <scriptType = text/javascript> // <! [Cdata [
  2. Modernizr.load ([[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[
  3. {
  4. Загрузка: 'js/yepnope.ie_prefix.js', // Загрузить Yepnope's IE! Плагин префикса
  5. завершено: function () {
  6. да да ([{
  7. Загрузка: 'IELT8! JS/IE_PNG.JS', // Плагин можно отфильтровать только после того, как он загружается нормально (загрузка IE_PNG.JS для версий ниже IE8)
  8. завершено: function () {
  9. ie_png.fix ('img');
  10. }
  11. }]);
  12. }
  13. }
  14. ]);
  15. //]]> </script>

Это интересная попытка.

3. Определите поддержку браузера CSS3 или HTML5

Эта часть является основной особенностью Modernizr. Используя эти основные функции, мы можем не только пробовать новые функции CSS3 или HTML5, но и гарантировать, что мы даем дружеские подсказки в неподдерживаемой среде. Посмотрите на следующий код:

  1. <scriptType = text/javascript> // <! [Cdata [
  3. Modernizr.load ({
  4. Тест: modernizr.csstransforms3d &#038; & modernizr.csstransitions, // судить, поддерживает ли текущий клиент 3-мерные варианты и градиентные переходы
  5. да: ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'], // Если поддерживается, связанный с загрузкой js
  6. Нет: 'css/sharkback.css', // Другое загрузка соответствующих стилей, используемых для дружеских напоминаний
  7. Callback: function (url, результат, ключ) {// Содержимое обратного вызова
  9. if (url === 'js/jquery.hoverfold.js') {// Если путь последнего загруженного файла js одинаков, приложение
  10. $ ('#grid'). Hoverfold ();
  11. }
  13. }
  14. });
  16. //]]> </script>

Этот код вырезан из абзаца в презентационном документе в 3D -эскиз. Анализируя и испытывая учебные пособия, созданные автором, мы можем не только изучать некоторые из использования Modernizr, но и испытать некоторые мощные и ослепительные эффекты CSS3.

Вышеуказанное содержание по -прежнему очень грубо организовано, и цель состоит в том, чтобы использовать его для изучения и понимания характеристик и методов использования Modernizr (Yepnope). В то же время мы также должны улучшить обучение и внимание CSS3 и HTML5.

Весь текст закончился.

Связанные статьи