Прозрачность в веб или как сделать прозрачный блок в CSS, валидным?

Web-разработчики, которые делают сайты не только для себя, но и для других, наверное, сталкивались с требованиями заказчика сделать прозрачным какие-то блоки, но одним из основных требований также значится валидный HTML- и CSS- код.

В наше век браузерных войн и “затянутых” стандартов бывает парой очень непросто верстать сайт полностью валидно, но как оказывается, это делать можно. И прозрачность, эта возможность, стороной не обходит.

Как сделать прозрачный блок с помощью CSS?

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

Для того, чтобы указать кроссбраузерную прозрачность определенных блоков, интернет рекомендует добавить в CSS-файл несколько параметров. К примеру, если нам требуется добавить определенной картинке прозрачность, то сделать это можно с помощью этих строк:

img.primer {
	filter: alpha(Opacity=0.5);
	opacity: 0.5;
	}

Первый параметр отвечает за то, чтобы Internet Explorer 6 видел прозрачность, а вторая строчка отвечает за то, чтобы все остальные браузеры видели прозрачность.

Но если прогнать этот код через CSS-валидатор, то можно увидеть много интересного.

Прозрачность CSS и валидность кода

CSS-валидатор укажет на ошибки, а именно:

Ошибка разбора Opacity=1)

или
Свойство filter не существует: alpha('Opacity=1')

Можно много разговаривать о том, что проверять на валидность нужно только HTML-код, а CSS проверять на соответствие стандартам необязательно. Это, возможно, и так, но не решает сути проблемы. Ошибки как были, так и остаются. Некоторые заказчики с таким положением вещей не согласятся.

А проблема, как уже стало понятно выше, возникает из-за использования параметра filter, которого нет в стандарте CSS3.

Лично я использую простое решение, которое позволяет сделать валидным прозрачность – отказаться от поддержки IE6, при реализации разных красивостей, и просто не использую те CSS-параметры, которые понимает только IE6.

То есть я придерживаюсь того, что необходимо верстать сайт для всех браузеров без исключения, но при использовании прозрачности в тех местах, где это невозможно сделать какими-то другими способами, в IE6 ее не реализовывать. Мне кажется, что это небольшая плата за абсолютно валидную верстку. Получается, что я полностью выкидываю из кода строчку filter: alpha(Opacity=0.5);.

P.S. Есть еще вариант подгружать дополнительные стили для IE6 с помощью JS, но необходимости в этом у меня пока не было.

P.S.S. Недавно, одному моему знакомому понадобилось записать диск для караоке и он обратился ко мне. Оказывается есть такая программа – Power CD+G Burner 1.7.17, которая с легкостью записывает такие диски. Она хоть и платная, но триальная ее версия позволила сделать то что требовалось.

Комментарии:

  1. Ali опубликовал комментарий 28 Сентябрь 2013, 21:23 #

    отличная статья! спасибо!

    | Ответить
  2. semen74 опубликовал комментарий 30 Март 2014, 21:32 #

    То,что доктор прописал. Убрал у себя фильтр “opacity” и валидатор перестал “ворчать”.
    Очень помог. Спасибо!

    | Ответить
  3. Эльвира опубликовал комментарий 28 Октябрь 2014, 22:08 #

    Спасибо, очень помог!

    | Ответить
Имя
e-mail
Сайт
Текст комментария: