Если вы занимаетесь разработкой веб-сайтов и приложений, то наверняка знаете, что процент пользователей IE6 уже очень мал. Например, если судить по статистике нашего веб-сайта, то всего 0.5% наших посетителей используют IE6 (статистика за последние 30 дней). Вероятно, ваша статистика показывает приблизительно такие же данные.
По этой причине, веб-дизайнерам и разработчикам теперь осталось уделять время лишь хакам для 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.
Вопросы?
Данное руководство не претендует на звание лучшего пособия по данному предмету. Это скорее подсказка для новичков.