Десять лет назад только самые современные дизайнеры веб-сайтов будут использовать CSS для макета и украшения веб-страницы. В то время поддержка браузеров для макета CSS была одновременно неполной и полной лазейков, поэтому, хотя эти люди настаивали на веб -стандартизации, им приходилось использовать взломы, чтобы их страницы отображались нормально во всех браузерах. Одна из самых и более используемых технологий взлома - это браузер, который использует атрибут navigator.useragent в JavaScript, чтобы определить, какой бренд и версию браузера использует пользователь. Технология нюхания браузера может быстро разветвлять код для применения различных инструкций к разным браузерам.
Сегодня макеты на основе CSS уже очень распространены, и браузеры поддерживают их очень прочные. Но теперь CSS3 и HTML5 здесь, история обернулась и вернулась к своему первоначальному месту - поддержка этих новых технологий со стороны различных браузеров снова стала неравномерной. Мы давно привыкли к написанию аккуратных и стандартных кодов, и мы больше не будем использовать хакеры CSS или браузеры для обнюхивания ненадежных и низкоуровневых технологий. Мы также считаем, что все больше и больше пользователей соглашаются с идеей, что веб -сайты не должны выглядеть одинаково во всех браузерах. Итак, перед лицом этой знакомой ситуации (различная поддержка браузера), что нам делать? Просто: используйте обнаружение функций, что означает, что нам не нужно спрашивать браузер, кто вы? Чтобы сделать ненадежные предположения. Вместо этого мы спрашиваем браузер, можете ли вы сделать то или это. Это легко обнаружить браузеры, но все еще скучно проводить время вручную на тестирование их один за другим. Modernizr может помочь нам в это время.
Modernizr: библиотека функциональных обнаружений, специально разработанная для HTML5 и CSS3
Modernizr - это библиотека JS с открытым исходным кодом, которая облегчает дизайнерам, которые разрабатывают различные уровни опыта на основе различий в гостевых браузерах (ссылаясь на различия в поддержке новых стандартов). Это позволяет дизайнерам в полной мере воспользоваться функциями HTML5 и CSS3 для разработки в браузерах, которые поддерживают HTML5 и CSS3, не жертвуя контролем других браузеров, которые не поддерживают эти новые технологии.
Когда вы внедряете сценарий Modernizr на веб-странице, он обнаружит, поддерживает ли текущий браузер функции CSS3, такие как @Font-Face, граница-радиус, пограничный изображение, Box-Shadow, RGBA () и т. Д., А также обнаружит, поддерживаются ли функции HTML5-такие как аудио, видео, локальное хранилище и новые типы тег. Исходя из получения этой информации, вы можете использовать их в браузерах, которые поддерживают эти функции, чтобы решить, создать ли резерв на основе JS или просто понизить тех, кто их не поддерживает. Кроме того, Modernizr также может позволить IE поддерживать применение стилей CSS на элементах HTML5, поэтому разработчики могут немедленно использовать эти более семантические теги.
Modernizr разрабатывается на основе теории прогрессивного улучшения, поэтому он поддерживает и поощряет разработчиков создавать уровень своего веб -сайта по уровню. Все начинается с простоя с применением JavaScript, добавляя расширенные слои приложений один за другим. Поскольку Modernizr используется, вам легко знать, что поддерживает браузер. Давайте посмотрим на пример создания передовых веб-сайтов путем применения Modernizr.
Начните с применения Modernizr
Во -первых, загрузите последнюю стабильную версию Modernizr с www.modernizr.com (в настоящее время официальный веб -сайт Modernizr заблокирован в Китае, и мы можем скачать его с Github. Или, чтобы быть проще, вы можете скачать последний файл сценария версии 1.7 с мастером). На официальном веб -сайте вы также можете увидеть список всех функций, которые он поддерживает для обнаружения (последняя страница этой статьи даст эти списки так, чтобы детская обувь, которую нельзя пропустить через стену, могли знать, какие из них они поддерживают). После загрузки последней версии (автор использовал версию 1.5 при написании этой статьи), добавьте ее в область страницы:
Затем добавьте класс без JS в элемент.
Когда Modernizr работает, он превратит класс NO-JS в JS, чтобы вы знали, что он работает. Modernizr не просто делает это, но и добавляет класс класса ко всем функциям, которые он обнаруживает. Если браузер не поддерживает функцию, он префиксирует имя класса, соответствующее функции no-. Итак, ваш элемент может стать таким:
Modernizr также создаст объект JS с именем Modernizr, который представляет собой список логических результатов, приведенных для каждой обнаруженной функции. Если браузер поддерживает новый элемент Canvas, значение Modernizr.canvas верно; Если браузер не поддерживает этот новый элемент, соответствующее значение неверно. Этот объект JS также будет содержать более подробную информацию для определенных функций, таких как modernizr.video.h264, сообщит вам, поддерживает ли браузер этот специальный кодек. Modernizr.inputtypes.search сообщит вам, поддерживает ли текущий браузер новый тип ввода поиска и т. Д.
Наша необработанная, простая маленькая страница выглядит немного как система перед тестированием, но она имеет лучшую семантику и доступность. Давайте добавим в него небольшой основной стиль: небольшой текстовый формат, цвет и макет, чтобы он выглядел лучше. В настоящее время нет ничего нового, просто добавьте стили выражения на страницу семантической структуры HTML и посмотрите на страницу после добавления стиля.
Ниже мы хотим улучшить эту страницу, чтобы сделать ее более интересной. Я хочу применить своеобразный текстовый эффект на H1 на голове, разделите список функций обнаружения на два столбца, а затем получить все о Modernizr с фотографией справа. Я также хочу сделать границу вокруг содержания страницы красивой. Теперь более мощный CSS3 позволяет вам добавлять больше свойств в правило, которое игнорирует их, если браузер их не поддерживает. С CSS Cascade (наследование) вы можете использовать новые свойства, такие как граница-радис, не полагаясь на Modernizr. Тем не менее, использование Modernizr может предоставить вам некоторые функции, которые не могут быть предоставлены существующими средствами: динамически измененные имена классов на основе дифференциальной поддержки браузера для новых вещей. Я проиллюстрирую это, добавив 2 новых правила на нашу страницу:
Первое правило добавляет закругленный угол 12 пикселей к элементу #Content. Но на существующей странице мы установили границу с элементом #Content со значением атрибута 2PX #666. Это выглядит довольно хорошо, когда коробка прямолинейна, но не в округленных углах. Благодаря Modernizr я могу установить 1PX Real Edge для коробки с границей, поддерживаемым браузером.
Второе правило немного более продвинуто. Мы добавили тень в элемент #Content и удалили атрибут границы для браузеров, которые поддерживают атрибуты Box-Shadow. Почему? Потому что большинство браузеров не обеспечивают хорошую производительность для сочетания краев и углов с тенями (это недостаток в браузере, который следует отметить, но мы должны выдержать его сейчас). Вместо того, чтобы использовать тени и только использовать границы, я бы предпочел использовать тени для окружения элементов. Таким образом, у меня может быть лучшее, точное и лучшее выступление CSS в мире: в браузере появится красивая тень, которая поддерживает атрибут Box-Shadow; Браузер, который поддерживает только атрибут границы-радиуса, представит красивую закругленную тонкую границу; Для тех сломанных браузеров, которые не поддерживают эти два, мы увидим 2-пиксельную границу прямоугольного углу.
Ниже мы хотим применить специальный специальный шрифт к заголовку. Ниже приведено наше текущее утверждение для H1, без изменений:
Эти утверждения хорошо работают на наших базовых страницах, и 27-пиксельный размер текста также подходит для отображения тех шрифтов, которые мы устанавливаем для H1. Но для шрифта я собираюсь использовать под названием Beautiful, 27 пикселей слишком маленькие. Здесь мы хотим добавить другие правила, чтобы использовать этот собственный шрифт:
Сначала мы добавляем объявление @Font-Face и указываем путь, имя файла и имя шрифта для наших пользовательских шрифтов. Затем мы используем оператор CSS, чтобы выбрать стиль шрифта для нашего H1. Вы увидите, что я выбрал здесь большой размер шрифта, потому что сам красивый шрифт намного меньше, чем текст других шрифтов, поэтому мы должны указать браузеру дать H1 большой размер шрифта при отображении наших пользовательских шрифтов.
Кроме того, наш красивый рукописный текст имеет некоторые проблемы с рендерингом с затенением текста, поэтому мы должны отменить текстовое затенение, когда браузер решает использовать пользовательский текст. Кроме того, список частей обнаружения деталей должен быть разделен на два столбца. Чтобы достичь своей цели, я хочу использовать атрибут Awesome CSS столбцы, который позволит браузеру разумно разделить список на столбцы без нарушения его порядка. Хотя наш список не имеет числового числа, он также расположен в алфавитном порядке. Конечно, не все браузеры поддерживают эту собственность. Для тех, кто не поддерживает, мы используем Float для достижения цели 2 столбцов - после использования Float список больше не будет уже организован в алфавитном порядке, но это лучше, чем ничего.
Я снова использовал Modernizr, чтобы установить разные свойства для разных ситуаций. Если браузер поддерживает столбцы CSS, он прекрасно разделит список на 2 столбца. Если он не поддерживается, мы также можем использовать плавающий метод, чтобы сделать список в два столбца с помощью плавания. Хотя это не так идеально, это лучше, чем напрямую применять длинный список отдельных столбцов.
Здесь вы, возможно, заметили, что я добавил различные префиксы (-moz-, -webkit-,-) в атрибут. Это связано с тем, что разные производители браузеров имеют разные определения реализации этой функции, поэтому для реализации этой функции они должны добавить свои соответствующие префиксы в разные браузеры.
После этих изменений наша новая страница выглядит лучше.
Мы добавим более прогрессивные усовершенствования на нашу страницу, чтобы закончить этот урок. Браузеры на основе Webkit поддерживают некоторые более удивительные спецэффекты, такие как трансформация CSS, анимация и трехмерная преобразование. И я хочу применить некоторые из этих спецэффектов на страницах последнего этапа. Опять же, эти свойства будут добавлены в наши существующие CSS и игнорируются в браузерах, которые не поддерживают их. Следовательно, целесообразно использовать Modernizr для этой ситуации, когда постепенное улучшение не поддерживается, с одной стороны.
Первый набор:
Правило @KeyFrames является частью новой спецификации анимации CSS и в настоящее время поддерживает только WebKit. Это позволяет вам объявить полный путь анимации для любого атрибута и менять их на любом этапе, который вам нравится. Чтобы узнать больше о анимации, прочитайте рабочую спецификацию W3C.
Здесь мы добавляем код, который заставляет элемент вращения в трехмерном пространстве:
Поскольку логотип должен быть повернут, и я надеюсь, что он будет более гармонично с фоном при его вращении, поэтому здесь используется файл формата PNG. Я также использовал переполнение: скрытый атрибут, чтобы скрыть текст в заголовке с пикселями с отступом 9999. Интересно заставить элементы вращаться в 3D, но не слишком красиво. Наконец, мы решили использовать правило анимации, установив период его вращения на 2 секунды, вращаясь вдоль собственной центральной оси, никогда не останавливаясь.
Финальная страница выглядит великолепно и даже устанавливает забавную анимацию для браузера Webkit. Я надеюсь, что до сих пор вы сможете понять, насколько здорово это может сделать ваше запястье с контролем Modernizr над вашим веб -сайтом и насколько просто это может сделать реальное прогрессивное улучшение. Это не только полное преимущество Modernizr, это также может помочь вам построить запасныеберы на основе JS и помочь вам применить потрясающие новые функции HTML5.