Привет всем! Наверное, многие уже догадались, что сегодня речь пойдет о таких свойствах CSS3, как border-radius и box-shadow, которые помогают округлять углы блоков и создавать тень от них соответственно.

Нормальные и современные браузеры понимают эти свойства без особого труда и в их описании нет проблем. Хотя не понимаю, почему Firefox, Google Chrome и Safari до сих пор не понимают стандартного свойства border-radius, а понимают только это свойство с приставкой -moz- и -webkit- соответственно. Хорошо, что в новых версиях этих браузеров этот изъян убран.

Но самые интересные проблемы начинаются с Internet Explorer. Честно говоря, не знаю как IE 9 к CSS3 относится, но до этой версии IE вообще не понимает его и просто игнорирует. Я думал, что такое поведение не излечимо, но в поисках "счастья" наткнулся на несколько решений данных проблем.

FIX для свойства border-radius в Internet Explorer

Для этого свойства я нашел один всего один фикс, но он оказался рабочим и мне его удалось прикрутить. Разработчиком этого фикса является Remiz Rahnas.

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

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
behavior: url(border-radius.htc);

Уточню немного. Для работы округления (и, забегая вперед, для работы тени) в IE вы не обязаны указывать border-radius (box-shadow, соответственно) для всех браузеров (то есть, не обязательно вставлять свойства -moz-border-radius, -webkit-border-radius и так далее), а достаточно лишь одного из них.

FIX для свойства box-shadow в Internet Explorer

Для данного свойства я нашел два решения. Первое - опять же, фикс от Remiz Rahnas в виде файла ie-css3.htc. Так же скачивается файл, заливается на хостинг и прописывается стиль:

box-shadow: 0 0 15px black;
-moz-box-shadow: 0 0 15px black;
-webkit-box-shadow: 0 0 15px black;
-khtml-box-shadow: 0 0 15px black;
behavior: url(ie-css3.htc);

К сожалению, почему-то у меня осилить и запустить этот фикс не удалось. Хотя в примере он прекрасно работает. Может кто потом сможет сказать в чём моя ошибка была.

Второй способ немного мудреный и со многими нюансами. Но его мне удалось запустить. Суть в следующем. Добавляем в стили такой набор:

.shadow {
	display: none;
}
<!--[if IE]-->
.shadow {
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 102px;   /* своя ширина */
	height: 102px;   /* своя высота */
	z-index: 1;
	background: black;
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');
}
<![endif]-->

Затем в блок, где нужна тень, добавляем такой вот элемент:

<span class="shadow"></span>

И мы имеем тень в IE. При этом расскажу о нескольких нюансах:

1. Блок, в который помещается элемент с тенью, обязательно должен иметь свойство position: relative;.
2. Под каждый блок необходимо подбирать свою высоту и ширину.
3. Тень не будет изменять форму при изменении формы блока (округлость углов, ширина, высота и так далее).
4. И это ещё не всё, но дальше описывать не буду...

Не думаю, что этот способ вообще применим для большинства случаев, но как альтернативу для статичных блоков её можно использовать.

Будем надеяться, что Internet Explorer в скором времени решит проблемы с данными свойствами и CSS3 в общем, а интернет-пользователи наконец осознают, что им пора обновить браузеры или сменить на другие.

Поздравляю всех с наступающим Новым Годом!

UPDATE! Универсальное решение!

Посчастливилось найти универсальное решение для основных свойств и возможностей CSS3, позволяющих включить их не только в Internet Explorer, но и в других более менее рабочих браузерах, которые существуют, но используются редко. Точнее мне его подсказал человек под ником LeoK.

Универсальное решение предлагает проект CSS3 PIE. Они предлагают подобный файлик, как и в моих случаях. но объединяющий в себе не пару свойств, а целую пачку. На их сайте можно убедиться в работоспособности скрипта, зайдя на сайт через браузер Internet Explorer. Там же можно и скачать скрипт.

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

Для защиты вашего дома и участка от непрошеных гостей понадобятся металлические ворота, которые могут открываться одним нажатием кнопки.