Подтвердить что ты не робот

Как правильно использовать HTML5shiv... как работать с IE 9, Firefox, Safari?

Вопрос

Как html5shiv работает на IE9, когда условный комментарий используется [if lt IE 9] для IE8 и ниже И делают Safari 4.x и Firefox 3.x читают IE условные комментарии? Если не так, как html5shiv POSSIBLY работает над этими браузерами, используя условные комментарии, как это предлагается в их Инструкции Github?


Здесь был вопрос спрашивающий, можно ли его использовать в каждом браузере без условных комментариев и каких побочных эффектов, но это не мой вопрос. Этот вопрос был задан 4 года назад. HTML5 теперь стандартен, и Microsoft больше не поддерживает устаревшие браузеры, поэтому загрузка этого в каждом браузере была бы безумной на данный момент, и я бы не подумал об этом. Мой вопрос связан с документацией по Github, что html5shiv предоставляет из коробки с использованием этой документации и как ее использовать сегодня для поддержки браузеров, которые, по ее утверждению, поддерживают.

Цитирование readme на Github в отношении html5shiv script:

"Он также применяет базовый стиль для элементов 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% в глобальном использовании в соответствии с счетчиком статистики. Поскольку Microsoft отменила поддержку для устаревших браузеров 12 января, похоже, что html5shiv может сейчас или скоро уйти в прошлое. Будет интересно посмотреть, насколько эти устаревшие IE-браузеры упадут в будущем году.

stat counter

Однако, в зависимости от того, что вы разрабатываете, вы все равно можете поддерживать эти браузеры. Когда вы включаете Safari 4.x и Firefox 3 в вышеуказанную статистику, общая доля браузера, поддерживаемая html5shiv, составляет 2,3%. Для большинства людей это ничего, но если у вас есть сайт электронной торговли, 2,3% могут быть ОГРОМНЫМИ.


Что касается моего фактического вопроса, я думаю, что я либо пропустил что-то в документации, либо не совсем понял IE условные комментарии.

По логике я бы подумал, что это лучший способ сделать это. Условные комментарии в IE работают через версии с 5 по 9, поэтому мы не должны иметь загрузку script в 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 reset), вы сокращаетесь до 1,39 % браузеров, на которые html5shiv действительно повлияет.

4b9b3361

Ответ 1

Чтобы ответить на мой собственный вопрос...

Документы github для html5shiv вводят в заблуждение... это в значительной степени. После некоторого дальнейшего копания я наткнулся на эту старую версию HTML5SHIV Github, которая отвечает на этот вопрос.

В браузере Firefox 3 или Safari 4 нет <браузерa > quikk или hack ", который заставит условные комментарии читать ( здесь очень обширный список удивительных браузерные хаки).

[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. Хотя приведенные выше методы могут быть вам нужны, я подумал, что это самый эффективный способ использования script.

<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 reset (здесь список самых популярных в 2016 году), вы можете отказаться от стиля часть ниже всех вместе.

В последнее время мы включаем его непосредственно перед тегом закрывающей головки, как рекомендовано.

<!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 или просто стили CSS/ reset.

Ответ 2

Шив script используется только в IE (в данном случае меньше версии 9 [... lt IE9...]), не используется в других браузерах, игнорируется ими. Он прокомментировал все

<!-- ... --> 

IE поддерживает их и читает их. Шива script дополняет функциональность, чтобы эти старые браузеры работали "лучше".

UPDATE: Похоже, что "IE IE9" также запускается в Safari 4.x и FF 3.x. из того, что я могу найти (все клонированы из описания проекта GitHub).

Другое ОБНОВЛЕНИЕ: Я был уверен, что это работает только в IE, а не в старом Safari или FireFox. Я буду рыть. Кто-то меня поправит, если я ошибаюсь.

Ответ 3

Боковое примечание: Вы должны брать статистику браузера только как очень. Статистика на таких сайтах далека от Евангелия и будет меняться от страны к стране, от рынка к рынку, от демографического до демографического. Вы должны посмотреть на свою собственную аналитику сайта и посмотреть, сколько из ВАШИХ пользователей попадают в категорию Safari 4, FireFox 3, Internet Explorer 6-8 (думаю, это будет LOT менее 2,3%).

(Также помните, что FireFox автоматически обновляет себя и в настоящее время находится на версии 43 (!), и что Safari автоматически обновляется с OSX и находится на версии 9. Шансы на людей, которые все еще используют старые версии, очень незначительны. очень популярный сайт аналитики на минах: из 20 000 сеансов за последний месяц только 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:

/* Safari only override */     
::i-block-chrome,.myClass {      color: lime;     }

Но это не то, что делает HTML5shiv, и вы правы: Условный оператор, представленный на домашней странице HTML5shiv, будет не подбираться FF3 или Safari 4 в текущем государство. Я предполагаю, что это потому, что они считают, что эти браузеры настолько редки, что это не стоит для обычного пользователя. Кроме того, любой CSS reset/normalize, вероятно, в любом случае будет содержать необходимый 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.)

Ответ 4

Я написал очень подробную страницу, посвященную условным комментариям 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. См. страницу Wiki обозревателя Internet Explorer, для которой версии IE запускаются в каких версиях Windows.


По состоянию на январь 2010 года только IE10 + следует уделять сколько-нибудь значимое внимание. Правильная политика заключается в полностраничном блоке IE9 или ниже; если Microsoft не поддерживает его, тогда вы не должны быть либо, если вам не выплачивается минимум в два раза больше, чем год на корпоративной работе. Стенд ваших наземных разработчиков, мы те, кто в конечном итоге знает, что потребуется, чтобы выполнить свою работу.

Ответ 5

Нет, образец на странице github, как загрузить shiv, не будет работать ни на одном браузере IE от 8 и ниже, так как он использует метод "условного комментария на нижнем уровне".

Чтобы он работал как на IE9, так и ниже, а не на IE-браузерах, таких как Safari и Firefox, "downlevel-detected" условный комментарий который будет выглядеть следующим образом.

<!--[if lte IE 9]><!-->
<link href="ie98765_and_non_ie.css" rel="stylesheet">
<!--<![endif]-->

Следует отметить боковое примечание:

  • IE10 и выше уже не поддерживают условные комментарии и будут вести себя как не IE-браузеры в этом случае.

  • в браузерах, которые уже поддерживают элементы HTML5, будет ли shiv ничего не делать.