Css если браузер ie
В этой статье я расскажу, как можно проверить, поддерживает ли браузер то или иное 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 , то он запустит свойства из директивы
JavaScript проверка на поддержку
Есть четыре варианта на поддержку браузером CSS свойства с помощью JavaScript, про которые я знаю.
-
С помощью функции CSS.supports() , про которую я упоминал выше.
Технология работы функции почти не отличается от работы директивы. Отличие состоит в том, что функция CSS.supports() возвращает true , если свойство поддерживается, и false — если нет.
Есть два варианта использования функции. Первый включает передачу двух аргументов — свойства и его значения:
Если браузер поддерживает display: flex , то скрипт вернёт true .
Второй вариант требует передачи в качестве аргумента целой строки:
Если браузер поддерживает display: flex или display: -webkit-flex , и flex-wrap: wrap , то скрипт вернёт true .
Когда-то я заметил, что браузер не может установить свойству элемента значение, которое не поддерживает. Таким образом, если, после применения нового значения свойству через JavaScript, оно не изменилось, то браузер не поддерживает данное значение.
В итоге у нас выходит следующая функция:
Или же можно обойтись без try. catch , если будем записывать свойства через cssText :
Проверка с помощью этой функции выглядит следующим образом:
Преимущество данной функции в том, что она будет работать во многих браузер, в том числе старых. Я протестировал функцию в браузерах IE, Edge, старом Safari, Chrome, Opera.
Примечание: если вы проверяете поддержку свойства в старом браузере, через эмулятор современного, то данный метод будем показывать true на значениях, которые не поддерживаются.
Это происходит из за того, что хоть вы и эмулируете старую версию, но браузер, через который вы это делаете, знает это значение CSS свойства и может применить.
На этом закончу статью. Я рассказал про все варианты проверки, про которые знал. Если вы знаете ещё варианты — пишите про них в комментариях.
На сегодняшний день браузер IE является главной проблемой при вёрстке веб-страниц. Это связано с плохой поддержкой спецификации CSS, наличия большого количества ошибок и присутствием у пользователей разных версий IE, включая морально устаревшие IE6 и IE7. Подобного разброса нет у других браузеров, что вероятнее всего связано с политикой Microsoft. Браузер IE поставляется вместе с Windows и неразрывно с ней объединён, соответственно за обновление браузера отвечает система Windows Update, которая у многих пользователей часто бывает отключена. Это связано с нежеланием расходовать трафик, из-за безопасности или по другим причинам. В других браузерах вроде Firefox, Opera и Chrome обновление версий происходит непосредственно через браузер, поэтому их пользователи в курсе выхода новой версии.
Рис. 4.1. Статистика Рунета по браузерам за январь (строки с IE выделены мной)
Браузер IE9 в статистике за январь не представлен, поэтому наиболее популярная версия IE это 8.0. От неё практически в два раза отстаёт IE7, и на уровне 4–5% держится IE6. Если посмотреть график относительных значений (рис. 4.2), заметно что доля IE7 падает за счёт роста IE8, а начиная с февраля снижается и доля IE8 за счёт роста IE9. Браузер IE6 из-за малых значений на графике не представлен, но если посмотреть долю по месяцам, то падение количества посетителей с IE6 хорошо заметно. Так, в январе 2010 года доля IE6 была 9,6%, а через год составила менее 4%. Можно сделать прогноз, что через год эту версию вообще забудут.
Рис. 4.2. Доля браузеров по месяцам
Интересно сравнить статистику за январь с августом (рис. 4.3), к этому времени появилась новые версии Firefox, Chrome и Opera, которые перетянули на себя часть пользователей. Позиции IE безнадёжно отстают по всем показателям.
Рис. 4.3. Статистика Рунета по браузерам за август (строки с IE выделены мной)
Браузер IE6 в представленной таблице вообще отсутствует, поэтому при вёрстке его можно в расчет не принимать.
Понятно, что статистику легко вести при готовом сайте, а когда его ещё нет, сложно оценить с каких браузеров на него будут заходить. Здесь можно лишь посоветовать посмотреть статистику сайтов по схожей тематике, определить портрет будущего посетителя и предсказать его предпочтения, в том числе и по браузеру.
Если статистику в расчет не принимать, то вёрстка, как правило, разбивается на два основных этапа. На первом этапе страницы делаются под браузер Firefox, а на втором этапе доделываются под IE. Firefox здесь выбран лишь в качестве примера. Современные версии браузеров Opera, Safari, Chrome также вполне корректно работают с веб-стандартами. В этом смысле придерживаться стандартов выгодно, поскольку большинство браузеров отображают страницу, свёрстанную по стандартам практически идентично и без ошибок. Остаётся только доработать код под разные версии IE, и вёрстка на этом завершена. Но на этом пути нас поджидаёт множество шипов и ловушек.
Из-за возможных различий в отображении браузерами одного и того же кода возникает проблема идентификации браузера и его версии, чтобы «подсунуть» ему персональный код. Браузер IE поддерживает специальную технологию определения версии под названием «условные комментарии». Синтаксис их применения следующий.
В первом случае синтаксис схож с обычными комментариями HTML имеющими вид . Такая мимикрия обеспечивает валидность кода, поскольку всё, что находится внутри любой браузер кроме IE считает обычным комментарием. Они не выводятся на странице и не интерпретируются как код, поэтому могут содержать любые, даже ошибочные теги и текст.
Во втором случае всё с точностью наоборот, это уже не комментарий, а специфический тег, как его воспринимают браузеры. Поэтому применение указанного синтаксиса приведёт к ошибке валидации кода. Зато IE при соблюдении условий позволяет выводить любой текст и теги.
В силу практичности и соблюдения валидности кода в дальнейшем будем включать только синтаксис вида , браузеры воспринимают эти строки как комментарий и игнорируют. Internet Explorer в свою очередь считает их условными комментариями и обрабатывает согласно своей логике.
Условные комментарии это главное средство для исправления ошибок Internet Explorer. Простой и понятный синтаксис делает ненужными всяческие хаки, заменяя их стандартной конструкцией. Стили для IE правильнее выделить в отдельный CSS-файл, который будет загружаться только при необходимости.
Для всех браузеров подключается файл style.css, а для IE версии 7.0 и ниже ещё один файл ie.css. При этом остальные браузеры этот файл будут игнорировать и не загружают.
Вокруг 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).
Режим | Описание |
---|---|
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) в браузере исчезает.
Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.
Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично.
Хак — исправление ошибки или добавление новой функции посредством использования другой недокументированной или некорректно реализованной особенности. (с) Lurkmore
Грязный хак — это быстрое решение какой-либо проблемы, в основном в краткосрочной перспективе, лишающее сущность код внутренней красоты и дисгармонирующее с её внутренним устройством. (с) Lurkmore
CSS-хаки для браузера Internet Explorer
ZOOM:1 :
Хак, предназначенный для определения hasLayout
PNG в IE6 :
Для IE6 подключается htc-файл iepngfix.htc, для правильной работы фоновых изображений формата PNG для всех элeментов, в файле cssf-ie6.css. Используется IE PNG Fix v1.0 RC4 последней версии.
Если важны байты есть пример использования фильтра для IE:
Отделение стилей от IE6 :
Отделение стилей от IE6 и IE7 :
Отделение стилей от IE6 — IE8 :
Conditional comments в IE :
Условные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой:
Conditional comments в IE6, IE7, IE8 :
Box Model хак :
В IE существуют глюки, когда border и padding включаются в ширину элемента. Box Model хак фиксит их.
Min-width и max-width в IE :
IE не понимает эти свойства css. Хак для блока выглядит так:
Простые селекторы:
Не обязательно создавать отдельный файл для разных браузеров. Можно использовать индивидуальные css-селекторы в основном css-файле:
Читайте также: