Підхід до написання стилів для IE
Часто для Internet Explorer`а потрібно писати свої стилі і для цього переважно додають файлики ie.css, ie7.css, ie8.css, ... які запихають в умовні коментарі ось так:
<!--[if IE]> <link href="ie.css" type="text/css"/> <![endif]--> <!--[if IE8]> <link href="ie8.css" type="text/css"/> <![endif]--> <!--[if IE7]> <link href="ie7.css" type="text/css"/> <![endif]-->
Основна перевага цього методу в тому що спеціальні стилі для IE є в окремих файлах і «нормальні» браузери не бачать цих «хаків».
Але я не люблю цей спосіб і ось чому - такий код важко підтримувати. Уявімо що сайт пишуть 2 людини. Людина яка верстає вона все тримає в голові і легко порозпихає хаки для IE по різних файликах. Але коли друга людина захоче зробити якусь будь-яку зміну в стилі - вона ж не знає де які стилі переписуються, і їй доведеться пошукати в кожному файлі ie.css, ie7.css, ie8.css (а в майбутньому і ie9.css, ie10.css, ...) чи даний стиль не переписується для IE і тільки тоді робити зміну. Фактично приходиться постійно усно мерджити всі ці файли.
Тому деякий час популярними були CSS-хаки - для IE6 це було «html *», для IE7 - «*:first-child+html
» і т.д. Стилі для IE переписувалися в тому ж файлі в якому оголошувався стиль, наприклад:
.some-button {
width: 50px;
}
*:first-child+html
.some-button {
width: 48px; /* for IE7 only */
}
і це було дуже зручно - коли хтось міняє стиль width для .some-button він зразу бачить що для IE цей стиль чомусь переписаний і поміняє зразу для IE, і йому не треба лазити по різних файликах і шукати де ще може переписуватись .some-button. Достатньо просто проскролити до низу правила і подивитись чи воно там не переписується.
Але css-хаки це погано, бо зменшується швидкодія (*:first-child+html
- не надто оптимальне правило) і зменшується читабельність.
Тому є кращий спосіб - навішати на елемент <html> класи для IE - .ie, .ie7, .ie8, ..., .lt-ie8, .lt-ie8, ... («lt» означає «less than»). Наприклад для IE7 елемент html буде виглядати так:
<html class="ie ie7 lt-ie8 lt-ie9 lt-ie10">
І тоді можна переписати стилі так:
.some-button {
background-image:
url(data:image/gif;base64,R0lGODl...);
}.lt-ie8 .some-button {
background-image:
url(button-bg.gif);
}
Тут для прикладу для всіх браузерів буде вкладена картинка, а для браузерів IE7 і старіших буде зовнішня картинка, оскільки IE7 не підтримує data uri.
Ці стилі (.ie, ie7, ...) можна легко згенерувати на стороні сервера чи на стороні клієнта javascript`ом.
Основна перевага цього методу написання спеціальних стилів під IE в тому що такий код підтримувати набагато легше.