Кроссбраузерная css прозрачность.

Практически все современные браузеры поддерживают CSS 3 свойство opacity, определяющее уровень прозрачности элемента. Но иногда все еще возникает необходимость поддерживать старые браузеры. Именно для них при реализации кроссбраузерной прозрачности нужны первые 3 строки :

[codesyntax lang=»css» title=»CSS»]

.op{
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
	-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
	-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
	opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+, Chrome 5+, IE 9+ */
}

[/codesyntax]

К сожалению эта конструкция не проходит валидацию.  Так что решайте сами — или валидность, или кроссбраузерность…

update 27.05.2011 gester — т.к. у всех браузеров кроме IE достаточно хорошая система автообновлений, то данная проблема в 99% случаев актуальна только для IE<9. Следовательно лучше с помощью условных комментариев для «ослика» подключать отдельную таблицу стилей:[codesyntax lang=»html4strict» title=»HTML»]

<!--[if lt IE 9]>
	<link href="ie.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->

[/codesyntax]

[codesyntax lang=»css» title=»ie.css»]

.op{
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

[/codesyntax]

Это хороший компромисс между валидностью и кроссбраузерностью.

Запись опубликована в рубрике HTML/CSS с метками , , , , , , . Добавьте в закладки постоянную ссылку.

3 комментария: Кроссбраузерная css прозрачность.

  1. думаю, это лишнее:
    -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
    -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */

    У этих браузеров хорошая система автообновлений, поэтому все пользователи сидят или на последних, или на пред-последних версиях.

    Альфу лучше отдавать в отдельном фаиле стилей для ИЕ, тогда и валидность будет )

  2. Полностью согласен. Статью обновил. Именно так я и делаю в последних проектах. Но с остальными свойствами нужно быть знакомым для общего развития ))

  3. uapress.info says:

    У Мозилы столько приложений, что альтернативы нет

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

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