Содержание
До сих пор в просторах интернета широко распространен Internet Explorer 6, 7 и 8 версий.
Причем, популярность браузеров семейства IE примерно одинакова, нельзя выделить один доменирующий браузер, как это было ранее. Таким образом, до сих пор веб-разработчики обязаны проверять работоспособность создаваемого сайта в различных браузерах.
Конечно, благодаря различным JavaScript-библиотекам, кроссбраузерное тестирование сейчас стало настолько хорошим, насколько данная ситуация вообще позволяет это сделать. Также есть возможность сделать скриншоты в разных браузерах, IE Collection и тому подобное. Необходимостью кроссбраузерного тестирования является результат рендеринга трех использующихся версий IE.
Чтобы успешно заниматься версткой сайтов, веб-разработчики должны понять различия в обработке CSS между IE6, IE7 и IE8. Здесь собраны краткие описания для свойств, поддерживаемых одним или двумя браузерами, но не всеми тремя сразу. Здесь не рассматриваются свойства, не выполняемые ни одним из IE, а также специфичные только им. Таким образом, акцент стоит именно на различиях между браузерами майкрософтовского семейства, а не на недостатке поддержки ими тех или иных CSS-свойств.
Селекторы и наследование
Дочерние селекторы
Пример:
body>p {color: #fff;}
Описание:
Дочерний селектор выбирает все элементы, которые являются непосредственно дочерними для указанного родителя. В указанном выше примере body является родителем, а p — дочерним. (От перев. Для IE7+ нужно также указывать верный Doctype для правильной работы.)
Поддержка: IE7, IE8
Ошибки: В IE7 дочерний селектор не будет работать, если между ним и родительским элементом будет HTML-комментарий.
Связные классы
Пример:.class1.class2.class3 { background: #fff; }Описание: Связные классы используются, когда один элемент имеет несколько классов, например так:<dіv class="class1 class2 class3"> <р>Какой-то текст.</р> </dіv>Поддержка: IE7, IE8 Ошибки: IE6 это свойство не поддерживает, потому что он применяет это CSS-свойство для элементов последнего класса (От перев. в примере класс class3), а не только для тех, которые отмечены сразу всеми классами.
Селекторы с атрибутами
Пример:
a[href] {
color: #0f0;
}
Описание:
Это свойство позволяет элементу быть отмеченным только в том случае, если у него присутствует указанный аттрибут. Например, в вышеприведенном примере отмечены будут все ссылки с аттрибутом href, тогда как для всех остальных данное свойство применено не будет.
Поддержка: IE7, IE8
Смежные соседние селекторы
Пример:
h1+p {
color: #f00;
}
Описание:
Этот селектор определяет свойства элементов, смежных и следующих сразу определенным селектором. Например, в коде ниже
<Н1>Заголовок</Н1>
<р>Какой-нибудь текст.</р>
<р>Какой-нибудь другой текст.</р>
свойства CSS будут применены только к первому абзацу.
Поддержка: IE7, IE8
Ошибки: В IE7 дочерний селектор не будет работать, если между ним и родительским элементом будет HTML-комментарий.Общие соседние селекторы
Пример:
h1~p {
color: #f00;
}
Описание:
Определяет свойства для всех соседних элементов, следующих за определенным селектором. Например, если воспользоваться вышеуказанным примером, то данное свойство распространится и на первый, и на второй абзацы. Заметим, что если бы абзац шел перед заголовком, то данное свойство на него не распространялось бы.
Поддержка: IE7, IE8
Псевдоклассы и псевдоэлементы
Дочерние селекторы после псевдокласса :hover
Пример:
a:hover span {
color: #0f0;
}
Описание:
Элемент может быть отмечен как дочерний аналогично любому другому селектору. В приведенном примере элемент span внутри ссылки будет менять цвет текста на зеленый.
Поддержка: IE7, IE8
Связные псевдоклассы :hover
Пример:
a:first-child:hover {
color: #0f0;
}
Описание:
Псевдокласс может быть связан с соседним элементом. В примере выше, отмечается каждая ссылка, являющаяся первым дочерним элементом своего родителя и применяющая пседокласс :hover к нему.
Поддержка: IE7, IE8
Связные псевдоклассы :hover
Пример:
a:first-child:hover {
color: #0f0;
}
Описание:
Псевдокласс может быть связан с соседним элементом. В примере выше, отмечается каждая ссылка, являющаяся первым дочерним элементом своего родителя и применяющая пседокласс :hover к нему. (От перев. Не понял, прошу поправить, если неверно.)
Поддержка: IE7, IE8
Псевдокласс :hover для других селекторов
Пример:
div:hover {
color: #f00;
}
Описание:
Псевдокласс :hover можно применять для любых селекторов, а не только для a.
Поддержка: IE7, IE8
Псевдокласс :first-child
Пример:
div li:first-child {
background: blue;
}
Описание:
Определяет свойства для первичных дочерних селекторов выбранного класса.
Поддержка: IE7, IE8
Ошибки: В IE7 селектор не будет работать, если между родительским и дочерним элементами будет HTML-комментарий.
Псевдокласс :focus
Пример:
a:focus {
border: solid 1px red;
}
Описание:
Определяет свойства для элементов в фокусе.
Поддержка: IE8
Псевдоклассы :before и :after
Пример:
#box:before {
content: "Этот текст расположен перед блоком.";
}
#box:after {
content: «Этот текст расположен после блока.»;
}
Описание:
Генерирует текст, располагаемый до и после данного блока.
Поддержка: IE8
Все мы верим в то, что ИЕ6 когда-нибудь не станет.
