Различия между IE6, IE7 и IE8. Часть первая

(От перев. Данная статья не претендует на полноту и непротиворечивость, потому мы не будем строить на ее основании никаких теорий. Это всего лишь практическое пособие для разработчиков, немного исправленное и дополненное мной под реалии Рунета.)

Одним из самых странных статистических фактов, связанных с использованием браузеров, является широкая распространенность Internet Explorer версии 6, 7 и 8. На сегодняшний день все версии Internet Explorer вместе занимают примерно 65% рынка используемых в настоящее время браузеров. Среди веб-разработчиков эта цифра ниже, здесь доля пользователей IE составляет лишь 40% рынка.
(От перев. Надеюсь, эти 40% составляют лишь несчастные верстальщики, проверяющие свои сайты на предмет кроссбраузерности. Статистика по Рунету доступна, например, здесь. Заметьте, в сентябре у всех браузеров IE-семьи график без видимых причин подскочил — это вернулись за свои компьютеры офисные пользователи, самые преданные почитатели наших героев.)

Интересно, что популярность браузеров семейства 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

(От перев. За сим первую часть перевода заканчиваю. Интересна ли тебе эта тема, %username%? Стоит ли развивать ее и дополнять собственными мыслями, или лучше забыть о ней, ведь все мы верим в то, что ИЕ6 когда-нибудь исчезнет из десктопов? Буду рад советам и подсказкам.)