Поддержка CSS3 в IE border-radius и box-shadow
«Пищит, но лезет …», именно так можно охарактеризовать ситуацию с CSS3, происходящую сейчас в вебмастерском мире. Google полностью отказывается от поддержки IE, интернет все чаще пестрит статьями о HTML5 с его SVG и скорой смерти Flash, в моду входит забытый font-face, со своей возможностью отображать на сайтах какие-угодно шрифты (помнится еще в эпоху недоразвитой поддержки UTF-8, он меня очень выручал), в общем прогресс, как-говорится, на лице … и мне это нравится.
Нравится минимализм и однозначность, одним словом — простота решения. Вот поэтому я влюбился в PNG формат, когда подошло время и появилось достаточно правильное решение по его использованию в любом браузере и поэтому я сейчас пользуюсь решениями выполненными в этом-же духе: одно из них, это поддержка закругленных углов (border-radius) и второе — отрисовка тени у блокового элемента (box-shadow), правда и здесь не обходится без ложечки дегтя, ну что-ж, не без этого.
VML спешит на помощь!
Думаю никто не удивится, если речь будет идти только о его величестве IE6, а другие браузеры как-то не будут упомянуты, — такова «заслуга» Интернет Эксплорера. Как и в предыдущем решении с PNG форматом, для обеспечения работоспособности border-radius и box-shadow в IE6 и далее, будет использоваться язык Microsoft VML.
На этот раз в роли укротителя Internet Explorer’а выступает Remiz Rahnas, со своими проектами на Google Code: curved-corner и box-shadow.
Что не работает
Начнем сразу задом на перед, так думаю полезнее, лучше сразу знать недостатки:
- В Oper’е эта замечательная штука не работает, по крайней мере для Opera Presto 2.2, но обещали, и очень скоро, «подвезти» Presto 2.3, в которой все будет хорошо, ну а пока, кому не терпится, можно пользоваться вот этим решением: New development techniques using Opera Kestrel (9.5)
Обновлено: в начале марта подвезли Presto/2.5.22 Version/10.50, в котором все работает! - В закругленных углах есть проблемы с z позиционированием и радиус закругления для всех углов может быть только одним
- С тенями те-же проблемы с z индексом и цвет тени может быть только черным
Как это работает
Скачиваем с вышеуказанных URI (ага, я теперь знаю, как это называется), .htc файлы и к необходимым элементам прицепляем необходимый стиль:
Для border-radius:
-moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(border-radius.htc);
Для box-shadow:
-moz-box-shadow: 10px 10px 20px #000; -webkit-box-shadow: 10px 10px 20px #000; box-shadow: 10px 10px 20px #000; behavior: url(ie-css3.htc);
Это все. Ждем полной победы CSS3 и HTML5.
[...] Статья о том как Internet Explorer научить закруглять углы и разрешать тени элементам. Вообщем всем рекомендую прочесть, даже если вы забили на IE. Так же неплохая статья про градиенты CSS3. А на десерт решение проблемы с border-radius у Safari скругление углов [...]
Спасибо за статью..
ie справился с прозрачностью png, избавился от некоторых глюков, однако кучу плюшек он так и не поддерживает..
:(
кстати, ещё одна проблема: рисунок фона может только повторяться.
Сделал все как написано в статье но в ie6,7,8 так и не работает бордер радиус…
Внимательно поизучайте border-radius-demo.zip — все там работает.
Удачи!
Пробовал этот метод для шаблона Joomla 1.5. …И… не работает!
А у меня в шаблоне для Joomla 1.5 — работает. правда, не всегда. Если DIV, который нужно закруглить, находится внутри DIVа, у которого выставлена фоновая картинка, то не работает :-(
Уже есть более достойный CSS3 PIE. тоже на основе VML. но поддерживает больше.
почитать можно тут: http://htmlworld.ru/css3_pie/
Спасибо за наводочку, будем посмотреть
Сделал так
.but
{
behavior: url(ie-css3.htc);
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
box-shadow: 0 0 5px #888;
font-weight: bold;
-moz-border-radius: 1em;
border-radius: 1em;
border: 1px #aaa solid;
padding: 6px;
margin: 4px;
}
при запуске IE выдает ошибку: Недопустимый аргумент
ie-css3.htc — лежит где положенно
Ссылку в студию!
неправда в joomla не работает.
Приношу извинения.Не правильно указал путь к файлу.Но вариант из седьмого поста на мой взгляд удобней.и кстати работает отлично.
С выходом IE9 всё решилось. Я стал на колени и сказал:»Спасибо, Господи, теперь мой сайт Планета Флеш выглядит одинаково на всех браузерах.»
Господа, я нашел в чем проблема при внедрении вышеуказанного метода. Парился долго, не работало и все тут. Дело в .htaccess файле в корневой директории. Все, у кого не работает, добавьте в этот файл строку:
AddType text/x-component .htc
И, если, вы все остальное сделали правильно, обязательно заработает. На всякий случай, здесь описываются все возможные проблемы: http://css3pie.com/documentation/known-issues/
У меня стоит денвер, там 4 файла .htaccess и я в каждом из них добавила эту строку. Не помогает — все равное в ие6 углы не закруглились. Что делать? Путь прописан правильно.