Что такое http equiv x ua compatible
Режимы Internet Explorer
Вокруг Internet Explorer сложилась ситуация, которая больше не прослеживается ни с одним другим браузером — разброс версий начинается с 6.0 и заканчивается 9.0. Причины использования устаревших версий могут быть совершенно разные.
Сама компания Microsoft всячески поощряет переход на новые версии Internet Explorer и в 2010 году прекратила поддержку IE6 и IE7.
Что касается разработчиков сайтов, то для них такой большой набор версий является настоящей проблемой. Каждая версия IE содержит свои уникальные ошибки, особенности отображения веб-страниц, а также не поддерживает какие-то свойства CSS. Одним из радикальных вариантов решения проблемы является полный отказ разработчика от поддержки определенных версий IE. Так, некоторые сервисы Google, сайт vkontakte.ru при попытке зайти на них через IE6 выдают предупреждение о том, что вы используете устаревший браузер. С другой стороны, некоторые разработчики интернет-магазинов бьются за каждый браузер, полагая, что даже если каким-то браузером пользуется 2%, то отказ от него приведет к потере 2% клиентов.
Из-за того, что каждая версия IE может отображать сайт по своему, разработчики IE8 оказались перед сложной дилеммой — эта версия настолько отличалась от предыдущей, что при просмотре через IE8 бо́льшая часть сайтов «рассыпалась». В итоге было принято решение добавить режим представления совместимости; для быстрого переключения сайтов в этот режим возле адресной строки добавлена специальная кнопка (рис. 1.6а). В действительности при переключении в этот режим браузер начинал работать как версия 7.0. В IE9 пошли еще дальше и в нём уже можно переключаться на IE8 или IE7 (рис. 1.6б).
 |  |
