Css если браузер ie

Обновлено: 06.07.2024

Вокруг Internet Explorer сложилась ситуация, которая больше не прослеживается ни с одним другим браузером — разброс версий начинается с 6.0 и заканчивается 9.0. Причины использования устаревших версий могут быть совершенно разные.

Internet Explorer встроен в операционную систему Windows и неопытные пользователи даже не подозревают о наличии альтернативы.
Корпоративные пользователи с ограниченным доступом не могут самостоятельно обновить версию или сменить браузер.
Обновление IE до новой версии происходит через систему Windows Update, которая часто отключается по требованиям безопасности или для снижения интернет-трафика.
Некоторые приложения, например, банковские, могут быть «заточены» для работы только под конкретную версию IE.
В силу инерции мышления, когда пользователю нравится та программа, с которой он привык работать.

Сама компания Microsoft всячески поощряет переход на новые версии Internet Explorer и в 2010 году прекратила поддержку IE6 и IE7.

Из-за того, что каждая версия IE может отображать сайт по своему, разработчики IE8 оказались перед сложной дилеммой — эта версия настолько отличалась от предыдущей, что при просмотре через IE8 бо́льшая часть сайтов «рассыпалась». В итоге было принято решение добавить режим представления совместимости; для быстрого переключения сайтов в этот режим возле адресной строки добавлена специальная кнопка (рис. 1.6а). В действительности при переключении в этот режим браузер начинал работать как версия 7.0. В IE9 пошли еще дальше и в нём уже можно переключаться на IE8 или IE7 (рис. 1.6б).


а	б

Рис. 1.6. Кнопка для переключения в режим совместимости
a — в IE8, б — в IE9

Обилие версий IE усложняется еще тем, что версии браузера могут работать в нескольких режимах, порождая большое количество комбинаций, которые необходимо учитывать разработчику. Начиная с версии 8.0, переключение режимов в браузере делается через Средства разработчика ( Сервис > Средства разработчика ), которое проще вызвать при нажатии на клавишу F12 . В этом инструменте доступно два пункта меню связанных с режимами: Режим браузера (рис. 1.7) и Режим документов.

Рис. 1.7. Режимы браузера

Выбор режима браузера определяет следующее:

строка User-Agent, которую браузер отправляет на сервер, в Microsoft называется «агент пользователя»;
версия для условных комментариев, которую в Microsoft называют «вектор версии»;
режим документа.

В вашем случае строка User-Agent может отличаться от приведенных в таблице, поскольку она зависит от версии Windows и её параметров.

Вектор версии позволяет с помощью условных комментариев определять версию IE и отдавать для неё отдельный код. Условные комментарии активно применяются в вёрстке для устранения различий в макете между IE и другими браузерами. Подробнее о них пойдёт речь позже, пока же вы можете ознакомиться с небольшим примером, который показывает текст только в IE8. Остальные браузеры игнорируют этот фрагмент, считая его комментарием.

Режим документа меняется с помощью меню в Средствах разработчика (рис. 1.8).

Рис. 1.8. Режимы документа

Начиная с версии IE6, имеются следующие режимы (табл. 1.2).

Табл. 1.2. Режимы документа IE

Режим	Описание
IE5 (режим совместимости)	Несмотря на то, что браузером IE5 уже никто не пользуется, этот режим применяется во всех старших версиях IE при переключении в режим совместимости. Достаточно не указать доктайп и вы, словно на машине времени, вернётесь в прошлый век к отображению в этом браузере.
IE6	Этот режим работает только в версии 6.0.
IE7	Стандартный режим браузера IE7 и режим при переключении на него в IE8 и IE9.
IE8	Стандартный режим браузера IE8 и режим при переключении на него в IE9.
IE9	Этот режим работает только в версии 9.0.

Версия может принимать следующие значения (табл. 1.3).

Табл. 1.3. Режимы документа IE

Значение	Описание
5	Вынужденное переключение в режим IE5, доктайп при этом игнорируется.
7	Вынужденное переключение в режим IE7, доктайп при этом игнорируется.
8	Вынужденное переключение в режим IE8, доктайп при этом игнорируется.
9	Вынужденное переключение в режим IE9, доктайп при этом игнорируется.
EmulateIE7	При наличии доктайпа переключается в режим IE7, в противном случае в режим совместимости.
EmulateIE8	При наличии доктайпа переключается в режим IE8, в противном случае в режим совместимости.
EmulateIE9	При наличии доктайпа переключается в режим IE9, в противном случае в режим совместимости.
Edge	Устанавливает документ в наиболее новый доступный режим. Для версии 8.0 это режим IE8, для версии 9.0 это режим IE9.

К примеру, на сайте Яндекса применяется следующий код для эмуляции режима IE7.

