Форум
Новости
От автора
Свойство CSS 3 opacity позволяет делать прозрачным тот или иной элемент сайта.
Степень прозрачности элемента определяется значением от 0 до 1 где 0 – полностью прозрачный а 1 – непрозрачный вовсе.. Так например значение 0.5 свойства opacity применённого к картинке будет значить что данное изображение должно быть полупрозрачным.
Пример:
Браузер Internet Explorer не поддерживает свойства opacity вплоть до девятой версии, однако имеет свой собственный фильтр с помощью которого можно задать степень прозрачности:
Значение opacity для фильтра браузера Internet Explorer может варьироваться от 0 - полностью прозрачный до 100 - непрозрачный
Пример:
На этом можно было бы в принципе и закончить главу про прозрачность, но я хотел бы Вам ещё поведать про так называемые вендорные префиксы.. особого отношения эти товарищи к данной главе не имеют, однако дальше по ходу обучения 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.
Так для того чтобы сделать наш пример полностью кроссбраузерным нам понадобится добавить в код ещё пару строк:
Как видите префиксы значительно растягивают код и их использование не всегда оправданно, если версии браузеров, желающих работать с теми или иными свойствами только с использованием своих префиксов, достаточно старые, как в случае со свойством opacity, то можно их и не указывать.. – хотя конечно это вредный совет..
..ну а теперь полезные советы..
Всегда используйте префиксы (ну если конечно тот или иной браузер не может обойтись без них) в тех случаях, когда используемое свойство может сильно повлиять на работоспособность, читабельность и юзабилити сайта. Одно дело когда не будут работать какие либо мелочи в дизайне сайта и совсем другое когда, например не работает меню сайта или на сайте невозможно прочитать текст из-за того что браузер не поддерживает какое-то свойство а вместо него использует аналогичное своё собственное.
