|
Читайте также: |
Браузер Internet Explorer не поддерживает свойства opacity вплоть до девятой версии, однако имеет свой собственный фильтр с помощью которого можно задать степень прозрачности:
filter: alpha(opacity=50)
Значение opacity для фильтра браузера Internet Explorer может варьироваться от 0 - полностью прозрачный до 100 - непрозрачный
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прозрачность в IE</title>
<style type="text/css">
.menu {
display: block;
width: 180px;
font-size: 16px;
text-decoration: none;
padding: 3px;
margin: 2px;
background-color: #00f;
color: #fff;
}
.menu:hover {
opacity: 0.5; /* Полупрозрачность блока для всех браузеров */
filter: alpha(opacity=50); /* Полупрозрачность блока отдельно для IE */
}
</style>
</head>
<body>
<p>Блоки этого меню при наведении курсора будут полупрозрачными и в IE!!</p>
<a href="#" class="menu">Главная</a>
<a href="#" class="menu">Карта сайта</a>
<a href="#" class="menu">Купить слона</a>
<a href="#" class="menu">Продать слона</a>
<a href="#" class="menu">Взять слона на прокат</a>
</body>
</html>
Смотреть пример
Префиксы.
На этом можно было бы в принципе и закончить главу про прозрачность, но я хотел бы Вам ещё поведать про так называемые вендорные префиксы.. особого отношения эти товарищи к данной главе не имеют, однако дальше по ходу обучения CSS3 они будут встречаться всё чаще и чаще и где-то о них нужно рассказать – поэтому расскажу здесь.
Итак, вендорные префиксы это особые приставки к свойствам CSS используемые браузерами для экспериментальных свойств которые официально не входят в спецификацию CSS.
Мы с Вами помним, что спецификация CSS 3 пока что находится в стадии разработки и формально свойств описанных в этом учебнике не существует в природе, однако браузеры на свой страх и риск уже их активно используют.
Почему на свой страх и риск? Да потому что есть вероятность, что когда будет официально утверждена спецификация CSS 3 описанные в ней свойства по своему действию будут отличатся от свойств с таким же именем которые уже используются браузерами. Ну вот взбрендит допустим разработчикам спецификации CSS 3 обозначить свойство opacity не как степень прозрачности блока, а например как его штриховку или мерцание (бред конечно пишу), что тогда будут отображать уже миллионы установленных браузеров для которых opacity это именно прозрачность!?
Или допустим, разработчики браузера придумали своё собственное свойство – нововведение, которого вообще нигде и ни у кого нет, но документ с таким свойством не проходит проверку на валидность потому что такого свойства в спецификации нет.
По этим и другим причинам браузеры используют префиксы вначале свойств, которые не входят в официальную спецификацию. У каждого браузера свой префикс начинающийся со знака «-» данный знак вначале свойства, как впрочем и этот знак «_», согласно спецификации CSS 2.1 обозначает что свойство зарезервировано для CSS расширений тех или иных браузеров.
Вот наиболее популярные браузеры и их префиксы:
| Браузер | Префикс |
| Opera | -o- |
| Firefox, SeaMonkey, Camino | -moz- |
| Internet Explorer 8 и выше | -ms- |
| Safari до версии 3, Konqueror | -khtml- |
| Safari 3 и выше, Google Chrome | -webkit- |
Использовать префиксы очень легко достаточно взять какое либо свойство CSS и подставить к нему нужный префикс, например к свойству opacity подставляем -moz- получается: -moz-opacity
Хотя на самом деле моё выражение «использовать префиксы» неверно! на самом деле ничего никуда не подставляется, просто есть свойство opacity, а есть -moz-opacity и это два разных свойства которые необязательно должны выполнять одну и ту же функцию!! - это следует понимать..
А ещё следует понимать, что те или иные конкретные браузеры до определённых версий могут поддерживать CSS свойства только со своими префиксами (опять неправильно выражаюсь, правильно говорить свои собственные свойства - браузерные CSS расширения), а могут изначально полагаться на пусть даже разрабатываемые спецификации. – Каждый конкретный случай в этом учебнике мы будем рассматривать отдельно.
Что же касается этой главы про прозрачность, то следует отметить, что браузер Firefox 3.5 и его более ранние версии используют своё собственное свойство -moz-opacity, а браузер Safari до версии 1.1 использует своё свойство -khtml-opacity.
Так для того чтобы сделать наш пример полностью кроссбраузерным нам понадобится добавить в код ещё пару строк:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Префиксы и прозрачность</title>
<style type="text/css">
.opacity {
filter: alpha(opacity=50); /* Полупрозрачность для IE */
-moz-opacity: 0.5; /* Полупрозрачность для старых версий Firefox */
-khtml-opacity: 0.5; /* Полупрозрачность для старых версий Safari */
opacity: 0.5; /* Полупрозрачность для всех браузеров */
}
</style>
</head>
<body>
<img src="graphics/mammoth.gif" class="opacity" alt="Полупрозрачный рисунок">
</body>
</html>
Дата добавления: 2015-11-30; просмотров: 29 | Нарушение авторских прав