Получаем преимущество в HTML5 и CSS3 с Modernizr

Десять лет назад только самые продвинутые веб-дизайнеры использовали CSS для разметки и стиля. Поддержка браузерами разметки CSS была слабой и лагающей, но эти люди хранили верность стандартам веб, изобретая хитрые финты, которые сделали бы разметку CSS рабочей во всех браузерах. Один такой финт, ставший широко используемым был сниффинг: Обнаружение каждого браузера и версии пользователя, просматривая navigator.userAgent, в JavaScript. Сниффинг браузера позволял быстро и просто подгрузить код, позволяя разработчикам охватить разные браузеры с разными инструкциями.

Теперь разметки на CSS вполне обыденны, и у каждого браузера есть надежная поддержка для них. Но, теперь у нас есть CSS3 и HTML5, а ситуация повторяется – различные браузеры разные уровни поддержки этих новых технологий. Мы приготовились, тем не менее, и больше не изобретаем CSS хаки и не используем сниффинг браузеров – это ненадежные и плохие методы. Также, мы убеждаем все больше и больше клиентов, что «сайты не должны выглядеть одинаково в каждом браузере». Итак, как нам разобраться с этой новой, но знакомой проблемой? Очень просто: Мы используем распознавание функций, это означает, что мы не спрашиваем браузер «кто ты?» и делать ненадежные действия. Вместо этого мы спрашиваем браузер: «Можешь ли ты сделать это и то?» Это простой способ проверить браузер на совместимость, но, делать эти проверки вручную утомительно. Для решения этой проблемы (и других), вы можете использовать Modernizr.

Modernizr: библиотека для определения функций для HTML5 и CSS3.

Modernizr – это библиотека JavaScript с открытым кодом, которая делает проще для веб-дизайнеров поддержку различных уровней, основанную на совместимостях браузера посетителя. Это позволяет дизайнерам заиметь значительное преимущество во всем HTML5 и CSS3, которые реализованы в некоторых браузерах, без принесения в жертву контроль за использованием других браузеров пользователем.

Когда вы вставляете скрипт Modernizr в вашу страницу, он определяет, какой из текущих браузеров поддерживает CSS3, вроде font-face, border-radius, border-image, box-shadow, rgba() и далее, также функции HTML5, такие как аудио, видео, локальное хранилище, типы и атрибуты нового элемента <input /> . С этим знанием вы можете получить преимущество над этими выполнениями в браузера, которые поддерживают эти функции, и решить, создавать ли код на JavaScript, или же, просто, портить страницу в браузерах, которые не поддерживают их. Также, можно добавить, что Modernizr делает новые элементы HTML5 доступными для изменения в Internet Explorer’e. Итак, вы можете начать использовать их продвинутую семантику прямо сейчас.

Modernizr был создан на принципе прогрессивного развития, и он поддерживает (поощряет) даже создание веб-сайта от слоя к слою, начиная с основы на JavaScript, и добавляя модернизированные слои один к одному. Это просто с Modernizr, с того момента, как вы будете знать, какой из браузеров совместим. Давайте посмотрим на практическом примере , как использовать Modernizr, чтобы создать современный веб-сайт.

Начинаем работать с Modernizr

Начнем со скачивания последнего стабильного релиза с www.modernizr.com, где вы можете, также, посмотреть полный список функций, который он обнаружит. Итак, у вас есть последняя версия, 1.5 (на время написания), включите ее в вашу страницу в .

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>My Beautiful Sample Page</title>
<script src=”modernizr-1.5.min.js”></script>
</head>

Далее, добавьте класс “no-js” в ваш <html> элемент:

<html class=”no-js”>

Когда Modernizr запущен, он заменит этот класс с классом “js”, который позволяет вам узнать, в CSS, доступен или нет код JavaScript. Но Modernizr на этом не останавливается: он добавляет классы для каждой функции, которую находит, добавляя префикс “no-”, если браузер ее не поддерживает. Итак, ваш элемент <html>; будет выглядеть похожим на загрузку страницы (обеспечивая доступность JavaScript):

<html class=”js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”>

Modernizr также создает объект JavaScript, просто названный Modernizr, который имеет список свойств, содержащих булевские значения для каждой функции. Modernizr.canvas будет иметь значение «верно»(true), если браузер поддерживает новый элемент canvas, и «ложно»(false), если браузер не поддерживает его. Объект JavaScript также содержит более детальную информацию о верных функциях, например: Modernizr.video.h264 скажет вам, если браузер поддерживает данный кодек. Modernizr.inputtypes.search предупредит вас, если новый тип поиск поддерживается, и т.д.