При добавлении данного кода в документ кнопка режима совместимости (рис. 1.6) в браузере исчезает.

В этой статье я расскажу, как можно проверить, поддерживает ли браузер то или иное CSS свойство.

CSS проверка на поддержку

Долгое время проверить поддержку с помощью одного CSS было невозможно. Но в 2013 году Firefox, Chrome и Opera «объявили» о поддержки специальной директивы под названием @supports и её JavaScript аналога — функции CSS.supports() , про которую я буду писать ниже. С помощью этой директивы, можно проверить браузер на поддержку указанного CSS свойства.

Общий вид директивы

Пример использования

Если браузер поддерживает свойство display: flex , то он запустит свойства из директивы.

Ключевое слово not

С помощью ключевого слова not, можно осуществить проверку на отсутствие поддержки какого-либо свойства.

Если браузер не поддерживает display: flex , то он запустит свойства из директивы

Ключевое слово or

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

Если браузер поддерживает display: flex или display: -webkit-flex , то он запустит свойства из директивы

Ключевое слово and

Если указать ключевое слово and, то можно проверить поддержку браузером двух или более свойств сразу.

Если браузер поддерживает display: flex и display: -webkit-flex , то он запустит свойства из директивы

Множественные проверки и условия

Если браузер поддерживает display: flex или display: -webkit-flex , и flex-wrap: wrap , то он запустит свойства из директивы

Примечание: директива @supports достаточно новая и IE её не поддерживает.

JavaScript проверка на поддержку

Есть четыре варианта на поддержку браузером CSS свойства с помощью JavaScript, про которые я знаю.

Технология работы функции почти не отличается от работы директивы. Отличие состоит в том, что функция CSS.supports() возвращает true , если свойство поддерживается, и false — если нет.

Есть два варианта использования функции. Первый включает передачу двух аргументов — свойства и его значения:

Если браузер поддерживает display: flex , то скрипт вернёт true .

Второй вариант требует передачи в качестве аргумента целой строки:

Если браузер поддерживает display: flex или display: -webkit-flex , и flex-wrap: wrap , то скрипт вернёт true .

Примечание: так же, как и директива @supports , эта функция новая и IE её не поддерживает.

Когда-то я заметил, что браузер не может установить свойству элемента значение, которое не поддерживает. Таким образом, если, после применения нового значения свойству через JavaScript, оно не изменилось, то браузер не поддерживает данное значение.

В итоге у нас выходит следующая функция:

Или же можно обойтись без try. catch , если будем записывать свойства через cssText :

Проверка с помощью этой функции выглядит следующим образом:

Преимущество данной функции в том, что она будет работать во многих браузер, в том числе старых. Я протестировал функцию в браузерах IE, Edge, старом Safari, Chrome, Opera.

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

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

На этом закончу статью. Я рассказал про все варианты проверки, про которые знал. Если вы знаете ещё варианты — пишите про них в комментариях.

Из-за возможных различий в отображении браузерами одного и того же кода возникает проблема идентификации браузера и его версии, чтобы «подсунуть» ему персональный код. Браузер IE поддерживает специальную технологию определения версии под названием «условные комментарии». Синтаксис их применения следующий.

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

Во втором случае всё с точностью наоборот, это уже не комментарий, а специфический тег, как его воспринимают браузеры. Поэтому применение указанного синтаксиса приведёт к ошибке валидации кода. Зато IE при соблюдении условий позволяет выводить любой текст и теги.

В силу практичности и соблюдения валидности кода в дальнейшем будем включать только синтаксис вида  .

Условие работает аналогично языкам программирования. Если оно истинно (true), то браузер выполняет HTML-код, если условие ложно (false), то код не выполняется и пропускается. В формировании условий используются ключевые слова для идентификации версии браузера (табл. 4.1).

Табл. 4.1. Ключевые слова для определения браузера

Значение	Браузер
IE	Любая версия IE
IE 6	Internet Explorer 6.0
IE 7	Internet Explorer 7.0
IE 8	Internet Explorer 8.0
IE 9	Internet Explorer 9.0

Условные комментарии для изменения стиля для браузера IE7 показаны в примере 4.1.

Пример 4.1. Стиль для IE7

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Для расширения возможностей условных комментариев используются логические операторы (табл. 4.2).

Табл. 4.2. Операторы, применяемые в условных комментариях

