Відмінності між 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> Заголовок
<Р> Який-небудь текст.
<Р> Який-небудь інший текст.

властивості 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 коли-небудь зникне з десктопів? Буду радий порадам і підказкам.)

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*