Наша страница-пример выглядит немного пусто, но это очень схематично и доступно. Давайте добавим несколько базовых стилей; немного форматирования, цвета, чтобы сделать его немного более привлекательной. До сих пор в этом процессе не было ничего нового: мы добавляем простой CSS в схематичную структуру HTML страницы, и, результат очень правдиво это демонстрирует.

Идем дальше. Давайте улучшим страницу и сделаем ее более интересной. Для этого я хочу изменить шрифт h1 для хедера на другой, разбиваем список функций на две колонки и двигаем часть о Modernizr с фото вправо. Я, также, собираюсь изменить границу вокруг страницы и сделать ее привлекательнее. Теперь, CSS выглядит намного лучше, потому что теперь вы можете добавлять новые свойства в правило, и, если браузер не распознает (читайте: support) их, можно просто проигнорировать это. Соедините это с каскадностью CSS, и вы сможете использовать штуки вроде border-radius без помощи Modernizr. Тем не менее, использование Modernizr предлагает вещи, которые вы не сможете без него использовать: Возможность изменять свойства, поддерживаемые браузером, только в состоянии, когда он поддерживает некоторые иные свойства. Я продемонстрирую это, добавляя два новых правила CSS на нашу страницу.

.borderradius #content {
border: 1px solid #141414;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.boxshadow #content {
border: none;
-webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
-moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
}

Первое правило добавляет 12-ти пиксельную рамку в наш элемент #content. Тем не менее, правило, которое мы добавили для #content задано рамкой “2px outset #666”, которая выглядит неплохо, когда бокс имеет прямые углы, но с закругленными углами это выглядит уже хуже. Спасибо Modernizr, что я могу «научить» браузер выполнять то, что нужно, однопиксельная граница, если браузер поддерживает border-radius.

Второе правило придает немного красоты путем добавления падающей тени для элемента #content и, вместе с этим, убирает границу, если браузер поддерживает box-shadow. Почему? Потому что большинство браузеров не выполняет комбинацию border-«и»-border-radius, а box-shadow очень хорошо. Я бы лучше использовал падающую тень вокруг элемента, чем этого бы не сделал и поставил бы только границу. Следуя этому пути, у меня может быть лучший из всех миров, или же, лучший из всех CSS: браузеры, которые поддерживают свойство box-shadow, покажут нам неплохую падающую тень, браузеры, которые поддерживают только border-radius покажут закругленные углы с тонкой границей, и наконец, те браузеры, которые не поддерживают ничего, получают нашу оригинальную двухпиксельную внешнюю границу.

В нашем примере мы добавляем специальный шрифт для нашего хедера. Вот объявление нашего оригинального h1, который мы не меняем, но я покажу это в примере:

h1 {
color: #e33a89;
font: 27px/27px Baskerville, Palatino, “Palatino Linotype”,
“Book Antiqua”, Georgia, serif;
margin: 0;
text-shadow: #aaa 5px 5px 5px;
}

Это объявление сработало прекрасно для нашей базовой страницы, и, размер шрифта 27 пикселей прекрасно подходит для всех этих шрифтов, но это маловато для нашего самодельного шрифта, который называется Beautiful. Давайте добавим правило CSS, чтобы использовать его:

@font-face {
src: url(Beautiful-ES.ttf);
font-family: “Beautiful”;
}
.fontface h1 {
font: 42px/50px Beautiful;
text-shadow: none;
}

Во-первых, мы добавляем @font-face, в котором мы наметили путь, имя файла и название семейства для нашего самодельного шрифта. Далее, мы добавляем шрифт в правило CSS в наш элемент h1, но, как вы можете видеть, я задаю ему намного больший размер. Это потому, что шрифт Beautiful выполняется как намного меньший, чем все другие шрифты, которые я описал для элемента h1, и нам придется «научить» браузер отображать наш хедер большие размеры, но только тогда, когда он показывает наш самодельный шрифт.
Добавлю, что наш прекрасный код шрифта имеет некоторые недостатки с изображением текстовой тени. Я удаляю тень, когда браузер решит отобразить самодельный шрифт. Также, список функций все еще требует разделения. Чтобы сделать это, я хочу использовать великолепную функцию колонок CSS, которая позволяет браузерам аккуратно разделать список в колонки без путаницы – и наш список, не смотря на видимую нумерацию, выстроен в алфавитном порядке. Конечно, пока не каждый браузер поддерживает колонки CSS, для них мы будем использовать плавающие, чтобы сделать два списка колонок; они больше не будут сортированы в алфавитном порядке (визуально), но это лучше, чем ничего:

.csscolumns ol.features {
-moz-column-count: 2;
-webkit-columns: 2;
-o-columns: 2;
columns: 2;
}
.no-csscolumns ol.features {
float: left;
margin: 0 0 20px;
}
.no-csscolumns ol.features li {
float: left;
width: 180px;
}

И снова я использую Modernizr, чтобы выполнить очень простые настройки, только с обязательными условиями – что-то я бы не смог сделать с помощью свойств перегруженных или каскадом. Если браузер поддерживает колонки CSS, наша работа здесь выполнена: список выглядит хорошо и все еще в алфавитном порядке. Если браузер не поддерживает колонки CSS, и отображает это как класс “no-csscolumns” и добавленный в <html> элемент в сценарии, мы делаем список плавающим (float) и задаем поля, ширину, чтобы получить похожий результат. Это не так хорошо, но это лучше чем один длинный список.
Как вы могли заметить, я объявляю колонки по-разному, от свойств border-radius и box-shadow в вышеизложенных примерах. Это потому, что, во-первых, Opera сейчас поддерживает только колонки CSS через префикс поставщика, и, во-вторых, Mozilla пока не распознает свойство записи “колонки”, поэтому нужно использовать -moz-column-count для этого браузера.
С этими и парочкой других похожих изменений – наша новая страница выглядит определенно лучше.

Давайте закончим этот обучающий урок, добавив на нашу страницу немного больше передовых вещей. Браузеры основанные на WebKit, поддерживают некоторые значительные чертовски клеевые вещи – CSS переходы, анимацию, трех-пространственное преобразование – и, я хочу показать некоторые из них в финальном шаге. Снова, некоторые из этих свойств могут быть просто добавлены в наши правила CSS и, они игнорируемы браузерами, которые их не поддерживают, но другие свойства пересекались бы с разметкой во всех браузерах, если я добавлю их таким образом. Итак, я использую Modernizr, чтобы задавать строго, когда эти введения используются, и когда нет.

Первым делом мы устанавливаем эту ступень так:

@-webkit-keyframes spin {
0% { -webkit-transform: rotateY(0); }
100% { -webkit-transform: rotateY(360deg); }
}
.csstransforms3d.cssanimations section {
-webkit-perspective: 1000;
}

Правило @keyframes – это часть новой анимационной спецификации CSS, которая, теперь поддерживается только с WebKit. Она позволяет вам объявить целую часть анимации, с какими угодно свойствами и изменять их в любые желаемые вами шаги. Запомните, что вы не задаете длительность в этом объявлении, когда вы используете анимацию в правиле CSS, только непосредственно ключевые фреймы – вы задаете вещи такие как: длительность, циклический счет и простые кривые. Это позволяет вам многократно использовать детальную анимацию на разных скоростях в различных элементах, и это дает вам некоторую «гибкость». Для получения большей информации об использовании анимаций, посмотрите ссылку W3C Working Draft specification.

Следующим шагом мы выполняем анимацию – она заставляет элемент вращаться вокруг 3D пространства – в наш вторичный хедер добавляем:

.csstransforms3d.cssanimations section h2 {
background-image: url(modernizr-logo.png);
overflow: hidden;
-webkit-animation: spin 2s linear infinite;
}

Т.к. теперь мы вращаемся в 3D пространстве, я бы хотел, чтобы фоновая картинка – лого Modernizr выглядела хорошо и с анти-алиасом, поэтому я заменю ее на версию в *.PNG формате. Я также добавляю свойство overflow:hidden, чтобы скрыть оригинальный текст в хедере, который мы задали – 9999 пикселей. Вращение элемента в 3D, демонстрировавшее его во время вращения, было забавным, но выглядело не очень хорошо. Наконец, мы задаем правило для анимации, устанавливаем его на 2 секунды, закручивая его в форму линии и делаем процесс бесконечным.
Наша финальная страница выглядит здорово, и также, присутствует немного движущейся забавной анимации для браузеров с WebKit. Я надеюсь, теперь у вас есть четкое представление о том, насколько больше возможностей вы получаете для ваших веб-сайтов с Modernizr, и, насколько проще это делает поистине передовые расширения. Это не все, где может быть полезен Modernizr; он также хорош для создания замедлений, управляемых JavaScript и для использования классных новых функций из HTML5 – но это можно обсудить в другой раз.

Оригинал взят с http://www.alistapart.com
Перевод — тут

, ,

Оставить комментарий

Top ↑ | Main page | Back