Оператор	Описание	Пример	Комментарий
()	Группирование дополнительных условий. Используется для создания сложных запросов с логическими операторами.	[if !(IE 6) & (lt IE 9)]	Все версии, кроме IE6 и IE9.
!	Логическое НЕ. Условие истинно, если условие следующее за ! не выполняется.	[if !(IE 7)]	Все версии, кроме IE7.
&	Логическое И. Предназначено для объединения нескольких условий. Возвращает true, если все условия выполняются.	[if (gte IE 6) & (lt IE 8)]	IE6, IE7.
\|	Логическое ИЛИ. Возвращает true, если хотя бы одно из условий выполняется.	[if (IE 6) \| (IE 7)]	IE6 или IE7.
lt	Оператор «Меньше». Условие истинно, если версия младше указанной.	[if lt IE 9]	Все версии младше IE9.
lte	Оператор «Меньше или равно». Условие истинно, если версия младше указанной или совпадает с ней.	[if lte IE 8]	Все версии младше IE9.
gt	«Больше». Условие истинно, если версия старше указанной.	[if gt IE 7]	Все версии старше IE7.
gte	«Больше или равно». Условие истинно, если версия старше указанной или совпадает с ней.	[if gte IE 7]	IE7, IE8, IE9

Начиная с IE8 номер версии, отправляемый браузером можно изменять через Средства разработчика. Если режим браузера (рис. 4.9) установить на IE7, то условный комментарий [if gt IE 7] выполняться не будет, хотя мы просматриваем сайт в IE9. Потому что отправляется номер версии 7.

Рис. 4.9. Режим браузера

В примере 4.2 для создания полупрозрачного фона применяется формат RGBA из CSS3. Его поддерживают все современные браузеры, включая IE9. Для IE7–8 можно установить специальное свойство filter , которое работает только в этом браузере, а для IE6 задать обычный цвет фона через свойство background .

Пример 4.2. Стиль для разных версий IE

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Результат примера в браузере IE9 показан на рис. 4.10.

Рис. 4.10. Полупрозрачность в браузере IE

Табл. 4.3. Значения прозрачности

%	10	20	30	40	50	60	70	80	90	100
Шестнадцатеричное	19	33	4D	66	80	99	B3	CC	E6	FF

Логическое НЕ можно использовать для создания стиля, который будет доступен во всех браузерах кроме IE. Условные комментарии игнорируются этими браузерами, они воспринимают их как обычные комментарии HTML. Поэтому необходимо изменить код следующим образом.

В первой и третьей строке добавляется --> , браузеры воспринимают эти строки как комментарий и игнорируют. Internet Explorer в свою очередь считает их условными комментариями и обрабатывает согласно своей логике.

Условные комментарии это главное средство для исправления ошибок Internet Explorer. Простой и понятный синтаксис делает ненужными всяческие хаки, заменяя их стандартной конструкцией. Стили для IE правильнее выделить в отдельный CSS-файл, который будет загружаться только при необходимости.

Здравствуйте. Мне надо чтобы для всех браузеров стили читались из style.css а для internet explorer 7,8,9 из ie.css Подключил в header.php стили для старых версий IE так:

В итоге если пишу какой нибудь стиль к примеру .style1 только в style.css то этот стиль считывает и браузер IE =( а если написать в ie.css .style1 то всё равно браузер ie считывает style.css а не ie.css
Но если в ie.css написать .style1

Почему так? Или может можно запретить браузерам IE читать style.css ?

Для IE 9 и ниже:

Для IE 10-11 и Edge - никак и не нужно этого делать. Никто уже очень давно не верстает отдельно под IE.

Для ie 10,11 поправил неточности через media запросы
Для старых версий нужно потому что могут посещать из корпоративного сектора где старенькие пк и по
Код который вы написали не работает у меня, тот что я писал в вопросе работает, подключает отдельный файл стилей, но беда в том что подключаются два стиля, а мне надо style.css отключить для IE браузеров старых ну или хотя бы чтобы в приоритете читался другой файл стилей сначала, т.е. ie.css

Которые ниже 10, понимают < !--[if lt выше нет.
Еще через js можешь определять версию и подключать стиль, либо на бэке смотреть user agent и подрубать стили.

так и сделал для 10,11 и там всё норм.
Версию старых определяю и стиль подключается новый ie.css
беда в том что style.css не отключается и стили которые прописаны там имеют высший приоритет по сравнению с отдельными подключенными

т.е. в отдельном подключенном файле стилей нужно прописывать стили с тем же названием что и в style.css как-то стили иначе, чтобы они работали. Пробую добавлять !important к стилям и никак. Новые подключаются стили, а старые не заменяются
К примеру .style1 написан в style.css
Если написать .style1 в ie.css то в internet explorer есть изменения
Но если написать в ie.css .style1 то изменений в internet explorer нет
Или .style1 тоже ничего не меняет

Проблема решена порядком описания.
Т.е. надо просто в файле стилей для IE то что надо заменить прописывать вначале, например

Читайте также: