Прозорість у веб або як зробити прозорий блок у CSS, валідним

прозорість

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

У наш час браузерних воєн і "затягнутих" стандартів буває парою дуже непросто верстати сайт повністю валідно, але як виявляється, це робити можна. І прозорість, ця можливість, стороною не оминає.

Як зробити прозорий блок за допомогою CSS?

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

Щоб вказати кроссбраузерную прозорість певних блоків, інтернет рекомендує додати до CSS-файл кілька параметрів. Наприклад, якщо нам потрібно додати певній картинці прозорість, зробити це можна за допомогою цих рядків:

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

Але якщо прогнати цей код через CSS-валідатор, можна побачити багато цікавого.

Прозорість CSS та валідність коду

CSS -валідатор вкаже на помилки, а саме:

Можна багато говорити про те, що перевіряти на валідність потрібно лише HTML-код, а CSS перевіряти на відповідність стандартам необов'язково. Це можливо і так, але не вирішує суті проблеми. Помилки як були, і залишаються. Деякі замовники з таким станом речей не погодяться.

А проблема, як стало зрозуміло вище, виникає через використання параметраfilter, якого немає у стандарті CSS3.

Особисто я використовую просте рішення, яке дозволяє зробити валідним прозорість - відмовитися від підтримки IE6, при реалізації різних красивостей і просто не використовую ті CSS-параметри, які розуміє тільки IE6.

Тобто я дотримуюся того, що необхідно верстати сайт для всіх браузерів без винятку, але при використанні прозорості в тих місцях, де це неможливо зробити якимось іншим способом, в IE6 її не реалізовувати. Мені здається, що це невелика плата за абсолютно валідну верстку. Виходить, що повністю викидаю з коду рядокfilter: alpha(Opacity=0.5);.