Кроссбраузерные закруглённые уголки

Лев Солнцев 28 июня 2010

Согласно как древнему учению фен-шуй, так и последним медицинским исследованиям, прямые углы вредно влияют на человека. Издавна дизайнеры всего мира стараются скруглять углы чтобы уменьшить вред и сделать свою работу красивее. Это коснулось и области веб-дизайна.

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

Существующие решения

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

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

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

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

Так же в старых версиях браузера Opera (начиная с 9.5) существует ещё одно обходное решение: использовать векторную графику SVG в качестве фона.

А что же Internet Explorer?

Однако, пока ещё самым распространённым в мире браузером является Internet Explorer, не поддерживающий решение ни через CSS, ни через SVG. Тем не менее, в Internet Explorer есть ещё одна малоизученная (как мы увидим дальше) возможность: один из предков SVG — векторная графика VML.

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

Обычно же требуется какой-то зафиксированный радиус скругления, например, 8 пикселов. Возможно ли так сделать в Internet Explorer, не выполняя работу браузера вместо него самого?

Оказывается, да.

Изучаем VML

Для начала, нам надо определить свою фигуру. Пусть это будет простой прямоугольник:

Пример 1. VML (только IE8 и ниже)

	<!DOCTYPE HTML>
	<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
	<head>
	    <title>Пример: VML</title>
	    <meta charset="utf-8">
	    <style>
	        v\:shape {
	            behavior:url(#default#VML);
	            display:inline-block;
	            width:100px;
	            height:20px;
	        }
	    </style>
	</head>
	<body>
	    <v:shape stroked="false" fillcolor="#EEE"
	        coordorigin="0 0" coordsize="1000 1000"
	        path="m 0,0 l 1000,0, 1000,1000, 0,1000 x e">
	    </v:shape>
	</body>

Для запуска VML в IE нужно несколько условий.

  1. Объявление XML-документа, с подключенным пространством имён VML, в любом месте документа. Это делает вторая строчка. Указание префикса v говорит, что тэги VML будут записаны с этим префиксом. В примере элемент таким образом обозначен <v:shape>. В скриптах (например, для подгружаемого содержимого) объявление можно сделать с помощью команды document.namespaces.add('v', 'urn:schemas-microsoft-com:vml')
  2. Далее надо указать, чтобы элементы вели себя как VML. Это делает CSS-свойство behavior:url(#default#VML)
  3. Отображаемые элементы VML должны быть в <body>. Опускать его нельзя.
  4. Для отображаемого элемента должны быть указаны размеры. Для это нужно задать свойство display, не равное inline (оно стоит по умолчанию): display:inline-block или display:block и, конечно же, надо указать сами размеры.

Пример 1. Internet Explorer 6 Можно ещё отметить, что двоеточие имеет специальный смысл в CSS, и поэтому должно быть экранировано в селекторе с помощью обратного слэша. Также популярный ранее селектор v\:* не работает в Internet Explorer 8, из-за чего нужно либо перечислять все элементы, либо использовать дополнительный класс. Я предпочёл первое, так как в таком случае в итоге выходит меньше кода.

Элемент shape задаёт произвольную фигуру. При этом использованы следующие параметры:

  • coordorigin="0 0" задаёт начало координат в положении (0, 0)
  • coordsize="1000 1000" задаёт размеры «холста» (за них можно выходить, но в некоторых, не связанных с VML, случаях картинка может быть обрезана)
  • path="m 0,0 l 1000,0, 1000,1000, 0,1000 x e" рисует сам прямоугольник. Использован следующий синтаксис: m — передвигает в начало координат, l рисует прямые линии через ряд координат (x, y), перечисленные через запятую, x замыкает контур, и e заканчивает рисование;
  • fillcolor="#CCC" заполняет элемент светло-серым цветом, чтобы мы его смогли увидеть. Следует отметить, что, заданный через CSS, фон у VML-элементов должен быть отключен. Иначе он будет нарисован прямоугольником под фигурой, что лишит нас преимуществ.
  • stroked="false" указывает, что нам не нужна рамка. (По умолчанию рисуется тонкая.)

Сложности

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

Как это сделать?

Формулы

VML имеет возможность задавать, считать и использовать определённые соотношения. Простой пример, пока ещё без вычислений:

Пример 2. Формулы в VML (только IE8 и ниже)

	<v:shape coordorigin="0 0" coordsize="1000 1000"
	    path="m 0,0 l @0,0, @0,@1, 0,@1 x e"
	    fillcolor="#EEE" stroked="false">
	    <v:formulas>
	        <v:f eqn="val width"/>
	        <v:f eqn="val height"/>
	    </v:formulas>
	</v:shape>

Пример 2. Internet Explorer 6 Этот пример выглядит точно так же как первый, что показывает работоспособность формул. Элемент formulas содержит в себе список формул, в атрибуте eqn у каждого f содержатся сами формулы. На результат каждого элемента f можно ссылаться через запись вида @№, где  — номер выражения (перечисление начинается с нуля). Сами формулы также могут ссылаться на результат предыдущих вычислений. Но обо всём по порядку.

Выражение val позволяет ссылаться на определённое значение. Оно может быть задано непосредственно, либо можно использовать какое-то ключевое слово. В данном случае это размеры «холста» (те, что задаются с помощью coordsize).

Также у фигур может быть задан параметр adj, на который можно ссылаться как #0 (и далее по счёту). Он пригодится нам в дальнейшем, чтобы задавать радиус кривизны уголков. К тому же нам пригодится то, что его можно переназначать для повторно используемой фигуры.

Приступаем к главному

Главное, что нам пригодится в формулах кроме самих вычислений — это возможность использовать в них размер фигуры в пикселах с помощью ключевых слов pixelwidth и pixelheight. Используя это, определим требуюмую фигуру:

Пример 3. VML и пикселы (только IE8 и ниже)

	<v:shape adj="8" stroked="false" fillcolor="#CCC"
	    coordorigin="0 0" coordsize="1000000 1000000"
	    path="m @6,0 l @8,0 qx @0,@7 l @0,@9 qy @8,@1
	          l @6,@1 qx 0,@9 l 0,@7 qy @6,0 x e">
	    <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="sum pixelwidth 0 #0"/>
	        <v:f eqn="sum pixelheight 0 #0"/>
	        <v:f eqn="prod #0 @2 1"/>
	        <v:f eqn="prod #0 @3 1"/>
	        <v:f eqn="prod @4 @2 1"/>
	        <v:f eqn="prod @5 @3 1"/>
	    </v:formulas>
	</v:shape>

Система координат

Пример 3. Internet Explorer 6 Теперь появились закруглённые уголки. Выражения формулы имеют следующий формат: «операция значение параметр1 параметр2». Над указанным значением производится какая-то операция, использующая указанные параметры. Для суммы sum вычисление будет «значение + параметр1 − параметр2», для умножения prod — «значение × параметр1 / параметр2».

В этом примере первые две формулы дают ссылку на размеры фигуры, как и в предыдущем.

В следующих двух считается отношение размеров в координатах VML к их пиксельным значениям, то есть фактически определяется сколько точек VML приходится на один пиксел по горизонтали и вертикали. Большие значения размера «холста» coordsize заданы для того, чтобы вычисления проводились с достаточной высокой точностью

Далее, из размеров в пикселах вычитается размер закругления, указанный в adj. Наконец, координаты, где закончиваются уголки, пересчитываются в координаты VML и используются при задании формы фигуры.

Для скругления использованы довольно простые команды рисования четверти эллипса qx и qy. qx начинает рисование с горизонтальной черты, а qy — с вертикальной.

Позиционирование

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

Пример 4.1. VML и содержимое страницы

	<style>
	    .round {
	        display:inline-block;
	        padding:10px;
	        -webkit-border-radius:8px;
	        -moz-border-radius:8px;
	        border-radius:8px;
	        background:#CCC;
	    }
	</style>
	<!--[if VML&(lt IE 9)]>
	<style>
	    .round {
	        background:none!important;
	        padding:0!important;
	    }
	    .round-vml {
	        position:relative;
	        padding:11px 9px 9px 11px;
	        height:100%;
	    }
	    v\:shape,
	    v\:formulas,
	    v\:f { behavior:url(#default#VML) }
	    v\:shape { display:inline-block }
	</style>
	<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
	<![endif]-->
	<div class="round">
	<!--[if VML&(lt IE 9)]>
	    <v:shape adj="8" class="round-vml"
	        stroked="false" fillcolor="#CCC"
	        coordorigin="0 0" coordsize="1000000 1000000"
	        path="m @6,0 l @8,0 qx @0,@7 l @0,@9 qy @8,@1
	              l @6,@1 qx 0,@9 l 0,@7 qy @6,0 x e">
	        <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="sum pixelwidth 0 #0"/>
	            <v:f eqn="sum pixelheight 0 #0"/>
	            <v:f eqn="prod #0 @2 1"/>
	            <v:f eqn="prod #0 @3 1"/>
	            <v:f eqn="prod @4 @2 1"/>
	            <v:f eqn="prod @5 @3 1"/>
	        </v:formulas>
	<![endif]-->
	    Закруглённые уголки — это реальность!
	<!--[if VML&(lt IE 9)]>
	    </v:shape>
	<![endif]-->
	</div>

Размеры элемента можно изменять. Радиус закругления от этого не меняется.

Пример 4. Узкое окно Internet Explorer 6 Оказывается, что фигуры VML удачно встают на место существующих элементов, при этом очень ценно то, что для них можно (и нужно) указать стопроцентную высоту, которая будет работать. Ширину, указывать не стоит — элемент «вылезет» из-за того, что по стандартам задаётся ширина содержимого без отступов, к тому же она и так отрабатывается автоматически. В зависимости от задачи: блочный элемент или ширина по содержимому, следует использовать display:block — пример 4.2 или display:inline-block — пример 4.1. Открывающий и закрывающий тэги должны находится в начале и в конце соответственно.

Пример 4. Современный браузер Нижний правый угол начинает обрезаться из-за наличия hasLayout на родительском элементе, поэтому нужен position:relative. На этом этапе уже становятся заметными особенности отображения VML. Края выглядят размытыми, а отступы надо подбирать вручную, не забывая перед этим убрать отступ и фон у родительского элемента, а в дальнейшем и рамку.

Завершающие штрихи

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

Пример 5. Закруглённые уголки в VML

	<div class="round">
	    <!--[if VML&(lt IE 9)]>
	    <v:shape type="#vml-round" class="round-vml"
	        stroked="false" fillcolor="#FFF">
	    <![endif]-->
	        Простые закруглённые уголки
	    <!--[if VML&(lt IE 9)]></v:shape><![endif]-->
	</div>
	<div class="round border">
	    <!--[if VML&(lt IE 9)]>
	    <v:shape type="#vml-round"
	        class="round-vml border-vml" adj="13"
	        fillcolor="#FFF" strokeweight="6px" strokecolor="#BADBAD">
	    <![endif]-->
	        Закруглённые уголки с рамкой
	    <!--[if VML&(lt IE 9)]></v:shape><![endif]-->
	</div>
	<div class="round inline">
	    <!--[if VML&(lt IE 9)]>
	    <v:shape type="#vml-round" class="round-vml inline-vml"
	        stroked="false" fillcolor="#FFF">
	    <![endif]-->
	        Простые закруглённые уголки в строку
	    <!--[if VML&(lt IE 9)]></v:shape><![endif]-->
	</div>
	<div class="round inline border">
	    <!--[if VML&(lt IE 9)]>
	    <v:shape type="#vml-round"
	        class="round-vml inline-vml border-vml" adj="13"
	        fillcolor="#FFF" strokeweight="6px" strokecolor="#BADBAD">
	    <![endif]-->
	        Закруглённые уголки с рамкой в строку
	    <!--[if VML&(lt IE 9)]></v:shape><![endif]-->
	</div>

Теперь всё выглядит примерно так:

Пример 5. Internet Explorer 6

Фигура задаётся с помощью shapetype, затем конкретные применения ссылаются на её с помощью type="#vml-round".

Радиус закругление задаётся с помощью параметра adj. Можно определить в заготовке значение по умолчанию и переопределять его по мере необходимости. Толщина и цвет обрамления задаются с помощью strokeweight и strokecolor соответственно.

Здесь во всей красе видны недостатки подхода. Способ достаточно трудоёмкий, особенно при эмуляции рамки. VML требует отдельного прописывания свойств, которые обычно задаются через CSS: цвет фона, параметры рамки, радиус закругления. В версии CSS для Internet Explorer надо отдельно переназначать и подгонять значения отступов. Механизм отрисовки элемента с рамкой отличается от обычного CSS, из-за чего и нужно вручную подбирать параметры.

Вдобавок, в 6 и 7 версии IE при использовании блочных вариантов, появляется горизонтальная полоса прокрутки, с которой, видимо, надо бороться отдельно — в примере по ссылке для этого используется обрамляющий элемент.

VML позволяет определённые действия над рамками, но если вы захотите сделать неоднородную рамку, то придётся повозиться отдельно. В текущей предварительной версии IE9 пример не работает в режиме совместимости со старыми браузерами.

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

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

Теги: , ,

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

  1. Юрий 29 июня 2010 в 11:23

    Один из самых сложных способов. Есть более простые решения.

  2. alex.kotomanov 29 июня 2010 в 11:25

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

  3. Bolk 29 июня 2010 в 11:37

    Решение с VML предложено ещё давнее: http://bolknote.ru/2008/07/18/~1786.

  4. Андрей 29 июня 2010 в 11:53

    Ну я не спорю - статья полезная, вот только "Закруглённые уголки — это реальность!" конечно реальность, только через жо... как собственно и всё в ИЕ.

  5. Лев Солнцев 29 июня 2010 в 12:06

    В варианте с картинками тоже нужна дополнительная разметка. Здесь же мы её даже упрощаем (а значит ускоряем обработку) для современных браузеров.

  6. Bolk 29 июня 2010 в 12:20

    Кстати, у меня там есть скруглённые уголки для «Опера» 9.5 через SVG background. И ещё — зачем вообще нужны все эти DIV, если уже есть элемент v:shape? Можно просто в остальных браузерах навесить на него стиль.

  7. Лев Солнцев 29 июня 2010 в 12:24

    Shape ориентируется на этот div размерами (height:100%, подгонка ширины).

  8. Арсений 29 июня 2010 в 12:48

    Есть еще способ расставить гигантские точки по углам формы. Как например тут: http://fucktionbooks.ru/alpha/ Просто, но есть ограничения

  9. Михаил Валенцев 29 июня 2010 в 13:32

    Давеча реализовывал подобное (модифицированным дедовским способом), получилось немного более страшное:

    
    <!--[if gt IE 8]><!--><span class="round"><!--<![endif]-->
    <!--[if lt IE 9]><v:roundrect class="round" strokeweight="5px" arcsize=".5" fillcolor="#00A737" strokecolor="#00A737"><![endif]-->
    some text
    <!--[if gt IE 8]><!--></span><!--<![endif]-->
    <!--[if lt IE 9]></v:roundrect><![endif]-->
    
    

    (не через [if VML], так как IETester отказался понимать СС без слова IE, а дальше оптимизировать было лень)

  10. Антон 29 июня 2010 в 15:18

    Очень громоздкий и неудобный способ.
    Вот тру закругление:

    .rounded {
        background:#72b10b;
        behavior:url(ie-css3.htc);
        -moz-border-radius:12px;
        -khtml-border-radius:12px;
        -webkit-border-radius:12px;
        border-radius:12px;
        margin-bottom:10px;
        padding:5px;
    }
    

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

  11. Лев Солнцев 29 июня 2010 в 15:36

    Антон, конечно, данный способ можно автоматизировать, но HTC-компоненты имеют ряд недостатков. Одни из главных: они не кешируются и генерируют запрос на каждом просмотре страницы. При том что кода в приведённом вами в несколько раз больше. Далее, они замедляют работу браузера, поскольку делают перерасчёт при загрузке и изменении размера страницы, а также динамических манипуляциях. Это как раз то, что хотелось бы избежать.

  12. yanesh 29 июня 2010 в 18:42

    Если нужно будет "закруглить" какой то блок, можно смело пользоваться. Но на странице где будет с десяток вызовов htc нужно что то думать похитрее.

  13. Лев Солнцев 29 июня 2010 в 19:52

    yanesh, не совсем понятно, про что вы говорите: это ответ Антону, или комментарий относится к статье? Если последнее, то хотелось бы пояснения. (Но мне кажется плохой идеей подключать десяток HTC).

  14. pennylee 29 июня 2010 в 21:55

    здесь будет нелишней ссылка на хорошие решения задачи с помощью картинок: http://chikuyonok.ru/2009/10/homework2-results/

  15. Panya 30 июня 2010 в 0:37

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

  16. Антон 30 июня 2010 в 7:18

    Лев Солнцев, да, возможно будут наблюдаться тормоза при ресайзинге, но они будут только при ресайзинге и только на слабых машинах и только если у вас действительно штук 20 закруглейний на странице, что бывает редко. И код ксс более ясен, не нужно писать много условных комментариев и переопределять стили специально для ие. Однако, я забыл добавить еще 1 ограничение-баг: если использовать jquery.animate({opeacity:'show'}), то, произойдет глюк. Таким образом, корректно показать скрытый элемент в ИЕ не получится.
    Очень интересно, как ведет себя ваш способ при таких манипуляциях. Если все ок, то это очень хорошо.

    Также, стоит упомянуть об этом альтернатимвном способе:
    http://xamelleon.110mb.com/habr/ex4/
    Тут для закругления используется символ •

  17. tvolf 30 июня 2010 в 12:52

    To Anton:
    Странное дело, нашел файл ie-css3.htc ( размер - 9091 байт) с вот таким вот заголовком в самом начале файла:
    ===
    --Do not remove this if you are using--
    Original Author: Remiz Rahnas
    Original Author URL: http://www.htmlremix.com
    Published date: 2008/09/24

    Changes by Nick Fetchak:
    - IE8 standards mode compatibility
    - VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
    - Added partial support for 'box-shadow' style
    - Checks for VML support before doing anything
    - Updates VML element size and position via timer and also via window resize event
    Published date : 2009/11/19
    http://fetchak.com/ie-css3
    ...
    ===
    Подключил его в css - не получаю в IE6 закругленных углов.
    Если вместо ie-css3.htc использую border-radius.htc, то всё отображается нормально. В чем может быть дело ?

  18. Антон 9 июля 2010 в 11:59

    да, действительно странно, даже на гуглкоде 8.9 Кб. А мой 11, не помню уже где брал, но очевидно в нем есть правильное закругление.

    Берите, пока тепленький.
    http://file.qip.ru/file/TrN3b-TE/ie-css3.html

  19. tvolf 18 июля 2010 в 12:57

    To Антон:
    Попробовал использовать твой новый ie-css3.htc размером 12148 байт,
    но картина не меняется. То есть, при использовании Firefox в обоих случаях
    углы действительно закругляются, а когда использую ie-css3.htc,
    в IE6 закругления не происходит. Привожу тестовый html, на котором проверял:
    ===

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
      <title>Тест</title>
      <style type="text/css">
         * {padding:0; margin: 0}
         div {
            width:500px;
            height:300px;
            background-color:#33ff66;
            border:5px solid #494;
            behavior:url(border-radius.htc);
             -moz-border-radius:55px;
             -khtml-border-radius:55px;
             -webkit-border-radius:55px;
            border-radius:55px;
            zoom:1;
         }
      </style>
    </head>
    <body>
      <div>
      </div>
    </body>
    </html>
    
    

    ===
    Посмотри у себя, нормально ли отрабатывает ?

  20. stunpix 28 июля 2010 в 12:43

    В миллионный раз поражаюсь костылям для HTML... С HTML5 будет та же самая фигня. И ваще он не панацея. Тысячи человекочасов тратятся на изобретение костылей для браузеров вместо того чтобы создавать полезное... Парадоксально, почему язык разметки текста используется для создания пользовательских веб интерфейсов (типичный сайт это давно интерфейс с пользователем, а не просто текст)?... Это разные задачи, даже исходя из названий! Ситуацию не изменит создание всё новых и новых стандартов... Стандарт это просто документ, а документ всегда можно недочитать, недопонять и недо- ещё чего-то... Как факт всегда будет паршивая овца, которую будут снабжать костылями потому что она не доконца поддержала стандарт... Нужен другой подход. Взять к примеру группу MPEG. Разрабатывается стандарт, разрабатывается референсный кодер-декодер и всё это покрывается тестами. Как результат - всё везде работает как надо и однозначно. Отступление от стандарта при таком подходе просто не возможно. Все производные воплощения обязаны не просто следовать стандарту, а ещё и быть совместимым с референсной имплементацией и проходить тесты на стандарт. А веб консорциум по факту сделал только первую часть (издал стандарт), а остальное оставил на усмотрение остальных... Пока так - бардак был, есть и будет. Пока не выпустят стандарт-спецификацию, плюс выпустят референсный движок воплощающий 100% стандарта, плюс покроют тестами на выполнение стандарта - все попытки навести порядок будут провальными. Только при таком подходе не будет смысла создавать новый производный "супер быстрый, удобный, расширяемый" браузер, т.к. он просто не пройдёт валидации стандарта и будет не совместим с референсным движком. Пока это не дойдёт до консорциума - мы будем и дальше тратить силы на костыли, а не на воплощение идей....

  21. tenshi 26 августа 2010 в 16:24

    как бы сделать вложенные блоки с закруглёнными уголками? ._.

  22. tenshi 29 августа 2010 в 22:29

    м.. иногда вложенные шейпы не рисуются. не понял пока почему, но помогает обернуть содержимое в textbox o_0"
    в общем, наваял гламурную дему сабжевого способа:
    http://mojura.110mb.com/i-component/

  23. Лев Солнцев 9 сентября 2010 в 16:48

    Да, действительно спецификация VML, по-видимости, не предполагает вложенности. Однако, если не брать в расчёт IE6, то можно позиционировать отдельные элементы VML на фон и придать размеры родительского блока {width:100%; height:100%}. Эта довольно интересная возможность позволяет например использовать градиенты на фоне, в том числе полупрозрачные.
    А вот размытые тени по типу box-shadow в VML, похоже, гарантированно задать не получится без привлечения скриптов.
    По ссылке не нашёл textbox'а, хотя он правда помогает, но возникает проблема задания размеров по содержимому. В приведённом примере это решается позиционированием.

  24. sr 15 сентября 2010 в 18:15

    Очень круто - спасибо. Действительно работает, и спасибо за такой приятный экскурс в VML

  25. Верстальщик 8 февраля 2011 в 23:40

    Всё бы хорошо, НО если вставить в закруглённый блок ещё один закруглённый блок, то получится косяк.

  26. Сергей 20 февраля 2011 в 12:02

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

       button {
        padding: 3px 7px; /* Поля вокруг текста */
        color: #333; /* Цвет текста */
         -moz-border-radius: 5px; /* Радиус для Firefox */
         -webkit-border-radius: 5px; /* Радиус для Safari и Chrome */
        border-radius:  5px; /* Радиус для IE 9 */
        border: 1px solid #666; /* Параметры рамки */
       }
       button.t1 {
        background: -moz-linear-gradient(#00bbd6, #ebffff);
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));
    
    <a href="1.html" rel="nofollow">Чебурашка</a> | <a href="2.html" rel="nofollow">Гена</a> |
     <a href="3.html" rel="nofollow">Шапокляк</a> | <a href="4.html" rel="nofollow">Лариска</a>Добро пожаловать!
    

    Как и где прописать что бы заливка была градиентом, допустим верх синий, низ голубой.
    Если можно напишите на e-mail: partner39@mail.ru

  27. ром 7 марта 2011 в 22:05

    а чтож на вашем сайте скругления работают только в опере ?

  28. Михаил 24 марта 2011 в 2:14

    Добавлю в копилку HTC-решений.
    http://css3pie.com/
    При не очень большом количестве углов на странице - не тормозит работу браузера и дает приличный результат в ИЕ6-8. И тогда "нескругленной" остается только Опера < 10.50, что меня вполне устраивает, честно говоря.

  29. Владимир 2 ноября 2011 в 13:22

    Господа! Зачем все это?
    Если люди не хотят использовать современные браузеры, то пусть смотрят на прямые углы.
    При грамотной верстке, разница отображения в нормальных браузерах и в IE 6-8 заключается, в основном, только в закругленных уголках, градиентах и тенях, отсутствие которых, ни коим образом не влияет на получение информации, покупку товара, просмотр изображений, видео и т. д.
    Ну будут, например, кнопки с пунктами меню отображаться в IE 6-8 не с закругленными уголками, а простыми прямоугольничками. Это не влияет на юзабилити. Более того, это и на общую картину дизайна не слишком влияет.
    Большинство людей приходят на сайт для получения какой-либо информации или для использования какого-либо сервиса. И им глубоко насрать на мелкие нюансы дизайна. Им главное получить то, за чем они пришли.
    На закругленные уголки обращаем внимание, разве что мы с вами — веб-дизайнеры и разработчики. Но мы же не используем IE для интернет-серфинга. Ведь правда? ;)

  30. Денис 28 ноября 2011 в 13:16

    Может кто сталкивался. У меня такая ситуация. ВСё отлично работает, НО до тех пор, пока не засуну объект с заокругленными углолками внутрь, скажем, DIVа для которого указан background-color - в этом случае углы исчезают моментально :). Может кто знает какой-нить workaround?

Перейти к началу