расставляй правильно приоритеты и не отвлекайся на мелочи

Поддержка 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.

20 комментариев на статью:
  1. Скругление углов в IE и Safari | Мир CSS:

    […] Статья о том как Internet Explorer научить закруглять углы и разрешать тени элементам. Вообщем всем рекомендую прочесть, даже если вы забили на IE. Так же неплохая статья про градиенты CSS3. А на десерт решение проблемы с border-radius у Safari скругление углов […]

  2. Levik:

    Спасибо за статью..
    ie справился с прозрачностью png, избавился от некоторых глюков, однако кучу плюшек он так и не поддерживает..
    :(

  3. Swetlana:

    кстати, ещё одна проблема: рисунок фона может только повторяться.

  4. lazer:

    Сделал все как написано в статье но в ie6,7,8 так и не работает бордер радиус…

  5. Nauz:

    Пробовал этот метод для шаблона Joomla 1.5. …И… не работает!

  6. klever:

    А у меня в шаблоне для Joomla 1.5 — работает. правда, не всегда. Если DIV, который нужно закруглить, находится внутри DIVа, у которого выставлена фоновая картинка, то не работает :-(

  7. Айдар:

    Уже есть более достойный CSS3 PIE. тоже на основе VML. но поддерживает больше.
    почитать можно тут: http://htmlworld.ru/css3_pie/

  8. Monk:

    Сделал так
    .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 — лежит где положенно

  9. criat:

    неправда в joomla не работает.

  10. criat:

    Приношу извинения.Не правильно указал путь к файлу.Но вариант из седьмого поста на мой взгляд удобней.и кстати работает отлично.

  11. Дмитрий:

    С выходом IE9 всё решилось. Я стал на колени и сказал:»Спасибо, Господи, теперь мой сайт Планета Флеш выглядит одинаково на всех браузерах.»

  12. DENvisioN:

    Господа, я нашел в чем проблема при внедрении вышеуказанного метода. Парился долго, не работало и все тут. Дело в .htaccess файле в корневой директории. Все, у кого не работает, добавьте в этот файл строку:
    AddType text/x-component .htc

    И, если, вы все остальное сделали правильно, обязательно заработает. На всякий случай, здесь описываются все возможные проблемы: http://css3pie.com/documentation/known-issues/

    • Анастасия:

      У меня стоит денвер, там 4 файла .htaccess и я в каждом из них добавила эту строку. Не помогает — все равное в ие6 углы не закруглились. Что делать? Путь прописан правильно.

  13. Татьяна:

    Огромное спасибо!

  14. Александр:

    http://step-web.ru/online-service/css-border-radius.php онлайн генератор border-radius для ленивых.

Ответить
Обязательные поля помечены *