CSS3 в Internet Explorer

Сердце любого веб разработчика невольно вздрагивает при слове IE (при чем зачастую не важно какой версии). К сожалению самый распространенный браузер является самым отсталым в плане современных веб технологий. В данной статье хотел бы рассмотреть некоторые приемы, которые позволят использовать CSS3 для IE.

Прозрачность

Сложно сказать почему IE до сих пор не поддерживает данную очень полезную возможность. Поэтому вместо свойства opacity будем применять фильтры Internet Explorer через свойство filter.

#element {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* только для IE8 */
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* для IE6, IE7, и IE8 */
   opacity: .4; /* для всех нормальных браузеров */
}

Стоит отметить, что свойство filter — это приблудие Microsoft и такой CSS, к сожалению, не пройдет валидацию. Также у IE отличаются правила задания прозрачности от общепринятых. Свойство фильтра opacity у Internet Explorer может иметь значение от 0 до 100, например значение 40 будет соответствовать 0.4 для остальных браузеров.

Закругленные углы

Бесспорно, одно из самых ожидаемых нововведений в CSS3. В интернете есть множество решений на JavaScript, я приведу проверенный метод. Некто Remiz Rahnas сделал HTC файл который называется CSS Curved Corner можно скачать на гуглокоде. Ближе к делу:

.box-radius {
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

Все достаточно просто и красиво, важно чтобы загрузился border-radius.htc. Некоторые моменты: CSS опять же таки не валиден, в HTС файле около 150 строк, должен загрузится быстро.

Тень для блока

CSS3 наделили очень удобным свойством как box-shadow, которое позволяет создавать тени для блоков. Решением для Internet Explorer снова является использование фильтров:

.shadow {
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
    -moz-box-shadow: 2px 2px 3px #969696; /* для firefox */
    -webkit-box-shadow: 2px 2px 3px #969696; /* для webkit */
}

Работать будет во всех версиях Internet Explorer, а также в Firefox, Safari и Chrome. И снова CSS не пройдет валидацию из-за свойства filter.

Продолжение следует