Кроссбраузерность или как сделать IE прогрессивным браузером

css3, pie.htc, IE

О закругления углов в html-верстки сказано уже столько, что я пойму тех кто прочитав заголовок иронически улыбнется и подумает «опять 25 ну сколько можно …». Поэтому я постараюсь кратко изложить суть.

Задача

Если кратко, то задача состоит в том, чтобы имитировать скругление углов блока. Конечно же это должно работать во всех браузерах, включая IE6.

Реализация

div{
-border-radius: 20px; /* CSS3 */
-moz-border-radius: 20px 20px 0 0; /* Firefox */
-webkit-border-radius: 20px 20px 0 0; /* Safari, Chrome */
-khtml-border-radius: 20px 20px 0 0; /* KHTML */}

А что IE?

Все до банальности просто. Есть очень мощная библиотека CSS3 Pie которая реализует на VML многие CSS3 свойства для IE6-8, включая border-radius, она невероятно проста и весит всего 28кб. Все что нам нужно это добавить в CSS строку:

div{
behavior: url(css/PIE.htc);}

 

IE6 легко с этим справляется и не притормаживает даже если таких элементов на странице больше 10.

Вот пример “до” и “после” применения PIE.htc:

before-after-pie.htc

Скачать PIE-2.0.zip (95Kb)



Опубликовано 06.10.2013 в WEB

(4) Комментариев

  1. MarcJacobs
    Tuesday January 21st, 2014 at 01:29 PM · Reply

    Отлично!

  2. Michaelkl
    Saturday March 22nd, 2014 at 02:49 PM · Reply

    You have hit the mark. Thought good, I support.

    • Jaundalynn
      Sunday March 8th, 2015 at 01:06 PM · Reply

      There’s a terrific amount of knedlowge in this article!

  3. Elyse
    Sunday March 8th, 2015 at 02:43 PM · Reply

    I seachred a bunch of sites and this was the best.

Оставить комментарий

Your email address will not be published. Required fields are marked *

Back to Top