![Каскадные Таблицы Стилей / [Из песочницы] Еще один способ использования условных комментариев](/img/postlink.png "Каскадные Таблицы Стилей / [Из песочницы] Еще один способ использования условных комментариев")
Здравствуйтее, хотел поделиться еще одним вариантом валидного хака для Internet Explorer'а.
Так как выносить стили для IE отдельный файл не всегда удобно, особенно в некоторых проектах, когда стили для определенной страниц хочется видеть в одном файле.
Хочу описать два варианта решения данной проблемы:
1. Вариант с использованием JavaScript:
Мы добавляем для body класс с именем браузера определенной версии, условные комментарии помогают избавиться от проблемы с неверным распознанием User Agent'а
document.body.className='ie7';
document.body.className='ie8';
В таком случае если необходимо изменить стиль блока только для IE
съешь ещё этих мягких французских булок, да выпей чаю
в CSS указывам:
.example p{
color: green;
}
.ie8 .example p{/*Только для IE 8*/
color: yellow;
margin-top: 8px;
}
.ie7 .example p{/*Только для IE 7*/
color: red;
margin-top: 5px;
}
.ie7 .example p strong,
.ie8 .example p strong{/*Для IE 7 и IE8*/
color: #000;
}
Но данный способ подходит не во всех случаях, например, когда у пользователя отключен JavaScript.
2. Вариант без JavaScript и без вынесения стилей для IE в отдельный файл:
Такой вариант предусматривает создание обертки внутри body или вокруг самого элементу с определенным классом, которую будет видеть только IE:
съешь ещё этих мягких французских булок, да выпей чаю
Либо можно обойтись без общего класса для IE 7 и IE 8
съешь ещё этих мягких французских булок, да выпей чаю
и в CSS, классы указать через запятую:
.example p{
color: green;
}
.ie8 .example p{/*Только для ИЕ 8*/
color: yellow;
margin-top: 8px;
}
.ie7 .example p{/*Только для ИЕ 7*/
color: red;
margin-top: 5px;
}
.ie7 .example p strong,
.ie8 .example p strong{
color: #000;
}
Пример использования
P.S. Данный способ не является особенным или уникальным, но в некоторых случаях может быть полезен.
