Internet Explorer и CSS-свойство opacity

Не буду сегодня зубы вам заговаривать сказками, а сразу покажу картинку с сайта htmlbook.ru:

совместимость opacity

Хоп-хэй, на-на-нэй, вот вопрос — и вот тебе ответ: opacity (свойство прозрачности из CSS 3) поддрердивается любимцем публики Интернет Испортилом только с версии 9.0.

Windows для IE 9А обожаемый мною Яндекс на картинке справа чётко даёт понять даже дальтоникам, что IE 9 для Windows XP в природе не существует. И любителям уходящих в историю Окошек придётся всё чаще любоваться сплошной заливкой там, где подразумевалась прозрачность. Но я же Pavluha.Net, потому не всё так грустно. Глядим под cut...

Вот такой код:

<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">
<head>
<meta charset="UTF-8" />
<title>Opacity</title>
<style>
div {
	background: url('fon.jpg');
	padding: 40px;
}
div div {
	background: #000;
	font: 40px Calibri;
	white-space: pre;
	color: #fff;
	opacity: .75;
}
</style>
</head>
<body>
<div><div>
В лунном сиянии
Снег серебрится
Вдоль по дороге
Троечка мчится
Динь-динь-динь...
</div></div>
</body>
</html>

Это попытка заставить IE 8, бессмысленный и беспощадный, воспринять CSS-свойство Opacity. Попытка заведомо обречена на провал, но надо же было убедиться:

Тест 1 - opacity в IE

Чёрный блок с текстом должен был получиться на 25% прозрачным. С помощью CSS 3 это сделать в IE 8 не удалось. Но ведь для прозрачности в IE можно использовать фильтры... На что я буду закрывать уши, топать ногами и кричать: «Не хочу, не хочу!»

А теперь немного изменим код, подключив библиотеку jQuery, которая на многих сайтах и так уже используется (любит народ наш всякий там AJAX).

<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">
<head>
<meta charset="UTF-8" />
<title>Opacity</title>
<style>
div {
	background: url('fon.jpg');
	padding: 40px;
}
div div {
	background: #000;
	font: 40px Calibri;
	white-space: pre;
	color: #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>$(function() { $('div div').css({opacity: .75}) })</script>
</head>
<body>
<div><div>
В лунном сиянии
Снег серебрится
Вдоль по дороге
Троечка мчится
Динь-динь-динь...
</div></div>
</body>
</html>

Магия заключена в строках 18-19. Смотрим результат:

Тест 2 - jquery opacity в IE

Свершилось чудо! jQuery спас жизнь IE 8!

Кстати, эксперимент был проведён с именно с IE 8 и jQuery, поскольку именно так я заметил эту фишку. Буду благодарен, если вы поэкспериментируете с более ранними версиями Internet Explorer, а также JavaScript-ом без подключения библиотеки jQuery. А то я и так уже за компом приторчал.

Кстати, IE я использую не только для проверки кроссбраузерности, но также для поиска косяков в своих JS. Другие браузеры просто пропускают тот кусок кода, который им не нравится, IE же вываливает ошибку с описанием, в какой букве кода что-то пошло не так. А для постоянного использования рекомендую Chrome или Firefox.

Запись опубликована в рубрике Web-мастеринг с метками . Короткая ссылка для добавления в закладки: Internet Explorer и CSS-свойство opacity.

7 Responses

  1. zusicks438 говорит:

    Мужик! :) Вообще, jQuery на практике очень сильно выручает. Вот еще один наглядный пример.

  2. Alex говорит:

    Нафига писать код, подразумевая что люди им воспользуются и при этом отключить возможность его копирования? Попытка повысить собственную самооценку? неудачный способ)

    • Павлуха говорит:

      Всё прекрасно копируется: двойной клик по коду, Ctrl+C. Сам не поддерживаю такие методы защиты. ИМХО, лучший способ защитить текст от копирования — не публиковать его.

  3. Alex говорит:

    и вот тебе инфы немного) не работает с png в ИЕ, а в хроме норм

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Иногда ваш комментарий может не отобразиться сразу после публикации - будто пропал. Не волнуйтесь, он не пропадёт и появится потом, после моего одобрения.