—»     —»   Как можно определить IE7 или IE8, используя CSS-хаки?
  Раздел: Браузеры, Подсказки, Tips and Tricks, CSS/Style Sheets   Комментариев: 1  

Как можно определить IE7 или IE8, используя CSS-хаки?

Похоже, что уже почти весь мир отказался от IE6. Ну, может какие-то 5% пользователей еще используют его, но ведь не веб-разработчики виноваты в том, что они используют устаревшее ПО.

Если вы занимаетесь разработкой веб-сайтов и приложений, то наверняка знаете, что процент пользователей IE6 уже очень мал. Например, если судить по статистике нашего веб-сайта, то всего 0.5% наших посетителей используют IE6 (статистика за последние 30 дней). Вероятно, ваша статистика показывает приблизительно такие же данные.

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

Как можно определить IE7 или IE8, используя CSS-хаки?

Тем не менее, многим начинающим разработчикам зачастую требуется определять IE7 или IE8. Давайте ознакомимся с наилучшими способами решения данной задачи.

Условные классы от Пола Айриша

Лучший метод заключается в указании условных классов, и он был разработан Полом Айришом. Делаем следующим образом:

<!--[if IE 7]>     <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

Данный код использует комментарии условных классов для определения конкретных версий IE, а HTML-элемент получает отдельное имя класса для каждой версии IE, и не получает класса вообще, если браузер пользователя не IE.

Далее в вашем коде CSS нужно указывать IE7-8 следующим образом:

.element {
margin-bottom: 20px;
}

.ie7 .element {
margin-bottom: 10px;
}

.ie8 .element {
margin-bottom: 15px;
}

В каждом браузере будет нижнее поле в 20 пикселей, но в браузерах IE7 и 8 она будет составлять 10 и 15 пикселей соответственно.

Здесь важно отметить то, что определение IE временами очень важно, но я бы рекомендовал вам максимально постараться найти лучшее решение по обходу несоответствия между браузерами. Старайтесь избегать использования условных классов и последующих хаков, о которых дальше пойдет речь. Порой легче и правильнее будет просто по-другому структурировать код CSS.

CSS-хаки

Теперь давайте рассмотрим способы определения IE7-8 посредством хаков. Сперва мы научимся определять только IE7. Здесь, вероятно, существует более 2-х методов, но мы расскажем вам лишь о 2 (больше которых вам ничего и не понадобится):

* + html .element {
margin-bottom: 10px;
}

Хак – это часть селектора, которая расположена перед .element. Ни один другой браузер не распознает данный селектор, так что 10-пиксельное поле будет существовать только в браузере IE7.

И еще один менее понятный способ:

*:first-child+html .element {
margin-bottom: 10px;
}

Далее можно определить IE7 следующим образом:

.element {
margin-bottom: 20px;
*margin-bottom: 10px;
}

«Хак» представляет собой звездочку (*) в начале строки кода CSS, который мы хотим применить к браузеру IE7. Единственная проблема заключается в том, что это также распространяется и на 6 версию браузера. Так что, вам следует использовать данный метод только если вы уверены в важности применения данного кода в обеих версиях браузера. Либо, если вас совсем не волнует то, как это будет отображено в IE6.

По моим личным наблюдениям, данный метод не подходит для того, чтобы определять только IE8 (и при этом не охватывать IE6-7, 9 и так далее). Остается лишь использовать условный комментарий.

Тем не менее, если вы отказались от поддержки IE7, то вы можете использовать следующий вариант:

.element {
margin-bottom: 20px;
margin-bottom: 10px9;
}

«Хак» заключается в указании «\9» в конце значения, перед заключительной точкой с запятой. Это позволит вам определить IE8 и ниже, так что вы можете использовать данный хак для определения только 8 версии браузера, если вы уже отказались от поддержки 7 и 6 версий.

Условные комментарии

Наконец, мы можете разделить ваш CSS-код для IE7 и для IE8 в отдельные файлы. Это можно сделать, воспользовавшись условными комментариями:

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->

Но лично я не рекомендую вам использовать данный метод. Здесь есть 2 основные проблемы: первая – это разделяет ваш CSS-файл на 3 отдельных файла, что приводит к сложности синхронизации. А вторая – вы создаете дополнительные запросы HTTP в двух самых медленных браузерах, что значительно растягивает процесс загрузки вашего веб-сайта.

Лично я советую вам использовать либо условные классы, либо простые хаки для определения IE7-8.

Вопросы?

Данное руководство не претендует на звание лучшего пособия по данному предмету. Это скорее подсказка для новичков.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Internet Explorer, CSS
Опубликовал Design FactoRy   Прочитано (раз): 24130   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 января 2012 @ 18:26
Написал: temarulezzz — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
отлично! теперь буду знать) хотя немного сложновато)
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031