Как правильно использовать HTML5shiv... как работают IE 9, Firefox, Safari?
Вопрос
Как работает html5shiv в IE9, когда используется условный комментарий
[if lt IE 9]предназначен для IE8 и ниже И читают ли Safari 4.x и Firefox 3.x условные комментарии IE? Если нет, то как html5shiv ВОЗМОЖНО работал в этих браузерах, используя условные комментарии, как указано в их инструкциях Github?
Здесь был вопрос, спрашивающий, можно ли его использовать в каждом браузере без условных комментариев и каковы будут побочные эффекты, но это был не мой вопрос. Этот вопрос был задан 4 года назад. HTML5 теперь является стандартным, и Microsoft больше не предоставляет поддержку устаревших браузеров, поэтому загрузка его в каждый браузер была бы безумной на данный момент, и я бы не стал это рассматривать. Мой вопрос связан с документацией на Github, с тем, что html5shiv предоставляет "из коробки", используя эту документацию, и как использовать ее сегодня для поддержки браузеров, которые, как он утверждает, поддерживает.
Процитируем readme на Github в отношении скрипта html5shiv:
"Он также применяет базовые стили для элементов HTML5 для IE6-9, Safari 4.x и FF 3.x".
Useage:
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
В прошлом году IE 8 и 9 вместе взятые снизились с примерно 4% до примерно 2% в глобальном использовании по данным Stat Counter. Так как 12 января Microsoft прекратила поддержку устаревших браузеров, кажется, что html5shiv может уйти в прошлое или скоро. Будет интересно посмотреть, как сильно упадут эти устаревшие браузеры IE в следующем году.
Однако, в зависимости от того, что вы разрабатываете, вы все равно можете поддерживать эти браузеры. Когда вы включаете Safari 4.x и Firefox 3 в приведенную выше статистику, общая доля браузера, поддерживаемая html5shiv, составляет 2,3%. Для большинства людей это ничто, но если у вас есть сайт электронной коммерции, 2,3% может быть ОГРОМНЫМ.
Что касается моего фактического вопроса, я думаю, что я либо упустил что-то в документации, либо недостаточно хорошо понимаю условные комментарии IE.
Логично, что я думаю, что это будет лучший способ сделать это. Условные комментарии в IE работают в версиях с 5 по 9, поэтому мы не должны загружать скрипт в IE5 без причины.
<!--[if !(IE 5)]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Тем не менее, за последние 5 лет я никогда не видел, чтобы кто-то так делал, поэтому я явно что-то упускаю. Кроме того, я до сих пор не понимаю, как это будет работать для FF 3 и Safari 4, если только нет ошибки или чего-то, что заставляет их не читать комментарии. Я открыл эту тему на html5shiv github относительно этой проблемы, но не смог получить ответ.
HTML5shiv легко используется на миллионах веб-сайтов. Большинство разработчиков и владельцев сайтов предполагают, что он поддерживает IE9 Safari 4 и FF 3 из коробки.
Кроме того, насколько мне известно в отношении IE9, это все, что html5shiv делает для его поддержки.
article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}
Если это правда, это может быть еще одной причиной для того, чтобы многие прекратили использовать его, учитывая, что когда вы берете это из уравнения и включаете его в свой CSS (или сброс CSS), у вас до 1,39% браузеров, которые html5shiv фактически имел бы влияние на.
5 ответов
Чтобы ответить на мой собственный вопрос...
Документы github для html5shiv вводят в заблуждение... вот и все. После некоторого дальнейшего поиска я наткнулся на эту старую проблему HTML5SHIV Github, которая отвечает на этот вопрос.
В Firefox 3 или Safari 4 не существует каких-либо "прихотей или взломов браузера", из- за которых можно читать условные комментарии ( вот очень большой список удивительных взломов браузера).
[if lt IE 9] в IE 5-8 работает так, как и должно быть... не обманывайте себя readme.
Поэтому, если вы используете приведенный ниже фрагмент кода и ожидаете, что он будет работать магически для IE9, Safari 3 или Firefox 4, вам не повезло.
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Так как же использовать html5shiv?
Как я упоминал в этом вопросе, а другие упоминали в своих ответах, Microsoft прекратила поддержку устаревших браузеров 12 января 2016 года. Имея это в виду и то, что упомянутые в моем вопросе статистические данные, вероятно, искажены, как я думаю, это наследие использование будет продолжать падать устойчивыми темпами в течение следующего года или около того. Кроме того, большая часть текущего использования, вероятно, исходит от старых компаний, которые обновлялись медленно. Для большинства людей это не те пользователи, с которых они будут получать трафик (тем более что эти компьютеры, скорее всего, будут работать только на компьютерах).
Лично я больше не буду использовать html5shiv, но это ни здесь, ни там. Поскольку многие из вас, вероятно, все еще будут использовать HTML5, вот мое предложение, основанное на личном опыте, исследованиях и других ответах на этой странице о том, как HTML5shiv будет поддерживать различные браузеры...
Если вам нужна поддержка IE6-9, Safari 4 и Firefox 3 с использованием html5shiv без каких-либо дополнительных изменений, НЕ включайте условные комментарии:
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
Если вы хотите поддержку Internet Explorer, используйте это. Поскольку html5shiv не работает на IE 5, нет смысла загружать его в этот убогий браузер:
<!--[if !(IE 5)]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Если вам нужна только поддержка Internet Explorer 8 или 9, используйте это:
<!--[if (IE 8)|(IE 9)]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Вариант 4: Хотя перечисленные выше методы могут быть тем, что вам нужно, после некоторых раздумий я считаю, что это наиболее эффективный способ использования сценария.
<style type="text/css">
article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}
</style>
<!--[if (gt IE 5)&(lt IE 9)]>
<script type="text/javascript">window.html5={shivCSS:!1};</script>
<script type="text/javascript" src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Вариант 4 1/2: "Вероятно" лучший способ использовать HTML5Shiv в будущем:
Даже лучше, чем выше, мы можем удалить атрибуты типа, так как мы указываем, что это HTML5, и мы можем минимизировать его. Мы также можем использовать популярные cdn, такие как jsdeliver или maxcdn, чтобы попытаться ускорить процесс, так как мы надеемся, что у них уже будет кеширован файл на их компьютере. Не повторяю, не используйте Google для хостинга html5shiv. Это распространенная ошибка, которую делают люди, и она кешируется только на несколько минут. Код Google не предназначен для CDN.
Мы также отключаем shiv css и включаем его сами. Если вы используете сброс css (вот список самых популярных в 2016 году), вы можете оставить часть стиля ниже всех вместе.
Наконец, мы включаем его непосредственно перед закрывающим тегом head, как рекомендуется.
<!DOCTYPE html>
<html>
<head>
<!-- Meta, stylesheets, etc... -->
<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>
<!--[if (gt IE 5)&(lt IE 9)]> <script>window.html5={shivCSS:!1};</script> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
</head>
Этот метод гарантирует, что вы получите желаемые результаты из HTML5shiv, поддерживая ожидаемые браузеры.
Поскольку устаревшие браузеры больше не поддерживаются в IE, а Firefox и Safari имеют автообновления), скорее всего, вы можете избежать использования shiv и использования решения, такого как @LGSon's или просто стили / сброс CSS.
Примечание: вы должны воспринимать только статистику браузера как очень простое руководство. Статистика на таких сайтах далека от Евангелия и будет меняться от страны к стране, от рынка к рынку, от демографического к демографическому. Вы должны взглянуть на аналитику вашего собственного сайта и увидеть, сколько ВАШИХ пользователей попадают в категории Safari 4, FireFox 3, Internet Explorer 6-8 (я предполагаю, что это будет МЕНЬШЕ менее 2,3%).
(Также помните, что FireFox автоматически обновляется и в настоящее время имеет версию 43(!), И что Safari автоматически обновляется с помощью OSX и находится на версии 9. Шансы людей, все еще использующих более старые версии, чрезвычайно малы. Я проверил очень популярный сайт моей аналитики: из 20000 сессий в прошлом месяце только 1 использовал FF3, 1 использовал IE7, 1 использовал IE8, и ни один не использовал Safari 4 или IE6.)
Тем не менее, если вы стремитесь нацелиться на эти выбросы, вот ответы на ваши вопросы:
Как работает html5shiv в IE9, когда используется условный комментарий
[if lt IE 9]для IE8 и ниже
HTML5shiv не работает с IE9, потому что это не нужно. Internet Explorer 9 уже правильно поддерживает почти все элементы HTML5:
Safari 4.x и Firefox 3.x читают условные комментарии IE?
Safari и FireFox НЕ поддерживают условные комментарии IE, но они МОГУТ быть нацелены так:
FF3:
/* FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default { color: lime; }
Сафари:
/* Safari only override */
::i-block-chrome,.myClass { color: lime; }
Но это не то, что делает HTML5shiv, и вы правы: условное утверждение, представленное на домашней странице HTML5shiv, не будет воспринято FF3 или Safari 4 в его текущем состоянии. Я предполагаю, что это потому, что они считают эти браузеры настолько редкими, что для обычного пользователя это того не стоит. Кроме того, любой сброс / нормализация CSS, вероятно, будет включать необходимый CSS для этих браузеров.
Итак, чтобы узнать, как обрабатывать элементы HTML5 во всех упомянутых браузерах:
IE6-8: используйте HTML5shiv.js, как описано в их документации Github.
IE9-11: используйте Normalize.css или добавьте main { display: block } в ваш HTML. (Спасибо LGSon.)
Safari 4: используйте Normalize.css или следующий CSS:
article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
display: block;
}
FireFox 3: То же, что и выше.
(FireFox 4+ и Safari 5+ имеют гораздо более сильную поддержку HTML5 и не требуют вышеуказанного CSS.)
Скрипт shiv используется только в IE (в данном случае меньше, чем версия 9 [...lt IE9...]), не используется в других браузерах, игнорируется ими. Это закомментировано в конце концов
<!-- ... -->
IE поддерживает их и читает их. Скрипт shiv расширяет функциональность, чтобы старые браузеры работали "лучше".
ОБНОВЛЕНИЕ: похоже, что "lt IE9" также запускается в Safari 4.x и FF 3.x. из того, что я могу найти (все клонировано из описания проекта GitHub).
Еще одно ОБНОВЛЕНИЕ: я был уверен, что это работает только в IE, а не в старых Safari или FireFox. Я буду продолжать копать. Кто-то еще поправит меня, если я ошибаюсь.
Я написал очень подробную страницу, посвященную условным комментариям Internet Explorer много лет назад. Это для lte = меньше чем [или] равно IE9; Я задокументировал множество примеров, готовых для копирования и вставки на странице, которую я написал.
<head>
<!--[if lte IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>
Я бы порекомендовал вашим посетителям перейти с Vista, единственной версии Windows, которая может работать с IE9 или ниже, с поддержкой безопасности. По состоянию на январь 2016 года поддерживается только последняя версия Internet Explorer для каждой версии Windows. См. Страницу Вики по версиям Internet Explorer, для которой версии IE работают и в каких версиях Windows.
С января 2010 года только IE10+ должно быть уделено какое-либо значимое внимание. Правильная политика заключается в полностраничном блоке IE9 или ниже; если Microsoft не поддерживает его, то вы тоже не должны этого делать, если вам не платят как минимум вдвое больше, чем вы бы получали за год на корпоративной работе. Оставайтесь на месте, разработчики, мы те, кто в конечном итоге знает, что потребуется, чтобы выполнить работу.
Нет, пример на их странице github о том, как загрузить shiv, не будет работать ни на каких других браузерах, кроме IE от 8 и ниже, так как он использует технику условных комментариев "downlevel-hidden".
Чтобы заставить его работать как в IE9 и ниже, так и в браузерах, отличных от IE, таких как Safari и Firefox, необходимо использовать технику условного комментария "пониженный уровень", которая выглядит следующим образом.
<!--[if lte IE 9]><!-->
<link href="ie98765_and_non_ie.css" rel="stylesheet">
<!--<![endif]-->
Примечание, которое стоит отметить:
IE10 и выше больше не поддерживают условные комментарии и будут вести себя как браузеры не IE в этом случае.
в браузерах, которые уже поддерживают элементы HTML5, shiv ничего не сделает.