| а | б |
Рис. 1.6. Кнопка для переключения в режим совместимости
a — в IE8, б — в IE9
Рис. 1.7. Режимы браузера
Выбор режима браузера определяет следующее:
Агент пользователя представляет собой текстовую строку, отправляемую на сервер для идентификации браузера, его версии и операционной системы. Значение User-Agent определяет не только браузер, но также поисковых пауков и сетевых роботов. Список возможных значений User-Agent и разбор строки можно посмотреть на сайте http://www.useragentstring.com. В табл. 1.1 приведены значения User-Agent при выборе разных режимов IE.
В вашем случае строка User-Agent может отличаться от приведенных в таблице, поскольку она зависит от версии Windows и её параметров.
Вектор версии позволяет с помощью условных комментариев определять версию IE и отдавать для неё отдельный код. Условные комментарии активно применяются в вёрстке для устранения различий в макете между IE и другими браузерами. Подробнее о них пойдёт речь позже, пока же вы можете ознакомиться с небольшим примером, который показывает текст только в IE8. Остальные браузеры игнорируют этот фрагмент, считая его комментарием.
Режим документа меняется с помощью меню в Средствах разработчика (рис. 1.8).
Рис. 1.8. Режимы документа
Начиная с версии IE6, имеются следующие режимы (табл. 1.2).
| Режим | Описание |
|---|---|
| IE5 (режим совместимости) | Несмотря на то, что браузером IE5 уже никто не пользуется, этот режим применяется во всех старших версиях IE при переключении в режим совместимости. Достаточно не указать доктайп и вы, словно на машине времени, вернётесь в прошлый век к отображению в этом браузере. |
| IE6 | Этот режим работает только в версии 6.0. |
| IE7 | Стандартный режим браузера IE7 и режим при переключении на него в IE8 и IE9. |
| IE8 | Стандартный режим браузера IE8 и режим при переключении на него в IE9. |
| IE9 | Этот режим работает только в версии 9.0. |
Версия может принимать следующие значения (табл. 1.3).
| Значение | Описание |
|---|---|
| 5 | Вынужденное переключение в режим IE5, доктайп при этом игнорируется. |
| 7 | Вынужденное переключение в режим IE7, доктайп при этом игнорируется. |
| 8 | Вынужденное переключение в режим IE8, доктайп при этом игнорируется. |
| 9 | Вынужденное переключение в режим IE9, доктайп при этом игнорируется. |
| EmulateIE7 | При наличии доктайпа переключается в режим IE7, в противном случае в режим совместимости. |
| EmulateIE8 | При наличии доктайпа переключается в режим IE8, в противном случае в режим совместимости. |
| EmulateIE9 | При наличии доктайпа переключается в режим IE9, в противном случае в режим совместимости. |
| Edge | Устанавливает документ в наиболее новый доступный режим. Для версии 8.0 это режим IE8, для версии 9.0 это режим IE9. |
К примеру, на сайте Яндекса применяется следующий код для эмуляции режима IE7.
При добавлении данного кода в документ кнопка режима совместимости (рис. 1.6) в браузере исчезает.
Метаданные в HTML
Тег обеспечивает метаданные о HTML документе. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.
Указание кодировки документа
Тег позволяет сообщить браузеру посетителя, какой набор символов и какую кодировку необходимо установить на веб-странице. Атрибут charset
(HTML тега ) задает кодировку символов для HTML документа.
В данном примере мы задали кодировку документа UTF-8 с использованием элемента и атрибута charset. Кодировка UTF-8 одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы Юникода.
Стандарт HTML 5 не запрашивает конкретную кодировку, но дает рекомендацию использовать кодировку UTF-8. Не рекомендуется использовать кодировки ASCII, CESU-8, UTF-7, BOCU-1, SCSU и UTF-32 по различным причинам.
Считается хорошей практикой, и настоятельно рекомендуется определять набор символов (кодировку), используя атрибут charset . Атрибут charset является лишь частью алгоритма определения кодировки страницы браузером. Рекомендуется указывать кодировку символов первым элементом (если используется несколько). Обратите внимание, что для одного документа указывается только одна кодировка.
В теории, любая кодировка может быть использована, но ни один браузер не понимает их все. Используя более распространенную кодировку символов, увеличивает шанс того, что браузер будет её понимать. Полный перечень кодировок доступен на сайте iana.org.
Часто используемые мета-теги
Метаданные разделены на две основные группы:
Атрибут name отвечает за текстовую информацию о странице, её авторе, содержит рекомендации для поисковых систем, а атрибут http-equiv формирует гипертекстовый заголовок страницы и определяет его обработку.
Рассмотрим часто используемые варианты использования тега :
Описание в данном теге довольно важное, его учитывают поисковые машины при индексации. Атрибут content в данном примере содержит описание конкретной веб-страницы сайта. Не рекомендуется использовать длинные описания.
Представляет собой список ключевых слов (касающиеся конкретной страницы). Ходит много споров о том учитывается или нет поисковыми системами это значение, исходя из перечня, используемых метатегов в Google, то он не учитывает этот мета тег, а Яндекс, в некоторых случаях оставляет за собой право его использовать.
Определяет автора контента:
Давайте рассмотрим пример использования этих мета тегов:
В данном примере мы использовали три элемента :
Атрибут http-equiv
Атрибут http-equiv фактически эквивалентен гипертекстовому заголовку (имитация http-заголовка), формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными http-заголовками. Название заголовка указывается в атрибуте http-equiv, а значение указывается в атрибуте content. В некоторых случаях могут автоматически быть переведены в настоящие HTTP-заголовки.
Давайте рассмотрим пример его использования:
В данном примере мы использовали три элемента для которых были указаны различные значения атрибута http-equiv:
Индексация страниц
Используется поисковыми системами при индексации страниц:
| Значение атрибута | Определение |
|---|---|
| noindex | запрещает индексирование документа. |
| nofollow | запрещает проход по ссылкам в документе. |
| index | разрешает индексирование документа. |
| follow | разрешает проход по ссылкам в документе. |
Настройка области просмотра
Обращаю Ваше внимание на то, что область просмотра определяет, как веб-страница отображается на мобильном устройстве, если она не задана, то ширина страницы считается равной стандартному значению, и она уменьшается на мобильном устройстве, чтобы поместиться на его экране.
Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:
Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.
Управление режимами Internet Explorer
Заключительный мета-тег, который должен присутствовать на Ваших страницах, позволяет в зависимости от указанного значения content сообщить браузеру Internet Explorer как отображать документ (в каком режиме) в зависимости от версии, которая используется в данный момент:
Грамотное размещение метаданных на каждой странице Вашего сайта, сделает его привлекательным для поисковых машин и упростит процесс индексации.
Вопросы и задачи по теме
Перед тем как перейти к изучению СSS 3 ответьте на следующий вопрос:
1. Настоятельно рекомендуется определять набор символов (кодировку) в документе:
2. Описание в следующем мета-теге довольно важное, его учитывают поисковые машины при индексации и используют в поисковой выдаче:
3. Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо использовать следующий мета-тег:
4. Для корректного (однотипного) отображения страниц в браузерах Internet Explorer необходимо использовать следующий мета-тег:
За что отвечают эти две строки Html кода?
Делаю верстку своей старой работы, верстать начал относительно недавно.
В коде нашел эти две строки, не могу вспомнить за что они отвечают.
И нужно ли их обязательно вставлять всегда?
Спасибо.
большое спасибо за развернутый ответ 🙂
а не подскажите еще, что означают эти строки в самом начале?
Алекс, все правильно, это ie conditional comments
Мета тег viewport отвечает за «оптимизацию» под разные размеры устройства.
https://developer.mozilla.org/ru/docs/Mozilla/Mobi.
Мета тег X-UA-Compatible отвечает за браузеры Microsoft IE8 IE9 IE10 IE11.
qaru.site/questions/10755/what-does-meta-http-equi.
Первый тег настоятельно рекомендую исопльзовать, а второй используйте по надобности, в зависимости от того, нужны ли вам браузера IE
Большое спасибо за подробный ответ и статьи, почитал, примерно понял 🙂
Не подскажите еще, эти строки в самом начале так же как-то связаны с IE и так же наверное лучше оставить для поддержки?
— это указывает на версию html языка. В данном случае, html 5
Не подскажите насколько актуальны и практичны данные строки условных комментариев? Лишними не будут думаю?
Если вы не будете использовать их, то конечно они лишние.
Обратите внимание, что в каждом теге свой набор классов lt-ie9 lt-ie8 lt-ie7. соответственно при таком использовании вы можете к css коде писать отдельные стили для разных версий IE
Если вы этого делать не собираетесь, то и условные комментарии вам не нужны.
Какая разница, если одна веб-страница начинается с
и если страница начинается с
Если нет никакой разницы, я полагаю, что могу просто игнорировать X-UA-Compatible мета-заголовок, так как я просто хочу, чтобы он отображался в большинстве стандартных режимов во всех версиях IE.
Обновление за октябрь 2015
Этот ответ был опубликован несколько лет назад, и теперь вопрос действительно должен быть, стоит ли задумываться об использовании X-UA-Compatible тега на вашем сайте? с изменениями, которые Microsoft внесла в свои браузеры (подробнее об этом ниже).
В зависимости от того, какие браузеры Microsoft вы поддерживаете, вам может не понадобиться продолжать использовать X-UA-Compatible тег. Если вам нужно поддерживать IE9 или IE8, то я бы порекомендовал использовать тег. Если вы поддерживаете только самые последние версии браузеров (IE11 и / или Edge), я бы рекомендовал вообще отказаться от этого тега. Если вы используете Twitter Bootstrap и вам необходимо исключить предупреждения проверки, этот тег должен отображаться в указанном порядке. Дополнительная информация ниже:
По словам Microsoft, при использовании X-UA-Compatible тега он должен быть как можно выше в вашем документе head :
Если вы используете мета-тег X-UA-Compatible, вы хотите разместить его как можно ближе к верху заголовка страницы. Internet Explorer начинает интерпретацию разметки с использованием последней версии. Когда Internet Explorer обнаруживает мета-тег, совместимый с X-UA, он запускается заново с использованием механизма указанной версии. Это снижение производительности, потому что браузер должен остановиться и перезапустить анализ содержимого.
Чтобы попытаться понять, что означает каждый из них, вот определения, предоставленные Microsoft:
Internet Explorer поддерживает несколько режимов совместимости документов, которые включают различные функции и могут влиять на способ отображения содержимого:
В пограничном режиме Internet Explorer отображает содержимое в самом высоком доступном режиме. В Internet Explorer 9 это эквивалентно режиму IE9. Если в будущем выпуске Internet Explorer будет поддерживаться режим более высокой совместимости, страницы, переведенные в граничный режим, будут отображаться в самом высоком режиме, поддерживаемом этой версией. Эти же страницы будут по-прежнему отображаться в режиме IE9 при просмотре с помощью Internet Explorer 9. Internet Explorer поддерживает несколько режимов совместимости документов, которые включают различные функции и могут влиять на способ отображения содержимого:
Режим IE11 обеспечивает высочайшую поддержку, доступную для существующих и развивающихся отраслевых стандартов, включая HTML5, CSS3 и другие.
Режим IE10 обеспечивает высочайшую поддержку, доступную для установленных и появляющихся отраслевых стандартов, включая HTML5, CSS3 и другие.
Режим IE9 обеспечивает высочайшую поддержку, доступную для установленных и разрабатываемых отраслевых стандартов, включая HTML5 (рабочий проект), спецификацию каскадных таблиц стилей W3C уровня 3 (рабочий проект), спецификацию масштабируемой векторной графики (SVG) 1.0 и другие. [Примечание редактора: IE 9 не поддерживает анимацию CSS3].
Режим IE8 поддерживает множество установленных стандартов, включая спецификацию каскадных таблиц стилей W3C уровня 2.1 и API селекторов W3C; он также обеспечивает ограниченную поддержку спецификации уровня 3 каскадных таблиц стилей W3C (рабочий проект) и других новых стандартов.
В режиме IE7 контент отображается так, как если бы он отображался в стандартном режиме Internet Explorer 7, независимо от того, содержит ли страница директиву.
Режим эмуляции IE9 указывает Internet Explorer использовать директиву для определения способа отображения содержимого. Директивы стандартного режима отображаются в режиме IE9, а директивы режима совместимости отображаются в режиме IE5. В отличие от режима IE9, режим эмуляции IE9 соответствует директиве.
Режим эмуляции IE8 указывает Internet Explorer использовать директиву для определения способа визуализации содержимого. Директивы режима стандартов отображаются в режиме IE8, а директивы режима причуд отображаются в режиме IE5. В отличие от режима IE8, режим эмуляции IE8 соответствует директиве.
Режим эмуляции IE7 указывает Internet Explorer использовать директиву для определения способа отображения содержимого. Директивы режима стандартов отображаются в стандартном режиме Internet Explorer 7, а директивы режима причуд отображаются в режиме IE5. В отличие от режима IE7, режим эмуляции IE7 соответствует директиве. Для многих веб-сайтов это предпочтительный режим совместимости.
В режиме IE5 содержимое отображается так, как если бы оно отображалось в режиме совместимости Internet Explorer 7, что очень похоже на то, как содержимое отображалось в Microsoft Internet Explorer 5.
IE10 ПРИМЕЧАНИЕ: Начиная с IE10, режим совместимости ведет себя иначе, чем в предыдущих версиях браузера. В IE9 и более ранних версиях режим причуд ограничивал веб-страницу функциями, поддерживаемыми IE5.5. В IE10 режим совместимости соответствует различиям, указанным в спецификации HTML5.
Лично я всегда выбираю http-equiv=»X-UA-Compatible» content=»IE=edge» метатег, так как в старых версиях есть много ошибок, и я не хочу, чтобы IE решил перейти в «Режим совместимости» и показать свой сайт как IE7 против IE8 или 9. Я всегда предпочитаю последнюю версию IE.
Начиная с IE11, режим края является предпочтительным режимом документа; он представляет самую высокую поддержку современных стандартов, доступных для браузера.
Используйте объявление типа документа HTML5 для включения режима края:
Пограничный режим был представлен в Internet Explorer 8 и был доступен в каждом последующем выпуске. Обратите внимание, что функции, поддерживаемые пограничным режимом, ограничены функциями, поддерживаемыми конкретной версией браузера, отображающей содержимое.
Начиная с IE11, режимы документов устарели и больше не должны использоваться, кроме как на временной основе. Обязательно обновляйте сайты, которые используют устаревшие функции и режимы документов, чтобы соответствовать современным стандартам.
Если вам необходимо настроить таргетинг на конкретный режим документа, чтобы ваш сайт функционировал, пока вы переделываете его для поддержки современных стандартов и функций, имейте в виду, что вы используете переходную функцию, которая может быть недоступна в будущих версиях.
Если в настоящее время вы используете заголовок, совместимый с x-ua, для таргетинга на унаследованный режим документов, возможно, ваш сайт не будет соответствовать наилучшим возможностям IE11.
Microsoft Edge (замена для Internet Explorer, поставляемого в комплекте с Windows 10)
Информация о X-UA-Compatible метатеге для «Edge» версии IE. От Microsoft :
Представляем «живой» режим пограничного документа
С изменениями в Microsoft Edge, которые больше не поддерживают режимы документов в большинстве случаев, у Microsoft появился инструмент для сканирования вашего сайта, чтобы проверить, есть ли на нем код, несовместимый с Edge.
Chrome = 1 информация для IE
Google Chrome Frame легко повышает удобство работы в Internet Explorer. Он отображает сайты с поддержкой Google Chrome Frame с использованием технологии рендеринга Google Chrome, предоставляя вам доступ к новейшим функциям HTML5, а также к функциям производительности и безопасности Google Chrome, никоим образом не прерывая обычное использование браузера.
Когда установлен Google Chrome Frame, Интернет становится еще лучше, и вам не нужно об этом думать.
Но чтобы этот плагин работал, вы должны использовать его chrome=1 в X-UA-Compatible метатеге.
Проверка:
HTML5 :
XHTML
Нет проблем с проверкой при использовании, если тег правильно закрыт (т. /> Е. Против > ).
Twitter Bootstrap
What does do?
What’s the difference if one web page starts with
and If page starts with
If there is no difference, I suppose I can just ignore the X-UA-Compatible meta header, since I just want it to be rendered in most standard mode in all IE versions.
12 Answers 12
November 2021 Update
As this answer is now 10+ years old my recommendation would be to leave this tag out altogether, unless you must support old legacy browsers.
October 2015 Update
This answer was posted several years ago and now the question really should be should you even consider using the X-UA-Compatible tag on your site? with the changes Microsoft has made to its browsers (more on those below).
Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE9 or IE8, then I would recommend using the tag. If you only support the latest browsers (IE11 and/or Edge) then I would consider dropping this tag altogether. If you use Twitter Bootstrap and need to eliminate validation warnings, this tag must appear in its specified order. Additional info below:
The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. IE11 has made changes to these modes; see the IE11 note below. Microsoft Edge, the browser that replaced IE11, only honors the X-UA-Compatible meta tag in certain circumstances. See the Microsoft Edge note below.
According to Microsoft, when using the X-UA-Compatible tag, it should be as high as possible in your document head :
If you are using the X-UA-Compatible META tag you want to place it as close to the top of the page’s HEAD as possible. Internet Explorer begins interpreting markup using the latest version. When Internet Explorer encounters the X-UA-Compatible META tag it starts over using the designated version’s engine. This is a performance hit because the browser must stop and restart analyzing the content.
Here are your options:
To attempt to understand what each means, here are definitions provided by Microsoft:
Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:
IE10 NOTE: As of IE10, quirks mode behaves differently than it did in earlier versions of the browser. In IE9 and earlier versions, quirks mode restricted the webpage to the features supported by IE5.5. In IE10, quirks mode conforms to the differences specified in the HTML5 specification.
Personally, I always choose the http-equiv=»X-UA-Compatible» content=»IE=edge» meta tag, as older versions have plenty of bugs, and I do not want IE to decide to go into «Compatibility mode» and show my site as IE7 vs IE8 or 9. I always prefer the latest version of IE.
Starting with IE11, edge mode is the preferred document mode; it represents the highest support for modern standards available to the browser.
Use the HTML5 document type declaration to enable edge mode:
Edge mode was introduced in Internet Explorer 8 and has been available in each subsequent release. Note that the features supported by edge mode are limited to those supported by the specific version of the browser rendering the content.
Starting with IE11, document modes are deprecated and should no longer be used, except on a temporary basis. Make sure to update sites that rely on legacy features and document modes to reflect modern standards.
If you must target a specific document mode so that your site functions while you rework it to support modern standards and features, be aware that you’re using a transitional feature, one that may not be available in future versions.
If you currently use the x-ua-compatible header to target a legacy document mode, it’s possible your site won’t reflect the best experience available with IE11.
Microsoft Edge (Replacement for Internet Explorer that comes bundled with Windows 10)
Information on X-UA-Compatible meta tag for the «Edge» version of IE. From Microsoft:
Introducing the “living” Edge document mode
As we announced in August 2013, we are deprecating document modes as of IE11. With our latest platform updates, the need for legacy document modes is primarily limited to Enterprise legacy web apps. With new architectural changes, these legacy document modes will be isolated from changes in the “living” Edge mode, which will help to guarantee a much higher level of compatibility for customers who depend on those modes and help us move even faster on improvements in Edge. IE will still honor document modes served by intranet sites, sites on the Compatibility View list, and when used with Enterprise Mode only.
Public Internet sites will be rendered with the new Edge mode platform (ignoring X-UA-Compatible). It is our goal that Edge is the «living» document mode from here out and no further document modes will be introduced going forward.
With the changes in Microsoft Edge to no longer support document modes in most cases, Microsoft has a tool to scan your site to check and see if it has code that is not compatible with Edge.
Chrome=1 Info for IE
Google Chrome Frame is an open source browser plug-in. Users who have the plug-in installed have access to Google Chrome’s open web technologies and speedy JavaScript engine when they open pages in the browser.
Google Chrome Frame seamlessly enhances your browsing experience in Internet Explorer. It displays Google Chrome Frame enabled sites using Google Chrome’s rendering technology, giving you access to the latest HTML5 features as well as Google Chrome’s performance and security features without in any way interrupting your usual browser usage.
When Google Chrome Frame is installed, the web just gets better without you having to think about it.
But for that plug-in to work you must use chrome=1 in the X-UA-Compatible meta tag.
More info on Chrome Frame can be found here.
Note: Google Chrome Frame only works for IE6 through IE9, and was retired on February 25, 2014. More info can be found here. Thanks to @mck for the link.
Validation:
HTML5:
If you must have completely valid code then consider doing this on the server level by setting HTTP header. As a note, Microsoft says, If both of these instructions are sent (meta and HTTP), the developer’s preference (meta element) takes precedence over the web server setting (HTTP header). See olibre’s answer or bitinn’s answer for more details on how to set an HTTP header.
XHTML
There isn’t an issue with validation when using as long as the tag is properly closed (i.e. /> vs > ).
Twitter Bootstrap (V3 and below)
This tag has been strongly recommended by the Bootstrap team since at least 2014, and Bootlint, the linter authored by the twbs team continues to throw a warning when the tag is omitted. The linter distinguishes between warnings and errors, and as such the severity of omitting this tag may be considered minor.
For more information on X-UA-Compatible see Microsoft’s Website Defining Document Compatibility.
For more information on what IE supports see caniuse.com.
For more information on Twitter Bootstrap requirements, see the bootlint project wiki page.