HTML5 и CSS3 без вины

23 января 2018

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


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

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

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

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

[if IE 6]

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

[if gt IE 6]

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


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

Во всех IE, исключая самую последнюю версию (IE9), вы не можете применять стили к элементам, которые браузер не распознает. Ваши сильные, новые элементы HTML5, во всей их красе, непроницаемы для правил CSS в этой среде. Именно здесь Rems Sharp's html5shiv (иногда называемый html5 shim) приходит на помощь. Просто включите его в разделвашей страницы, и вы сможете идеально стилизовать новые элементы 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

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

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

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

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

Теперь на примере того, как работает Modernizr: если браузер поддерживает граничный радиус и свойство count-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 к элементу. Эта последняя предосторожность позволяет вам создавать стили, когда 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: Универсальный CSS IE 6

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

<!--[if ! lte IE 6]><!-->
/* 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, таких как

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

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

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

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


Инструмент 4: Selectivizr

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

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

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

Чтобы использовать Selectivizr, загрузите его со своей домашней страницы и включите в свой разделвместе с одной из библиотек поддержки. Вот пример с 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 Selectors you Must Memorize» для получения полного списка селекторов.

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

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

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

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

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

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

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

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


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

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

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

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

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

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

Это слишком много?

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

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

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

Если вам нужна подробная разбивка всего HTML5 Boilerplate, Paul Irish записал эксклюзивный скринкаст для Nettuts +.

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


Эпилог: Быть смелым

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

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

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