Простейший способ делать закругленные углы любого типа в Internet Explorer 6,7,8 без JavaScript

    Очередной проект который мне приходится делать, требует этих самых круглых углов. Поговорив с заказчиком и дизайнером пришли к выводу что в Internet Explorer 8 нужны эти самые круглые углы. Что собственно и привело меня к тому что бы реализовать простейший и более быстрый способ организации таких рамочек, кнопочек и прочих фишечек на сайте. Без использования картинок и скриптов. При реализации данного метода, пришлось столкнутся с некоторыми подводными камнями и искать обходные пути. Что из себя представляет мой метод реализации и с чем мне пришлось столкнутся, читайте ниже.

    Немного истории


    Как мы все помним и знаем, способов реализации круглых углов в Internet Explorer, довольно много разбросано по всему интернету. Один из популярных способов является JavaScript библиотека CSS3PIE. Так же есть уйма других библиотек с использованием JavaScript. Есть простейшие способы реализации на VML с элементом v:roundrect. А кто-то и вовсе делает углы картинками.

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

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

    Способ с использованием VML на мой взгляд самый оптимальный. VML довольно старый и многими малоизученный язык для рисования векторной графики, он является предком развивающего SVG. По интернету разбросана информация по нему обрывками. Спецификация оставляет желать лучшего. А в будущем и вовсе про него забудут. Но на данный момент именно с помощью него мы и будет реализовывать наши круглые уголки.

    Подготовка


    Для отображения VML в Internet Explorer нужно проделать некоторые действия, в первую очередь добавить специальный тег на страницу в секцию HEAD
    <!--[if VML&(lt IE 9)]>
    <?import namespace="v" urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace ?>
    <![endif]-->
    

    Данный тег говорит браузеру о том какой тип элементов нужно отдавать движку VML, в нашем случае элементы имеющие префикс (пространство имен) `v` будут обрабатываться движком VML, так же тег внесен в условные комментарии, что бы другие браузеры не обрабатывали этот не нужный для них тег.

    Далее надо указать, чтобы элементы вели себя как VML. Это делает CSS-свойство behavior:url(#default#VML). Для этого мы с вами добавим стиль так же в условных коментариях:
    <!--[if VML&(lt IE 9)]>
    <style type="text/css">
        v\:shape, v\:shapetype, v\:formulas, v\:group, v\:f, v\:path, v\:fill {
            behavior:url(#default#VML);
        }
        v\:group, v\:shape {
            display:inline-block;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
        }
    </style>
    <![endif]-->
    

    Стили вы можете вынести в отдельный файл стилей, дабы не засорять разметку. Собственно на этом подготовка заканчивается, тут мы с вами дали понять какие теги браузер должен отправлять движку VML.

    Описываем формулы


    Вот тут мы с вами и начнем реализовывать многофункциональный border-radius на VML с использованием формул. Формулы это некие правила указывающие движку VML то, как нужно вести себя в тех или иных условиях. Именно они нам и дают возможность отказаться от JavaScript, дабы увеличить скорость прорисовки векторной графики. Я не буду описывать функционал формул, то как с ними работать, как использовать, так как мы с вами не изучаем VML а делаем круглые уголки. VML-формулы это довольно мощный способ реализовать то что многие реализуют на JavaScript не догадываясь о том что это можно сделать и без него.

    Итак, я реализовал некий шаблон реализации скругленных рамок с помощью формул. Этот шаблон мы с вами будем использовать для прорисовки наших нужных рамочек:
    <v:shapetype id="vml-radius" adj="0,0,0,0" coordorigin="-1 -1" coordsize="1000000 1000000"
                 path="m,@9qy@8,l@15,qx@0,@16l@0,@24qy@22,@1l@29,@1qx,@31l,@9xm@44,@54qy@49,@36
                 l@60,@36qx@39,@65l@39,@77qy@71,@42l@82,@42qx@44,@88l@44,@54xe" stroked="false">
        <v:formulas>
            <v:f eqn="val width"/><v:f eqn="val height"/><v:f eqn="prod @0 1 pixelwidth"/>
            <v:f eqn="prod @1 1 pixelheight"/><v:f eqn="prod #0 1 10000"/><v:f eqn="prod @4 10000 1"/>
            <v:f eqn="sum #0 0 @5"/><v:f eqn="if @4 @4 @6"/><v:f eqn="prod @7 @2 1"/>
            <v:f eqn="prod @6 @3 1"/><v:f eqn="prod #1 1 10000"/><v:f eqn="prod @10 10000 1"/>
            <v:f eqn="sum #1 0 @11"/><v:f eqn="if @10 @10 @12"/><v:f eqn="sum pixelwidth 0 @13"/>
            <v:f eqn="prod @14 @2 1"/><v:f eqn="prod @12 @3 1"/><v:f eqn="prod #2 1 10000"/>
            <v:f eqn="prod @17 10000 1"/><v:f eqn="sum #2 0 @18"/><v:f eqn="if @17 @17 @19"/>
            <v:f eqn="sum pixelwidth 0 @20"/><v:f eqn="prod @21 @2 1"/><v:f eqn="sum pixelheight 0 @19"/>
            <v:f eqn="prod @23 @3 1"/><v:f eqn="prod #3 1 10000"/><v:f eqn="prod @25 10000 1"/>
            <v:f eqn="sum #3 0 @26"/><v:f eqn="if @25 @25 @27"/><v:f eqn="prod @28 @2 1"/>
            <v:f eqn="sum pixelheight 0 @27"/><v:f eqn="prod @30 @3 1"/><v:f eqn="sum #4 #6 0"/>
            <v:f eqn="sum #5 #7 0"/><v:f eqn="sum @32 @33 0"/><v:f eqn="prod #4 @3 1"/>
            <v:f eqn="if @34 @35 @9"/><v:f eqn="prod #5 @2 1"/><v:f eqn="sum @0 0 @37"/>
            <v:f eqn="if @34 @38 0"/><v:f eqn="prod #6 @3 1"/><v:f eqn="sum @1 0 @40"/>
            <v:f eqn="if @34 @41 @9"/><v:f eqn="prod #7 @2 1"/><v:f eqn="if @34 @43 0"/>
            <v:f eqn="sum @7 0 #7"/><v:f eqn="if @45 @45 0"/><v:f eqn="prod @46 @2 1"/>
            <v:f eqn="sum @47 @43 0"/><v:f eqn="if @34 @48 0"/><v:f eqn="sum @6 0 #4"/>
            <v:f eqn="if @50 @50 0"/><v:f eqn="prod @51 @3 1"/><v:f eqn="sum @52 @35 0"/>
            <v:f eqn="if @34 @53 @9"/><v:f eqn="sum @13 0 #5"/><v:f eqn="if @55 @55 0"/>
            <v:f eqn="sum pixelwidth 0 @56"/><v:f eqn="prod @57 @2 1"/><v:f eqn="sum @58 0 @37"/>
            <v:f eqn="if @34 @59 0"/><v:f eqn="sum @12 0 #4"/><v:f eqn="if @61 @61 0"/>
            <v:f eqn="prod @62 @3 1"/><v:f eqn="sum @63 @35 0"/><v:f eqn="if @34 @64 @9"/>
            <v:f eqn="sum @20 0 #5"/><v:f eqn="if @66 @66 0"/><v:f eqn="sum pixelwidth 0 @67"/>
            <v:f eqn="prod @68 @2 1"/><v:f eqn="sum @69 0 @37"/><v:f eqn="if @34 @70 0"/>
            <v:f eqn="sum @19 0 #6"/><v:f eqn="if @72 @72 0"/><v:f eqn="sum pixelheight 0 @73"/>
            <v:f eqn="prod @74 @3 1"/><v:f eqn="sum @75 0 @40"/><v:f eqn="if @34 @76 @9"/>
            <v:f eqn="sum @28 0 #7"/><v:f eqn="if @78 @78 0"/><v:f eqn="prod @79 @2 1"/>
            <v:f eqn="sum @80 @43 0"/><v:f eqn="if @34 @81 0"/><v:f eqn="sum @27 0 #6"/>
            <v:f eqn="if @83 @83 0"/><v:f eqn="sum pixelheight 0 @84"/><v:f eqn="prod @85 @3 1"/>
            <v:f eqn="sum @86 0 @40"/><v:f eqn="if @34 @87 @9"/>
        </v:formulas>
    </v:shapetype>
    

    Огромный шаблон не правда ли? Но это не страшно, ведь JavaScript как правило занимает куда больше места, шаблон размещается лишь один раз на странице и используется по ключу vml-radius указанный в атрибуте ID в теге v:shapetype. Этот шаблон мы также можем разместить в условных комментариях где то в теге HEAD.

    Рисуем круглые углы


    Теперь мы с вами можем легко рисовать рамочки с круглыми углами:
    <v:shape adj="16,16,16,16" fillcolor="#00ff00" style="width: 100px; height: 100px;" type="#vml-radius" />
    


    тут мы с вами нарисовали простой зеленый квадрат с круглыми углами, радиус которых составляет 16 пикселей. Как вы заметили радиус углов мы указываем в атрибуте adj="16,16,16,16". А теперь давайте добавим бордюры для этого квадрата, например красного цвета:
    <v:group style="width: 100px; height: 100px;">
        <v:shape adj="16,16,16,16" fillcolor="#00ff00" type="#vml-radius" />
        <v:shape adj="16,16,16,16,10,10,10,10" fillcolor="#ff0000" type="#vml-radius" />
    </v:group>
    


    Тут мы с вами создали группу слоев, то есть на зеленый квадрат наложили красные бордюры и как вы заметили у атрибута adj появились дополнительные параметры указывающие толщину бордюра.

    Иногда бывает нужно сделать углы не равномерные, а овальные. То есть размер угла по вертикали один, а по горизонтали другой, например такой квадрат:

    для этого мы немного подкорректируем параметр adj:
    <v:group style="width: 100px; height: 100px;">
        <v:shape adj="00320064,16,00320064,16" fillcolor="#00ff00" type="#vml-radius" />
        <v:shape adj="00320064,16,00320064,16,10,10,10,10" fillcolor="#ff0000" type="#vml-radius" />
    </v:group>
    

    Добавим задний фон:

    <v:group style="width: 100px; height: 100px;">
        <v:shape adj="00320064,16,00320064,16" type="#vml-radius">
            <v:fill type="tile" src="http://img-fotki.yandex.ru/get/4424/104967700.7f/0_7a378_1c3ad751_S.jpg" />
        </v:shape>
        <v:shape adj="00320064,16,00320064,16,10,0,10,0" fillcolor="#ff0000" type="#vml-radius" />
    </v:group>
    

    или зальем градиентом:

    <v:group style="width: 100px; height: 100px;">
        <v:shape adj="00320064,16,00320064,16" type="#vml-radius">
            <v:fill type="gradient" angle="0" color="#D0E805" color2="#E88A05" />
        </v:shape>
        <v:shape adj="00320064,16,00320064,16,10,0,10,0" fillcolor="#ff0000" type="#vml-radius" />
    </v:group>
    

    Рисуем пейзаж с помощью градиента:

    <v:group style="width: 100px; height: 100px;">
        <v:shape adj="00320064,16,00320064,16" type="#vml-radius">
            <v:fill type="gradient" method="sigma" angle="0" color="#ff0000" colors="40% #0fff00,60% #00fff0" color2="#0000ff" />
        </v:shape>
        <v:shape adj="00320064,16,00320064,16,10,0,10,0" fillcolor="#ff0000" type="#vml-radius" />
    </v:group>
    


    Параметры


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

    Первые четыре параметра, имеют хитрую специфику. Если число указано менее 10000 то углы будут одинаковыми как по горизонтали, так и по вертикали. Например запись 00320064 говорит о том, что нужно отрисовать угол в 32 пикселя по горизонтали и 64 пикселя по вертикали. Грубо говоря число делится на две части: 0032/0064. Такой специфический способ реализации пришлось сделать по причине того что параметр adj может максимум иметь 8-м параметров, остальные просто игнорируются. Об этом вы можете почитать документацию в официальных источниках.

    первые четыре параметра при значениях ниже 10000 указывают на:
    LeftTopXY, RightTopXY, RightBottomXY, LeftBottomXY
    при значении 10000 и выше указывают на:
    LeftTopX/LeftTopY, RightTopX/RightTopY, RightBottomX/RightBottomY, LeftBottomX/LeftBottomY

    Вторая четверка указывает на толщину бордюров:
    Top, Right, Bottom, Left

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

    Проблемные части


    Проблемной частью в данном решении является резиновые блоки, суть проблемы в том что Microsoft выпустил Internet Explorer 8 вырезав в нем возможность подгонки VML элементов под блоки HTML, в более ранних версиях браузера работает данный метод нормально:

    <span style="position: relative; display: inline-block; padding: 20px;">
        <v:shape adj="16,16,16,16" fillcolor="#00ff00" style="z-index: -1; position: absolute;" type="#vml-radius" />
        test text
    </span>
    

    То есть к примеру IE7 вполне нормально подгонит наш квадратик по родительский блок. А вот в IE8 такой подход уже не прокатит.

    Что же делать спросите вы!? Конечно есть способ сделать это на JavaScript, повесить на родительский блок событие onresize и менять размеры нашего квадратика при изменении этого блока. Но это приведет к тому что при первой загрузке страницы нам нужно будет пробежаться по всем элементам, установить начальные размеры, повесить событие. Это все муторно и это JavaScript, а ведь мы с вами делаем все что бы не использовать для этих целей JavaScript.

    К нашей радости Microsoft не полностью нас порезал в данной возможности и оставил один VML элемент позиционирующий от родительского блока HTML. Хотя этот элемент не совсем уж удобный, но дает возможность выйти из проблемной ситуации. Этот элемент называется V:VMLFRAME. Это что-то подобие IFRAME но для вектора.

    VMLFRAME или очередной костыль


    Что бы использовать данный тег, нужно вынести нашу формулу в отдельный файл, создать там наш квадратик. То есть правило для него, а потом использовать его. И так приступим, создадим файл с названием допустим internalvml.vml с содержимым:
    Содержимое файла internalvml.vml
    <xml xmlns:v="urn:schemas-microsoft-com:vml">
        <v:shapetype id="vml-radius" adj="0,0,0,0" coordorigin="-1 -1" coordsize="1000000 1000000"
                     path="m,@9qy@8,l@15,qx@0,@16l@0,@24qy@22,@1l@29,@1qx,@31l,@9xm@44,@54qy@49,@36
                     l@60,@36qx@39,@65l@39,@77qy@71,@42l@82,@42qx@44,@88l@44,@54xe" stroked="false">
            <v:formulas>
                <v:f eqn="val width"/><v:f eqn="val height"/><v:f eqn="prod @0 1 pixelwidth"/>
                <v:f eqn="prod @1 1 pixelheight"/><v:f eqn="prod #0 1 10000"/><v:f eqn="prod @4 10000 1"/>
                <v:f eqn="sum #0 0 @5"/><v:f eqn="if @4 @4 @6"/><v:f eqn="prod @7 @2 1"/>
                <v:f eqn="prod @6 @3 1"/><v:f eqn="prod #1 1 10000"/><v:f eqn="prod @10 10000 1"/>
                <v:f eqn="sum #1 0 @11"/><v:f eqn="if @10 @10 @12"/><v:f eqn="sum pixelwidth 0 @13"/>
                <v:f eqn="prod @14 @2 1"/><v:f eqn="prod @12 @3 1"/><v:f eqn="prod #2 1 10000"/>
                <v:f eqn="prod @17 10000 1"/><v:f eqn="sum #2 0 @18"/><v:f eqn="if @17 @17 @19"/>
                <v:f eqn="sum pixelwidth 0 @20"/><v:f eqn="prod @21 @2 1"/><v:f eqn="sum pixelheight 0 @19"/>
                <v:f eqn="prod @23 @3 1"/><v:f eqn="prod #3 1 10000"/><v:f eqn="prod @25 10000 1"/>
                <v:f eqn="sum #3 0 @26"/><v:f eqn="if @25 @25 @27"/><v:f eqn="prod @28 @2 1"/>
                <v:f eqn="sum pixelheight 0 @27"/><v:f eqn="prod @30 @3 1"/><v:f eqn="sum #4 #6 0"/>
                <v:f eqn="sum #5 #7 0"/><v:f eqn="sum @32 @33 0"/><v:f eqn="prod #4 @3 1"/>
                <v:f eqn="if @34 @35 @9"/><v:f eqn="prod #5 @2 1"/><v:f eqn="sum @0 0 @37"/>
                <v:f eqn="if @34 @38 0"/><v:f eqn="prod #6 @3 1"/><v:f eqn="sum @1 0 @40"/>
                <v:f eqn="if @34 @41 @9"/><v:f eqn="prod #7 @2 1"/><v:f eqn="if @34 @43 0"/>
                <v:f eqn="sum @7 0 #7"/><v:f eqn="if @45 @45 0"/><v:f eqn="prod @46 @2 1"/>
                <v:f eqn="sum @47 @43 0"/><v:f eqn="if @34 @48 0"/><v:f eqn="sum @6 0 #4"/>
                <v:f eqn="if @50 @50 0"/><v:f eqn="prod @51 @3 1"/><v:f eqn="sum @52 @35 0"/>
                <v:f eqn="if @34 @53 @9"/><v:f eqn="sum @13 0 #5"/><v:f eqn="if @55 @55 0"/>
                <v:f eqn="sum pixelwidth 0 @56"/><v:f eqn="prod @57 @2 1"/><v:f eqn="sum @58 0 @37"/>
                <v:f eqn="if @34 @59 0"/><v:f eqn="sum @12 0 #4"/><v:f eqn="if @61 @61 0"/>
                <v:f eqn="prod @62 @3 1"/><v:f eqn="sum @63 @35 0"/><v:f eqn="if @34 @64 @9"/>
                <v:f eqn="sum @20 0 #5"/><v:f eqn="if @66 @66 0"/><v:f eqn="sum pixelwidth 0 @67"/>
                <v:f eqn="prod @68 @2 1"/><v:f eqn="sum @69 0 @37"/><v:f eqn="if @34 @70 0"/>
                <v:f eqn="sum @19 0 #6"/><v:f eqn="if @72 @72 0"/><v:f eqn="sum pixelheight 0 @73"/>
                <v:f eqn="prod @74 @3 1"/><v:f eqn="sum @75 0 @40"/><v:f eqn="if @34 @76 @9"/>
                <v:f eqn="sum @28 0 #7"/><v:f eqn="if @78 @78 0"/><v:f eqn="prod @79 @2 1"/>
                <v:f eqn="sum @80 @43 0"/><v:f eqn="if @34 @81 0"/><v:f eqn="sum @27 0 #6"/>
                <v:f eqn="if @83 @83 0"/><v:f eqn="sum pixelheight 0 @84"/><v:f eqn="prod @85 @3 1"/>
                <v:f eqn="sum @86 0 @40"/><v:f eqn="if @34 @87 @9"/>
            </v:formulas>
        </v:shapetype>
    
        <v:shape id="my-round" adj="16,16,16,16" fillcolor="#00ff00" style="width: 100%; height: 100%;" type="#vml-radius" />
    </xml>
    


    В файл мы поместили наш квадратик:
    <v:shape id="my-round" adj="16,16,16,16" fillcolor="#00ff00" style="width: 100%; height: 100%;" type="#vml-radius" />
    

    Добавив ему ID с именем my-round, что бы потом по этому имени IE определил какой квадратик мы хотим использовать.

    А теперь можно смело делать наш блок с нашим квадратиком через элемент v:vmlframe:
    <span style="position: relative; display: inline-block; padding: 20px;">
        <v:vmlframe style="z-index: -1; position: absolute;" src="internalvml.vml#my-round" />
        test text
    </span>
    

    Теперь Internet Explorer 8 нормально будет подгонять наш квадратик к размеру родительского блока.

    Заключение


    В заключении хочу сказать, что если вам что-то не ясно или просто хотите что-то добавить, пишите в комментариях и я дополню/исправлю статью. Писать статьи я не мастак, кодить это мое а вот писать статьи у меня не совсем хорошо выходит. Поэтому уж не обессудьте, я старался)))

    Всем удачи и приятно скругления!
    Поделиться публикацией

    Комментарии 43

      +1
      И как всегда все мои разработки вы можете найти на ГитХабе: https://github.com/devote
        0
        Обсуждение данной статьи и решения так же можно почитать тут
        +2
        Я в свое время писал шаблон вот так (который потом растягивался с помощью css по px или %):
        <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="decor">
        <?import namespace="decor" implementation="#default#VML" ?>
        <decor:shapetype adj="0,0,0,0" coordorigin="0 0" coordsize="1000000 1000000" id="corners" stroked="false" path="m @17,0 l @19,0 qx @0,@20 l @0,@22 qy @21,@1 l @23,@1 qx 0,@24 l 0,@18 qy @17,0 x e">
        	<decor:formulas>
        		<decor:f eqn="val width" />
        		<decor:f eqn="val height" />
        		<decor:f eqn="prod @0 1 pixelwidth" />
        		<decor:f eqn="prod @1 1 pixelheight" />
        		<decor:f eqn="val #0" />
        		<decor:f eqn="if #2 #1 @4" />
        		<decor:f eqn="if #3 #2 #1" />
        		<decor:f eqn="if @6 @6 @4" />
        		<decor:f eqn="if #3 #3 @7" />
        		<decor:f eqn="val @4" />
        		<decor:f eqn="val @4" />
        		<decor:f eqn="sum pixelwidth 0 @5" />
        		<decor:f eqn="val @5" />
        		<decor:f eqn="sum pixelwidth 0 @7" />
        		<decor:f eqn="sum pixelheight 0 @7" />
        		<decor:f eqn="val @8" />
        		<decor:f eqn="sum pixelheight 0 @8" />
        		<decor:f eqn="prod @2 @9 1" />
        		<decor:f eqn="prod @3 @10 1" />
        		<decor:f eqn="prod @2 @11 1" />
        		<decor:f eqn="prod @3 @12 1" />
        		<decor:f eqn="prod @2 @13 1" />
        		<decor:f eqn="prod @3 @14 1" />
        		<decor:f eqn="prod @2 @15 1" />
        		<decor:f eqn="prod @3 @16 1" />
        	</decor:formulas>
        </decor:shapetype>
        


        Который позволяет писать
        <decor:shape type="#corners" fillcolor="#fff" adj="20" /> все углы 20
        <decor:shape type="#corners" fillcolor="#fff" adj="20,10" /> верхние углы 20 нижние 10
        <decor:shape type="#corners" fillcolor="#fff" adj="20,10,15,18" /> и все углы разные
        
          0
          Тоже вариант) Упрощает написание чисел, можно и допилить будет потом. Хотя функционала это не добавит, а вот лишних тегов с формулами добавит))) Но тем не менее спасибо, учту на будущее.
            0
            Хотя тут есть и недостаток:
            <decor:shape type="#corners" fillcolor="#fff" adj="20,0,0,0" /> все углы 20 хотя нужен тока один
            
              0
              Вы уверенны? Я просто уже не помню как я делал, и не хочу вспоминать vml, но помню что делал только с одним углом (хотя возможно я ставил 20,1,1,1)
                0
                Вы уверенны?

                Да вполне, пустое значение воспринимается как ноль, поэтому проверка по if #1 #1 #0 выдаст второй результат, а вот если ставить 20,1,1,1 то конечно все будет пучком
            +33
            Убил бы ваших заказчиков! (это предложение не является офертой, я не предоставляю услуги такого рода ни на какой основе)
              +1
              Ну зачем же убивать, просто выкатить за эту плюшку для IE8 рейт * 2, это отрезвляет.
                +1
                Верно сказано, именно за такое я и беру в 2-3 раза больше, и меня это устраивает… Если заказчик платит, то за это ему хоть под ИЕ6 будут углы крыглые
              +2
              То есть, VMLFRAME это итоговое решение, которое работает в IE6-8?

              Скриншоты с примерами жгут :) Лично мне более интересны стандартные варианты, например для кнопки (1px border + 3px border-radius + какой-нибудь фон) или блок с текстом (1px border + 10px border-radius + параграф текста) — можно было бы посмотреть качество рендера. Вообще, было бы круто добавить подобную демку в пост.
                +2
                Среди ваших вариантов решения нет такого:
                Вежливо послать отказаться и приступить к следующему заказу.
                  0
                  И потерять деньги? причем двойную плату?
                    +1
                    Именно. Совершенно спокойно взять и потерять деньги (в том случае если у вас конечно не какая-то критическая ситуация, когда каждая копейка на счету).
                      0
                      Есть вещи дороже денег.
                    0
                    Что-то как-то много кода… для чего там ветвления?

                    У меня как-то с этим по проще было: github.com/nin-jin/PMS/blob/80db5fd273a9cd25d3b8459a1951e28d9f977fcd/wc/css3/wc-css3.vml

                      +1
                      У вас проще и менее функционально, у меня побольше написано но более функционально… Говорю же писать статьи не умею, видимо я написал не совсем понятно… Приношу извинения если вы что-то не так поняли в статье, но в моя формула позволяет не только блок делать с круглыми углами, но и просто бордюры с прозрачным контентом… Именно по этому там больше формул.
                      +7
                      Заказчик хочет круглые углы? Пусть наконец обновит свой браузер и, простите, не е… мозг разработчикам. Думал, что большинство от этого недуга уже вылечилось.
                        0
                        Точно! Нечего такими мелочами так заморачиваться. Если нужна поддержка старого осла, то найдётся чем заняться, но уж точно не уголками.
                          +2
                          Исполнитель делает работу для заказчика, а не для себя.

                          Вот представьте себе ситуацию, у вас проравало водопровод и вы пригласили сантехника.
                          Сантехник посмотрел на ваши трубы и сказал: «У вас тут какая-то хуйня с трубами — они железные, вот когда поставите стеклопластик, тогда и зовите меня».

                          Хотите такого же отношения к себе?
                            +3
                            Не-не, сантехник чуть по-другому должен ответить: "… они железные. Но я с радостью поставлю вам стеклопластик за отдельную плату со скидкой."
                              0
                              Вот представьте себе ситуацию, у вас сгнил водопровод и вы пригласили сантехника.
                                +2
                                Ну представил и что? Пример с гнилым водопроводом тут совсем не катит. Пример нужно приводить такой, у вас дома водопровод из железных труб и к вам приходит сантехник со словами, давайте вы смените себе водопроводные трубы на металлопластик, утверждая это тем что ему с ними работать проще. Вы станете менять трубы ради того что бы водопроводчику потом было проще? Сомневаюсь что станете менять, ведь железные трубы вполне себе нормально справляются не текут, не мешают… Дык зачем ради чьих то капризов что-то менять?

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

                                А я не против писать хоть даже под ИЕ6 если за это хорошо заплатят.
                                  0
                                  Некоторым нравится восстанавливать насквозь прогнившие автомобили.
                                  Ключевое слово — нравится.
                            +2
                            Спасибо за подробный разбор работы с VML,
                            но зачем писать свой велосипед, если CSS3PIE делает тоже самое, по тому же принципу, через VML!
                              +2
                              Может, GPL-лицензия не подходит проекту
                                +3
                                CSS3PIE не модифицируется при этом. GPL библиотеки можно использовать в коммерческих продуктах.
                                0
                                Вы точно статью читали?
                                Например JavaScript библиотеки очень заметно загружают браузер и производительность сайта оставляет желать лучшего, особенно это заметно в случаях когда на странице размещено огромное количество элементов требующих скругления углов. Иногда JavaScript библиотеки не правильно отрисовывают элементы или вовсе не отрисовывают.
                                  0
                                  Конечно читал. И понимаю так что вы веcь этот презентационный мусор на VML пишите руками в шаблоны, а не генерите на JS (и не используете уже готовое решение CSS3PIE где делается тоже самое) ради небольшой экономии производительности?
                                    0
                                    и не используете уже готовое решение CSS3PIE где делается тоже самое

                                    вот именно что там не делается тоже самое. Весь просчет радиусов делает библиотека. Чем сильно тормозит работу. Почитайте исходники данной библиотеки и увидите что в ней формулы не используются, хотя они работают в разы быстрее чем постоянная слежка за событием onresize и перерисовкой элементов. Поверьте, я много библиотек видел и почти все изучал изнутри, но такого подхода в них я пока не видел.
                                      0
                                      Ну а у вас радиус всегда один и тот же, поэтому просчёта нет, верно? Т.е. вы реализовали частный случай без автоматизации — поэтому он быстрей. По сути просто написали руками то что сгенерировал бы CSS3PIE.
                                        +2
                                        Есть, при изменении размера блока всегда делается пересчет радиуса… потому что библиотеки используют относительные позиции а не статичные… Так устроен VML у него нет таких понятий как пикселы, там все в процентах, если блок становится больше, то и радиус увеличивается… А что бы этого не было нужно делать пересчет. Что собственно библиотеки и делают… Почитайте исходники этих библиотек и все поймете.

                                        А в случае что я привел в пример в статье, пересчет делает сам браузер за счет формул. Что намного меньше нагружает браузер. Вот если библиотеку CSS3PIE перепишут на подобные формулы, вот тогда ей цены не будет.
                                          –1
                                          Вот если библиотеку CSS3PIE перепишут на подобные формулы, вот тогда ей цены не будет.

                                          Сделайте pull request github.com/lojjic/PIE
                                    +3
                                    JavaScript библиотеки очень заметно загружают браузер
                                    Все правильно — пользователи IE должны страдать!
                                  0
                                  Спасибо за познавательный разбор нового технического решения этой часто встречающейся проблемы с заказчиками. Заслуживает всяческого уважения желание разбираться и доводить до ума нетривиальные способы оптимизации в лучших хакерских традициях, о чем написана одна замечательная книга
                                    0
                                    Спасибо за книжку, почитаю на досуге)
                                    0
                                    Что-то больно сложно, тут попроще сделано. Но всё равно метод слишком сложный и сильно загрязняет и утяжеляет HTML-код. Также есть проблема с позиционированием: если включать HTML внутрь, то возникают проблемы с вложенностью и стилевым оформлением. Хуже того, в IE8 уголки не попадают в пиксели, левая и нижняя сторона как бы обрезаются. Проще всего воспользоваться библиотекой типа DD_roundies (так делает даже apple.com) или деградировать закруглённые уголки до «метро»-стиля.
                                      +2
                                      DD_roundies — это тот же VML, только генерующийся аавтоматически из JS.
                                      Эта библотека из которой вырос CSS3PIE, тоже генерирующий VML.
                                      +1
                                      За использование прямоугольника со скругленными углами вас засудит Apple.
                                        +1
                                        Видимо, вам только еще предстоит узнать это: rghost.ru/42705952/image.png

                                        Стыдно, товарищ. Стыдно!
                                          0
                                          Согласен, нужно было скрины в PNG сохранить, ступил, каюсь)))
                                          +4
                                          Простейший способ делать закругленные углы любого типа

                                          <v:f eqn=«sum #5 #7 0»/><v:f eqn=«sum @32 @33 0»/><v:f eqn=«prod #4 @3 1»/>
                                          <v:f eqn=«if @34 @35 @9»/><v:f eqn=«prod #5 @2 1»/><v:f eqn=«sum @0 0 @37»/>

                                          да, да…
                                            +3
                                            В какой-то момент я начал говорить всем своим заказчикам, что если им нужна пусть даже минимальная поддержка IE6-7, то пусть ищут себе другого разработчика. Как результат: я начал выполнять в два раза больше заказов.

                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                            Самое читаемое