HTML5 и CSS3 без вины

Естественно, не каждая функция HTML5 или CSS3 имеет широкую поддержку браузера. Чтобы компенсировать это, предприимчивые разработчики создали ряд инструментов, позволяющих вам использовать эти технологии сегодня, не оставляя после себя пользователей, которые все еще живут в каменном веке.

пролог

HTML5 семантические элементы

Хорошей новостью является то, что, за исключением Internet Explorer, вы можете создавать более семантическую разметку, используя новые элементы HTML5 — даже в браузерах, которые официально не поддерживают их. Просто не забудьте установить правильный режим отображения: block . Следующий фрагмент должен ссылаться на все необходимые элементы:

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
   display: block;
}

IE Условные комментарии

Реализация многих решений в этом руководстве включает в себя использование JavaScript для определенных выпусков Internet Explorer. Вот краткий обзор: тестовое выражение заключено в квадратные скобки. Мы можем проверить наличие определенных версий или версий выше или ниже заявленной версии. lte lt и gt означают меньше и больше , соответственно, а значения lte и gte меньше или равны и больше или равны .

Вот несколько быстрых примеров:

[if IE 6]

Проверяет, является ли браузер Internet Explorer 6.

[if gt IE 6]

Проверяет версию Internet Explorer больше 6.

Инструмент 1: HTML5 Shiv

В любом IE, кроме самой последней версии (IE9), нельзя применять стили к элементам, которые браузер не распознает. Ваши изящные, новые элементы HTML5, во всей своей красе, непроницаемы для правил CSS в этой среде. Здесь на помощь приходит html5shiv Реми Шарпа (иногда называемый html5 shim). Просто включите его в раздел <head> вашей страницы, и вы сможете отлично оформить новые элементы HTML5.

<!—[if lt IE 9]>
 
<script src=»http://html5shiv.googlecode.com/svn/trunk/html5.js»></script>
<![endif]—>

Обратите внимание, что условные комментарии загружают код html5shiv только при условии, что версия Internet Explorer ниже 9. Другие браузеры, такие как Firefox и Chrome, также будут игнорировать этот тег и не будут выполнять сценарий, тем самым сохраняя пропускную способность.

html5 shiv основан на простом обходном пути: он предписывает IE создавать элементы с помощью JavaScript (их даже не нужно вставлять в DOM).

document.createElement(‘header’);

На данный момент их можно стилизовать как обычно. Кроме того, в последних версиях встроен IE Print Protector , который исправляет ошибку, при которой элементы HTML5 исчезают при печати страницы.

Инструмент 2: Модернизр

Modernizr позволяет вам создавать стили резервного копирования в браузерах, которые не поддерживают определенные функции HTML5 и CSS3.

Modernizr , пожалуй, самый известный из этих инструментов, но его также неправильно поняли (название не помогает). Сделайте глубокий вдох: вопреки распространенному заблуждению, Modernizr не включает функции HTML5 и CSS3 в браузерах, которые их не поддерживают (хотя он включает html5shiv, позволяющий использовать элементы HTML5 в IE <9).

Помимо функциональности html5shiv Modernizr выполняет одно и только одно: при загрузке он запускает серию тестов обнаружения признаков, а затем вставляет результаты в атрибут class тега <html> .

Основная цель Modernizr — предоставить вам возможность создавать «резервные копии» в браузерах, которые не поддерживают определенные функции HTML5 и CSS3. Это несколько отличается от традиционной постепенной деградации, когда мы используем один и тот же стиль CSS во всех браузерах, а затем проектируем его так, чтобы при отсутствии определенных возможностей результат оставался приемлемым.

Теперь для примера того, как работает Modernizr: если браузер поддерживает border-radius и свойство column-count , будут применены следующие классы:

<html class=»csscolumns borderradius»>

С другой стороны, если те же свойства не поддерживаются, скажем, в IE7, вы найдете:

<html class=»no-csscolumns no-borderradius»>

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

.csscolumns p {
  /* Style when columns available */
 }
 
.no-csscolumns p {
  /* Style when columns not available */
 }

Если браузер не поддерживает столбцы, класс .csscolumns не будет присутствовать в теле, и у браузера никогда не будет возможности применить правило, которое его использует.

Некоторые могут возразить, что это возвращает нас к старым временам создания разных сайтов для каждого браузера. Это правда, что ничто не мешает вам написать так много объявлений стилей, которые используют расширенные функции CSS3, что ваша таблица стилей становится практически пустой, когда эти правила не могут быть применены.

Если вы хотите использовать Modernizr таким образом, чтобы это имело смысл, вы должны полагаться на свой талант дизайнера для создания альтернативных стилей, которые не нарушают дизайн и не требуют выбрасывания оставшейся части таблицы стилей. Например, вы можете попробовать заменить тени на буквах, если они недоступны, жирным шрифтом или прозрачностью другого цвета.

использование

Чтобы использовать Modernizr, включите минимизированный файл и примените класс no-js к элементу <html> . Эта последняя мера предосторожности позволяет вам предоставлять стили, когда JavaScript полностью деактивирован; очевидно, в этих случаях Modernizr не может вам помочь вообще. Если JavaScript включен, Modernizr включит и заменит no-js результатами своих операций по обнаружению функций.

<head>
<script src=»modernizr-1.x.min.js» type=»text/javascript»></script>
 
</head>
<body class=»no-js»>
.
</body>

Если вы согласны с тем, что все веб-сайты не должны отображаться одинаково во всех браузерах, вы обнаружите, что Modernizr является важным инструментом в вашем поясе веб-разработчиков!

Инструмент 3: IE 6 Универсальный CSS

В то же время дизайнер Энди Кларк разработал элегантное решение для решения проблемы несоответствия стандартам IE6. Эта таблица стилей, получившая название «Universal IE6», ориентирована исключительно на типографику. Ключ заключается в том, чтобы использовать условные комментарии, чтобы скрыть все другие таблицы стилей от IE 6.

<!—[if !
/* Stylesheets for browsers other than Internet Explorer 6 */
<!—<![endif]—>
 
<!—[if lte IE 6]>
<link rel=»stylesheet» href=»http://universal-ie6-css.googlecode.com/files/ie6.1.1.css» media=»screen, projection»>
<![endif]—>

Важное примечание : не забудьте включить последнюю версию, так как инструкции для старых версий все еще распространяются по сети. Окончательные результаты выглядят так:

У вас нет работы для поддержки IE 6 на новом сайте.

Этот подход имеет довольно очевидное преимущество по сравнению с классическими альтернативными таблицами стилей: вам не нужно работать над поддержкой IE 6 на новом сайте. Недостатком, конечно, является то, что сайт отображает очень мало вашего дизайна. Кроме того, ваши основы HTML также должны быть надежными, чтобы страницу можно было использовать, даже если большинство стилей отключено.

Обратите внимание, что универсальный CSS IE6 не включает в себя стили для элементов только для HTML5, таких как <section> или <footer> . Это не проблема, если вы не полагаетесь на эти элементы исключительно для получения отображения уровня блока для некоторых частей страницы. Как правило, вы всегда будете заключать текст также хотя бы в абзац или элемент списка.

Это решение явно не для всех, и вы можете найти клиентов, которые категорически не согласны с тем, что их сайт выглядит испорченным при просмотре в IE6.

Вы также можете утверждать, что в этот момент вы можете полностью отказаться от поддержки IE6. Энди Кларк суммировал свои ответы на эти возражения здесь .

Этот подход лучше всего подходит для сайтов, ориентированных на контент, и катастрофически для веб-приложений; но с другой стороны, создание современного веб-приложения для эффективной работы в IE 6 само по себе является сложной задачей.

Инструмент 4: Селективизр

Нашим следующим лидером является утилита JavaScript, целью которой является внедрение новых возможностей в старые браузеры (ну, на самом деле, просто IE 6-8): Selectivizr работает в тандеме с другими библиотеками JavaScript, такими как jQuery, Dojo или MooTools, чтобы добавить поддержку для ряда других продвинутые селекторы CSS.

Я перечислил несколько ниже, хотя обратите внимание, что полный список возможностей будет зависеть от вашей предпочтительной библиотеки JavaScript.

:hover
:focus
:first-child
:last-child
:first-line
:first-letter

Чтобы использовать Selectivizr, загрузите его со своей домашней страницы и включите в раздел <head> вместе с одной из библиотек поддержки. Вот пример с jQuery:

<script src=»jquery-1.4.4.min.js»></script>
<!—[if lte IE 8]>
  <script src=»selectivizr.js»></script>
 
 <![endif]—>

Selectivizr работает в тандеме с другими библиотеками JavaScript для обеспечения поддержки CSS3 для IE 6-8.

Этот момент очень важен: Selectivizr не может работать в одиночку; это требует вашей любимой библиотеки, чтобы присутствовать. К счастью, он совместим с огромным большинством популярных библиотек JavaScript. Скорее всего, если вы используете JavaScript на своем сайте, возможно, у вас уже есть соответствующая библиотека.

DOMAssisant

С другой стороны, если вы также не будете использовать библиотеку, альтернативным решением является использование облегченного DOMAssistant , хотя вы все равно можете предпочесть вашу обычную библиотеку JavaScript для большей простоты в управлении файлами.

Однако будьте осторожны, так как точные селекторы, которые делает Selectivizr, зависят от того, какая библиотека поддержки выбрана. Согласно домашней странице, сейчас самый широкий диапазон селекторов доступен с MooTools, в то время как jQuery делает наименьшее количество селекторов доступным. Следует также сказать, что некоторые из селекторов, которые недоступны в jQuery, довольно экзотичны и редко используются в реальных условиях. Обратитесь к нашей статье «30 селекторов CSS, которые вы должны запомнить» для получения полного списка селекторов.

Как это случается, с большинством JavaScript-решений для CSS-проблем существуют некоторые ограничения.

Чтобы Selectivizr мог выполнять свою магию, таблицы стилей должны быть загружены из того же домена, что и HTML-страницы. Это исключает, например, размещение таблиц стилей и других ресурсов в CDN.
Вы должны использовать элемент <link> для включения ваших таблиц стилей (в отличие от <style> ).
Selectivizr не обновляет стиль, если DOM изменяется после завершения загрузки страницы (например, если вы добавляете элементы в ответ на действие пользователя).

Инструмент 5: CSS3Pie

CSS3Pie также расширяет возможности Internet Explorer [6-8], но гораздо более естественным образом, поскольку позволяет эффективно использовать ряд элегантных свойств CSS3, таких как border-radius, linear-gradient, box-shadow, border-image а также добавляет поддержку нескольких фонов. Используйте CSS3Pie и попрощайтесь с вручную нарезанными и расположенными закругленными углами.

CSS3Pie: попрощаться с нарезанными вручную и расположенными закругленными углами.

Это работает путем использования малоизвестных проприетарных расширений Microsoft: свойства behavior CSS и файлов компонентов HTML ( официальная документация ). Это расширение позволяет вам присоединять JavaScript к определенным элементам HTML с помощью CSS. JavaScript включен вместе с некоторыми фирменными тегами Microsoft в файлы .htc которые есть ссылки в правилах стиля.

Только по этой причине многие разработчики могут утверждать, что вы не должны использовать CSS3Pie. Собственные теги Internet Explorer сильно влияют на производительность и дают менее привлекательный результат.

Почему CSS3Pie не использует простой JavaScript? Ну, есть JS-специфичная версия , хотя команда советует не использовать ее из-за того, что JavaScript блокирует синтаксический анализ страницы.

С текущим решением .htc реализация довольно проста: вам нужно всего лишь загрузить один файл из дистрибутива PIE.htc , PIE.htc , на ваш сервер. После этого каждый раз, когда вы используете одно из поддерживаемых свойств CSS3, добавляйте код ниже:

behavior: url(path/to/PIE.htc);

Выше path/to/PIE.htc — это путь относительно обслуживаемого файла HTML; не таблица стилей.

Инструкции на стороне сервера

Конечно, CSS3Pie может творить свое волшебство только в Internet Explorer. Также необходимо немного позаботиться о питании на стороне сервера:

Вы должны убедиться, что файл PIE.htc обслуживается с типом содержимого text/x-component . В дистрибутив входит PHP-скрипт, который может позаботиться об этом, если вам не разрешено изменять конфигурацию вашего сервера, например, на общем хосте.
PIE.htc также может вызывать предупреждения ActiveX, обычно, когда вы тестируете его на локальном хосте. Последняя проблема требует решения обходного пути « Знак сети» .

На момент написания этой статьи CSS3Pie все еще находился в бета-режиме, поскольку есть еще некоторые недостатки, которые необходимо устранить .

Инструмент 6: HTML5 Boilerplate

HTML5 Boilerplate идет намного дальше, чем ваши стандартные стартовые шаблоны.

HTML5 Boilerplate можно описать как набор шаблонов, которые помогут вам как можно быстрее начать создавать современные веб-сайты HTML5. Но HTML5 Boilerplate идет намного дальше, чем ваши стандартные стартовые шаблоны.

Например, он включает в себя последнюю версию Modernizr (того же создателя), а HTML-код даже ссылается на последние размещенные в Google jQuery, профилировщик Yahoo и скрипты Google Analytics. CSS содержит обычные правила сброса, а также множество @media запросов, которые помогут вам начать работу с адаптивным веб-дизайном, ориентированным на мобильные устройства.

Конфигурационные файлы

Самая уникальная особенность заключается в том, что помимо конфигурации клиента вы также получаете серверную часть: файлы конфигурации для Apache и Nginx. Это позволяет максимизировать скорость загрузки и оптимизировать доставку видео HTML5. В частности, файлы .htaccess для Apache могут быть очень удобны для переноса в учетную запись общего хостинга, поскольку такие вещи, как сжатие gzip и expires , по умолчанию не активны.

Много ли это делает?

Некоторые люди могут возразить, что HTML5 Boilerplate принимает за них слишком много решений (черт, конфигурация Apache даже автоматически удаляет www. Перед доменным именем!) Или что это несколько ориентировано на Google, хотя, тем не менее, это всегда интересно изучить файлы и выяснить, какие проблемы ожидали авторы.

Кроме того, вам, безусловно, рекомендуется разбить его на свои личные потребности. Это просто шаблон для начала.

Визуальный обзор

Если вы хотите получить подробное описание всего, что включает в себя HTML5 Boilerplate, Пол Айриш записал эксклюзивную заставку для Nettuts +.

Полностью прокомментированная версия доступна на html5boilerplate.com .

Эпилог: будь смелым

Часто страх реализации функций, которые не пользуются полной поддержкой браузера, не позволяет дизайнерам внедрять новейшие технологии. Несмотря на то, что необходимо внимательно изучить демографию вашей аудитории, а также пожелания вашего клиента, если вы признаете, что сайты не должны выглядеть одинаково во всех браузерах, сегодня можно в полной мере использовать HTML5 и CSS3.

Подумайте об этом так: если вы будете ждать, пока CSS3 «завершится», вы будете ждать вечно. CSS2 даже не полностью поддерживается во всех браузерах! Руководящий принцип здесь заключается в том, что каждый пользователь должен получить максимальную отдачу: если он использует новейший браузер, почему бы не воспользоваться всеми функциями, которые предоставляет браузер?

Дайте нам знать, что вы думаете об этих проблемах в комментариях. Большое спасибо за чтение!